我对此很陌生，我正在尝试构建一个简单的 div 布局。我想要 3 个容器 div:页眉、内容、页脚。内容 div 我不想固定高度，我希望它根据其内部的内容进行拉伸(stretch)。我也不知道 javascript，所以我只想用 HTML/CSS 来完成它。
我已经在这个网站上寻找答案，但它们似乎不起作用。这是 HTML:
<body>
<div id="header" style="background:beige;">
<div id="logo" style="background:gray;">
put logo here
</div>
<div id="navigation" style="background:grey">
About Us, Contact Us, Etc....
</div>
<div id="content" style="background:beige;">
<div id="bigbox" style="background:black; color:white;">
big box would have some slide show here
</div>
<div class="smallbox" id="smallboxleft" style="background:green;">
smallboxleft
</div>
<div class="smallbox" id="smallboxmiddle" style="background:green;">
smallboxmiddle
</div>
<div class="smallbox" id="smallboxright" style="background:green;">
smallboxright
</div>
</div>
<div id="footer" style="background:navy; color:white;">
This is the footer
</div>
这是 CSS:
#header{margin:0 auto; height:100px; width:960px; position:relative; }
#logo{height:100px; width:200px;}
#navigation{height:50px; width:400px; position:absolute; left:560px; top:50px;}
#content{margin:0 auto; width:960px; height:100%; position:relative; top:25px;}
#bigbox{position:absolute; height:300px; width:860px; position:absolute; left:50px; top:125px;}
.smallbox{position:absolute; height:150px; width:300px; top:450px;}
#smallboxmiddle{left:320px;}
#smallboxright{left:640px; }
#footer{position:absolute; height:100px; width:960px; top:625px;}
最佳答案
我通常最终会使用 display: inline-block当我想要一个元素“收缩包裹”到它的内容时。
inline-blockmakes the element generate a block box that’s laid out as if it were an inline box.
关于css - 如何制作一个居中的div容器，可以根据里面的元素垂直拉伸(stretch)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8321150/