html - Div 在另一个 div 下消失

Question

抱歉，标题含糊不清，但我有一个问题，我一直无法找到解决办法。我正在尝试创建一个包含等长列的 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 但它似乎不起作用。我还尝试了边距和填充，但这完全破坏了一切，并且按照教程中的指示向左/向右没有做任何有用的事情。

Answer 1

这是您的 2 列布局所需的代码。你犯了几个错误:

• 您的第一个 containerLeft 不需要 height: 100% 和 position: relative;。
• 您的第二个 containerRight 不需要 height: 100%。
• 您只需要两个容器，因为您只有 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>