使div的高度随其内容扩展
我有这些嵌套的div，我需要主容器扩展（在高度上）以容纳内部的DIV
<!-- head -->
...
<!-- /head -->
<body class="main">
<div id="container">
<div id="header">
<!--series of divs in here, graphic banner etc. -->
</div>
<div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
<div id="items_list" class="items_list ui-sortable">
<div id="item_35" class="item_details">
</div>
<div id="item_36" class="item_details">
</div>
<div id="item_37" class="item_details">
</div>
<!-- this list of DIVs "item_xx" goes on for a while
each one representing a photo with name, caption etcetc -->
</div>
</div>
<br class="clear"/>
<div id="footer">
</div>
</body>
</html>
CSS是这样的：
* {
padding: 0;
margin: 0;
}
.main {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #4c5462;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
.main #container {
height: auto;
width: 46em;
background: #4c5462;
margin: 0 auto;
border: 0px solid #000000;
text-align: left;
}
.main #main_content {
padding: 5px;
margin: 0px;
}
#items_list {
width: 400px;
float: left;
}
.items_list {
width: 400px;
float: left;
}
.item_details {
margin-top: 3px;
margin-bottom: 3px;
padding: 3px;
float: left;
border-bottom: 0.5px solid blue;
}
我的问题是#main_content无法拉伸以容纳所有内部div，结果它们一直在后台运行。
考虑到以上情况，如何解决此问题？
问题答案：
您需要clear:both在#main_contentdiv关闭之前强制输入a 。我可能会将其<br class="clear" />;移入#main_contentdiv并将CSS设置为：
.clear { clear: both; }
更新：
这个问题仍然有相当多的流量，所以我想使用CSS3中称为“弹性框”或“弹性框”的新布局模式，以一种现代的替代方法来更新答案：
body {
margin: 0;
}
.flex-container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #3F51B5;
color: #fff;
}
section.content {
flex: 1;
}
footer {
background-color: #FFC107;
color: #333;
}
<div class="flex-container">
<header>
<h1>
Header
</h1>
</header>
<section class="content">
Content
</section>
<footer>
<h4>
Footer
</h4>
</footer>
</div>
当前，大多数现代浏览器都支持Flexbox和视口单元，但是如果您必须保持对旧版浏览器的支持，请确保检查特定浏览器版本的兼容性。
-
问题内容： 我想要黑色的外部包装包裹它的浮动。我不想使用中与ID，因为我希望它自动将其内容的高度（例如，浮动或多个）。 如何实现呢？ 问题答案： 您可以将的CSS设置为此 您也可以在末尾添加一个元素来完成此操作。可以使用JS（不是一个好的解决方案）或CSS伪元素（在较旧的IE中不受广泛支持）正常添加。 问题在于容器不会自然地扩展为包括浮动儿童。使用第一个示例警告您，如果在父元素之外还有子元素，则它
-
问题内容： 如您在下面的CSS中所看到的，我想将自己定位在之前。这是因为我当前正在开发的网站也可以在移动设备上工作，该网站应该位于底部，因为它包含了我想要在移动设备内容下方显示的导航。-为什么没有2个母版页？这是在整个HTML中重新定位的仅有2个，因此，此较小更改的2个母版页是一个过大的功能。 HTML： CSS： 具有动态高度，因为不同的子站点可能具有更多或更少的导航项。 我知道绝对定位元素已从
-
问题内容： 在下面的代码中，我希望带有“ y”的div将div的高度与3个“ x”相匹配。 需要注意的是内部div是浮动的。 问题答案： 如果您不反对使用jQuery，可以使用EqualHeight，它应该做您想要的
-
我正在使用flexbox布局将三个div定位在一列中，以便每个div具有相同的高度。如果每个div的内容太大，则会显示滚动条。我希望每一节只扩展到其内容的高度，但目前发生的情况是，每一节总是相同的高度，而不管其中的内容如何。 如果容器是900px，则每个节应该是300px，如果一个节的内容超过300px高，则应该出现滚动条。但是，如果lets的内容说中间的部分只有100px高，那部分应该只有100
-
问题内容： 1：如何使导航div向下扩展或使其高度与父div相同？ 问题答案： 简单的方法 您可以使用nav to 和的设置和属性来实现此目的。将容器设置为。 现代方式（Flexbox） IE11 +和所有现代浏览器都支持flexbox。
-
问题内容： 我的页面结构为： 现在，DIV将具有更多内容，因此DIV的高度将根据子DIV的增加而增加。 但是问题是身高没有增加。如何使它的高度等于父代的高度？ 问题答案： 对于元素，添加以下属性： 然后针对这些：