我在显示 2 个具有独立背景颜色的 float div 时遇到问题。
所以顶部元素是我的标题。下面应该有一个导航和一个主 div。
它们都有不同的背景颜色,默认情况下颜色应该显示到页面末尾(即使 div 之间的文本长度不同)。
为了更好的解释,我做了一个 jsfiddle 演示。您可以单击导航 div 和主 div 以显示更多文本。
演示:http://jsfiddle.net/AfRH2/22/
HTML:
<section id="admin_header">
</section>
<section id="admin_main">
<!-- Navigation -->
<nav id="nav">
text
</nav>
<!-- Content -->
<article id="main">
text
</article>
<div style="clear: both"></div>
</section>
CSS:
body {
font-size: 12px;
height: 100%;
}
#admin_header {
position: relative;
height: 100px;
background-color: #000000;
}
#admin_main {
position: relative;
min-height: 100%;
}
#nav {
position: absolute;
width: 160px;
float: left;
top: 0;
left: 0;
margin: 5px 0 0 0;
background-color: #f5f4f2;
}
#main {
position: absolute;
float: left;
top: 0;
right: 0;
left: 160px;
margin: 5px 0 0 0;
padding: 20px;
background-color: #f9f9f9;
}
p { display: none; }
最佳答案
您的包含部分 admin_main 没有高度,因此导航仅使用所需的高度。将高度添加到 admin_main 解决。
html,body {
font-family: sans-serif;
font-size: 12px;
height: 100%;
}
#admin_main {
position: relative;
height: 100%
}
看这里 -- http://jsfiddle.net/7M4Ek/
关于css - float div 背景颜色直到页面结束才到达,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22770767/