容器不包含任何东西

Question

我有一个页面，我希望页面宽度适应浏览器。我认为如果开始一个名为'容器'的div，并且我把整个页面放在其中，并且告诉div完全用width: 100%;填充浏览器宽度，那么它将全部调整大小。但事实并非如此，div甚至没有包含该页面，甚至认为它在里面。

<header> 
    <div id="header"> 
    <table width="100%" border="0"> 
     ... 
    </table> 
    </div> 
</header> 

Answer 1

您要查找的行为来自display:block。这已经在默认情况下发生 - 这只是understanding how it works的问题。

您可以尝试使用div以上/以外的元素。

尝试在你的CSS这样做：

html { 
    background: orange; 
} 
body { 
    background: blue; 
} 

然后给这种风格到您的div：

div { 
    width: 300px; 
    background: white; 
} 

现在，当你的页面上，按Control和-（Windows）中或上Command和-（Mac）在您的键盘上几次。注意背景颜色的行为。

最后，在您的div上设置width:100%;而不是上面列出的值。

实验用的这些组合，最终你会发现：

• 一些要素display:block默认。
• 全部display:block元素使用可用宽度的每一位，除非被告知不这样做。
• 每个元素的“可用宽度”是其父元素（又称其容器）。
• 最上面的元素（html）的“可用宽度”是窗口的宽度。

外卖一些注意事项应该是：

• 你并不需要一个div来做到这一点 - 这是额外的代码和not semantic。
• 如果任何元件具有其宽度明确设置为比其他任何100%或它比block以外的显示类型的，那么没有其后代（子，孙等）将具有它们的宽度是宽度窗户。