对于模糊的标题感到抱歉，但我遇到了一个我无法找到解决方法的问题。我正在尝试创建一个长度相等的2列网站。我一直在关注 this tutorial ，它主要是在工作，但有一个部分中断。右栏的内容在背景下消失。我事先道歉，我对此很陌生。
下面的容器包含整个页面;标题，导航，内容和页脚。如果您需要其余代码，请告诉我。可以查看正在运行的网页 here ;
#container {
float: left;
margin-left: 5px;
width: 1023px;
height: 100%;
}
#containerLeft {
float: left;
background: #fff;
width: 100%;
position: relative;
overflow: hidden;
right: 24%;
height: 100%;
}
#containerRight {
float: left;
background: #e7e1d7;
width: 100%;
position: relative;
overflow: hidden;
height: 100%;
}
#rightContent {
float: left;
width: 24%;
overflow: hidden;
position: relative;
z-index: 5;
}
#leftContent {
float: left;
width: 76%;
position: relative;
overflow: hidden;
}<div id="containerRight">
<div id="containerLeft">
<div id="rightContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu enim, laoreet nec orci sed, sagittis condimentum libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut tempus tellus nisi, ut bibendum quam eleifend nec. Integer
semper eu dui id vestibulum. Mauris porttitor ullamcorper laoreet. Integer non nunc sit amet tortor porta bibendum vel sed enim. Maecenas elit mauris, consectetur mollis varius vitae, dignissim non purus. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus eu ligula ligula. Nulla posuere quis nisl sed tincidunt. Praesent vel nisi orci. Pellentesque congue vel enim eu pulvinar. Vivamus massa ante, malesuada eget rutrum varius, placerat ut arcu. Pellentesque rutrum lacinia
ex sit amet sollicitudin.</p>
<p>Integer rhoncus, enim eu iaculis commodo, nulla arcu porta tortor, a pellentesque ante justo ut nisi. Donec ex libero, consequat at ligula vitae, sodales maximus eros. Aenean feugiat porttitor dui a cursus. Aliquam aliquam et sapien a auctor. Suspendisse
placerat sem quis dui feugiat accumsan. Maecenas ultrices sagittis augue, et dictum sem imperdiet quis. In purus nisl, interdum ac dolor vitae, eleifend hendrerit justo. Nullam facilisis, orci in fermentum condimentum, velit diam pulvinar magna,
ut ornare nibh nunc vel sapien. Phasellus aliquet massa justo, a eleifend diam pharetra vel. Integer sem dui, elementum eget orci eget, feugiat feugiat velit. Aenean eget dapibus metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Etiam efficitur ipsum nisl, eu hendrerit tellus ultricies sit amet. Donec pulvinar interdum ante, in malesuada lacus consequat vel. Aliquam commodo tellus vel metus accumsan facilisis. Nulla facilisi.</p>
<p>Nulla facilisi. Donec vitae gravida orci, vitae sollicitudin nisl. Sed sed metus risus. Donec porttitor, augue quis elementum pellentesque, libero arcu pretium est, ut placerat enim quam nec quam. Nam vel mauris dapibus, commodo nibh ac, cursus
eros. Curabitur tristique mauris nec justo laoreet laoreet. Nam nisi elit, fermentum eu egestas sollicitudin, molestie sed diam. Nulla at quam nec purus varius scelerisque non eget augue. In quis ex ac felis iaculis lobortis at vel sem. Ut luctus
quam ac blandit sodales. Etiam sodales arcu eu tellus interdum mollis. Integer feugiat dui quis magna scelerisque, vel fringilla nulla aliquam. Fusce et rhoncus libero. Aliquam nibh nunc, consectetur et ipsum sit amet, vulputate hendrerit sapien.
Sed orci elit, euismod in libero nec, ornare feugiat erat.</p>
<p>Suspendisse potenti. Morbi consectetur, dui eu rutrum luctus, dui diam laoreet ex, ut fermentum enim eros at urna. Nulla at luctus tortor, quis euismod libero. Cras sodales augue at dui fermentum facilisis. Nullam vehicula sapien semper neque euismod,
non convallis sem iaculis. Cras ultricies convallis ex, nec varius tellus consectetur ut. Maecenas efficitur vestibulum est at ultrices. Nulla sit amet est iaculis, fringilla justo a, suscipit orci. Etiam rutrum auctor bibendum. Donec molestie
diam at lacus eleifend lacinia. Proin sit amet enim elementum, egestas odio quis, euismod nibh. In hac habitasse platea dictumst. Ut quis ante id elit semper aliquam. Aliquam a tempus justo. Aenean finibus nulla augue, eget dictum magna congue
at.</p>
<p>Praesent nisl neque, rutrum non mauris et, hendrerit iaculis odio. Fusce nisi elit, ultrices rhoncus magna nec, pulvinar luctus ex. Mauris id ante eget arcu suscipit efficitur. Aliquam imperdiet lectus ante, eget laoreet metus mollis ut. Praesent
volutpat suscipit arcu, at finibus dolor. Sed vitae pulvinar mi, quis condimentum justo. Donec sed tincidunt justo. Mauris non semper justo. Sed facilisis libero eget lorem gravida, ac consectetur eros pulvinar.</p>
</div>
<div id="leftContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam arcu enim, laoreet nec orci sed, sagittis condimentum libero. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut tempus tellus nisi, ut bibendum quam eleifend nec. Integer
semper eu dui id vestibulum. Mauris porttitor ullamcorper laoreet. Integer non nunc sit amet tortor porta bibendum vel sed enim. Maecenas elit mauris, consectetur mollis varius vitae, dignissim non purus. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Phasellus eu ligula ligula. Nulla posuere quis nisl sed tincidunt. Praesent vel nisi orci. Pellentesque congue vel enim eu pulvinar. Vivamus massa ante, malesuada eget rutrum varius, placerat ut arcu. Pellentesque rutrum lacinia
ex sit amet sollicitudin.</p>
<p>Integer rhoncus, enim eu iaculis commodo, nulla arcu porta tortor, a pellentesque ante justo ut nisi. Donec ex libero, consequat at ligula vitae, sodales maximus eros. Aenean feugiat porttitor dui a cursus. Aliquam aliquam et sapien a auctor. Suspendisse
placerat sem quis dui feugiat accumsan. Maecenas ultrices sagittis augue, et dictum sem imperdiet quis. In purus nisl, interdum ac dolor vitae, eleifend hendrerit justo. Nullam facilisis, orci in fermentum condimentum, velit diam pulvinar magna,
ut ornare nibh nunc vel sapien. Phasellus aliquet massa justo, a eleifend diam pharetra vel. Integer sem dui, elementum eget orci eget, feugiat feugiat velit. Aenean eget dapibus metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Etiam efficitur ipsum nisl, eu hendrerit tellus ultricies sit amet. Donec pulvinar interdum ante, in malesuada lacus consequat vel. Aliquam commodo tellus vel metus accumsan facilisis. Nulla facilisi.</p>
<p>Nulla facilisi. Donec vitae gravida orci, vitae sollicitudin nisl. Sed sed metus risus. Donec porttitor, augue quis elementum pellentesque, libero arcu pretium est, ut placerat enim quam nec quam. Nam vel mauris dapibus, commodo nibh ac, cursus
eros. Curabitur tristique mauris nec justo laoreet laoreet. Nam nisi elit, fermentum eu egestas sollicitudin, molestie sed diam. Nulla at quam nec purus varius scelerisque non eget augue. In quis ex ac felis iaculis lobortis at vel sem. Ut luctus
quam ac blandit sodales. Etiam sodales arcu eu tellus interdum mollis. Integer feugiat dui quis magna scelerisque, vel fringilla nulla aliquam. Fusce et rhoncus libero. Aliquam nibh nunc, consectetur et ipsum sit amet, vulputate hendrerit sapien.
Sed orci elit, euismod in libero nec, ornare feugiat erat.</p>
<p>Suspendisse potenti. Morbi consectetur, dui eu rutrum luctus, dui diam laoreet ex, ut fermentum enim eros at urna. Nulla at luctus tortor, quis euismod libero. Cras sodales augue at dui fermentum facilisis. Nullam vehicula sapien semper neque euismod,
non convallis sem iaculis. Cras ultricies convallis ex, nec varius tellus consectetur ut. Maecenas efficitur vestibulum est at ultrices. Nulla sit amet est iaculis, fringilla justo a, suscipit orci. Etiam rutrum auctor bibendum. Donec molestie
diam at lacus eleifend lacinia. Proin sit amet enim elementum, egestas odio quis, euismod nibh. In hac habitasse platea dictumst. Ut quis ante id elit semper aliquam. Aliquam a tempus justo. Aenean finibus nulla augue, eget dictum magna congue
at.</p>
<p>Praesent nisl neque, rutrum non mauris et, hendrerit iaculis odio. Fusce nisi elit, ultrices rhoncus magna nec, pulvinar luctus ex. Mauris id ante eget arcu suscipit efficitur. Aliquam imperdiet lectus ante, eget laoreet metus mollis ut. Praesent
volutpat suscipit arcu, at finibus dolor. Sed vitae pulvinar mi, quis condimentum justo. Donec sed tincidunt justo. Mauris non semper justo. Sed facilisis libero eget lorem gravida, ac consectetur eros pulvinar.</p>
</div>
</div>
</div>
正如您所看到的，我尝试使用z-index，但它似乎没有效果。我也尝试了边距和填充，但这完全破坏了事情，并且按照教程中的指示左/右没有做任何有用的事情。
答案 0 :(得分：2)
以下是2列布局所需的代码。你犯了几个错误：
containerLeft不需要height: 100%和position: relative;。containerRight不需要height: 100%。containers，因为您只有2列。left和right来计算列的宽度。但是，请确保您确实需要这种布局（具有相等的列高度），因为这是布局的许多额外代码。您还可以查看本文以获取更多技巧，具体取决于您需要的浏览器支持：http://css-tricks.com/fluid-width-equal-height-columns/
检查以下更正后的代码：
.header {
background-color: AliceBlue;
}
.footer {
clear: both;
background-color: Beige;
}
#containerLeft {
clear: left;
float: left;
width: 100%;
overflow: hidden;
background-color: #999;
}
#containerRight {
float: left;
width: 100%;
position: relative;
right: 24%; /* this will make your right column 24% width */
background-color: #e4e4e4;
}
#leftContent {
float: left;
width: 68%; /* Your left container is now 100% - 24% (containerRight) = 76%. I have included a padding of 8% to make your content breathe so 76% - 8% = 68% */
position: relative;
left: 28%; /* Your content in your left container will start at 100% - 76% (left container width) = 24%. I have included a paading-left of 4% which makes it 24 + 4 = 28% */
overflow: hidden;
}
#rightContent {
float: left;
width: 20%; /* Your right column width is 24% and I have included a 4% padding so 24 - 4 = 20% */
position: relative;
left: 34%; /* Your content will start at 100% - 68% (width of leftContent) = 32%. I have included a 2% padding so 32 + 2 = 34% */
overflow: hidden;
}<section class="header">
<div class="banner">
Your banner
</div>
<nav>
Your nav
</nav>
</section>
<section class="main">
<div id="containerLeft">
<div id="containerRight">
<div id="leftContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="rightContent">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
</div>
</div>
<!-- /end container2 -->
</div>
<!-- /end container1 -->
</section>
<section class="footer">
Your footer
</section>