窗口大小CSS HTML

Question

我将尽我所能地尝试和解释这个问题，但这很可能不是一件困难的事情，但我正在努力解决这个问题。

这是我的html：

<div id="nav"> 
<div id="logo">Jack Thomson</div> 
<a href=".." class="active">Home</a> 
<a href=".." class="nav">About</a> 
<a href="/contact" class="nav">Contact</a> 
</div> 

<div id="content"> 

<p> 

Information here 

</p> 

</div> 

，这是我的CSS：

#nav { 
margin : 70px 110px; 
width : 1100px; 
} 
#content { 
opacity : 0.5; 
background : #fff; 
width : 1020px; 
margin : 10px; 
margin-left : 100px; 
padding : 10px; 
border-radius : 5px 0; 
} 

所以，那里有我的代码的某些代码段。我希望在调整窗口大小时调整#content的大小。当我调整窗口大小时，内容框的大小保持不变。我曾尝试添加具有宽度和边距的包装，但不起作用。如果有人知道如何解决这个问题，请让我知道。

- 预先感谢您的任何建议

Answer 1

尝试使用百分比。

因此，例如：

width: 60%; 
height: 60%; 

无论大或小屏幕如何，内容将是60%。

Answer 2

关键是使用百分比来表示#content的宽度和高度。如果您有一个与窗口一起延伸的外部容器，则需要将外部容器的位置设置为相对位置。这将使＃内容的宽度和高度占外部容器的百分比。在这种情况下，您通常会将＃内容的宽度和高度设置为100％。

当然，看到你的HTML和CSS的大部分将使这个答案不太模糊。