窗口大小调整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的宽度和高度。如果您有一个随窗口延伸的外部容器，那么您需要将外部容器的位置设置为relative。这将使#content的宽度和高度成为外部容器的百分比。在这种情况下，您通常会将#content的宽度和高度设置为100％。

当然，看到你的html和css的更大部分会使这个答案变得不那么模糊。