我有这些嵌套的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 accomodate 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,结果是它们不断背景.
我怎么解决这个问题？
jen*_*nny 268
您需要clear:both在#main_contentdiv关闭之前强制执行a .我可能会移动<br class="clear" />;到#main_contentdiv并将CSS设置为:
.clear { clear: both; }
更新:此问题仍然获得了相当多的流量,因此我想使用CSS3中名为Flexible box或Flexbox的新布局模式,使用现代替代方案更新答案:
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和视口单元,但如果您必须维护对旧版浏览器的支持,请确保检查特定浏览器版本的兼容性.
小智 219
试试这个:
overflow: auto;
它适用于我的问题..
小智 83
添加以下内容:
overflow:hidden;
height:1%;
到你的主要div.消除<br />了清除额外的需要.
小智 22
我会用的
height: auto;
在你的div.是的,我知道我迟到了一点但是我觉得这可能有助于像这样的人会帮助我.
Ste*_*ike 14
以下应该工作:
.main #main_content {
padding: 5px;
margin: 0px;
overflow: auto;
width: 100%; //for some explorer browsers to trigger hasLayout
}
小智 8
使用带有display:inline-blockcss 的span标记.然后你可以使用CSS并在很多方面像div一样操作它,但是如果你不包含一个width或height它根据其内容进行扩展和缩小.
希望有所帮助.
通常我认为这可以通过clear:both在最后一个子元素上强制规则来解决#items_list.
你可以使用:
#items_list:last-child {clear: both;}
或者,如果您正在使用动态语言,则在创建列表本身的任何循环中生成的最后一个元素中添加一个额外的类,因此您最终会在html中使用以下内容:
<div id="list_item_20" class="last_list_item">
和css
.last_list_item {clear: both; }
当父Div的子元素浮动时会出现此问题.这是问题的最新解决方案:
在你的CSS文件中写下以下类.clearfix和伪选择器:after
.clearfix:after {
content: "";
display: table;
clear: both;
}
然后,在您的HTML中,将.clearfix类添加到您的父Div.例如:
<div class="clearfix">
<div></div>
<div></div>
</div>
它总是应该工作.你可以调用类的名称.集团而不是.clearfix,因为它将使代码更多的语义.请注意,不必在双引号""之间的Content值中添加点或甚至空格.另外,溢出:auto; 可能会解决问题,但它会导致其他问题,如显示滚动条,不建议.
资料来源:Lisa Catalano和Chris Coyier的博客
在做任何事情之前，请检查 css 规则：
{ position:absolute }
删除如果存在并且不需要它们。
小智 5
看起来这有效
html {
width:100%;
height:auto;
min-height:100%
}
它以屏幕尺寸为最小，如果内容扩展，它就会增长。