窗口大小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的大部分將使這個答案不太模糊。