html - Div 占据了容器的整个高度，但仍位于底部

标签 html css

我的一个 div 特别是 .mid-content 有问题。它占据了我的外部 div .main-content 的整个高度，但我希望它低于我的其他两个内部 div .posts 和 .sidebars.相反，它位于 .sidebars 的左侧。

我尝试将 .mid-content div 的显示变成一个 block ，但问题仍然存在。我还尝试使用容器 div 中的溢出设置，它会导致我的页眉边框被删除。

这是我的代码

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>My First Website</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width initial-scale=1">
  </head>
  <body>

    <div class="container">

      <div class="header">
        <ul class="navigation-bar">
          <li class="active"><a href="#">HOME</a></li>
          <li><a href="#">ABOUT</a></li>
          <li><a href="#">CONTACT</a></li>
        </ul>
      </div>

      <div class="main-content">
        <div class="posts top-buffer">
          <div class="post">
            <h1>A Post About Something</h1>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
            </p>
          </div> 
        </div>

        <div class="sidebars top-buffer">
          <div class="sidebar">
            <h1>Sidebar One</h1>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
            </p>
          </div>
        </div>

        <div class="mid-content">
          <h1>
            This Should be below everything
          </h1>
        </div>

    </div>
  </div>
</body>
</html>

CSS

* {
    margin: 0px;
    padding: 0px;
    font-family: futura;
}

body {
    background-color: #f2f2f2;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 80px;
    background-color: #777777;
    border: 3px solid black;
    border-radius: 5px;
}

.navigation-bar {
    height: 80px;
    width: 80%;

}

.navigation-bar > ul {
    margin: 0 auto;
}

.navigation-bar > li {
    width: 20%; 
    list-style: none;
    float: left;
}

.navigation-bar > li > a {
    display: block;
    color: white;
    line-height: 80px;
    text-align: center;
    text-decoration: none;
}

.navigation-bar a:hover, .navigation-bar a:active, .active {
    background-color: #ff8989;
}

.main-content {
    overflow: hidden;
}

.top-buffer {
    margin-top: 2%;
}

.posts {
    width: 55%;
    float: left;
    border: 3px solid black;
    padding: 2% 4%;
    margin-top: 2%;
    margin-bottom: 4%;
    border-radius: 5px;
    background-color: #ffc893;

}

.sidebars {
    width: 26%;
    float: right;
    border: 3px solid black;
    border-radius: 5px;
    padding: 2% 3%;
    background-color: #b5ffb2;
}

.mid-content {
    width: 100%;
    display: block;
}

最佳答案

只需在 .mid-content div 上使用 clear: both。检查下面更新的代码段

* {
    margin: 0px;
    padding: 0px;
    font-family: futura;
}

body {
    background-color: #f2f2f2;
}

.container {
    width: 80%;
    margin: 0 auto;
}

.header {
    width: 100%;
    height: 80px;
    background-color: #777777;
    border: 3px solid black;
    border-radius: 5px;
}

.navigation-bar {
    height: 80px;
    width: 80%;

}

.navigation-bar > ul {
    margin: 0 auto;
}

.navigation-bar > li {
    width: 20%; 
    list-style: none;
    float: left;
}

.navigation-bar > li > a {
    display: block;
    color: white;
    line-height: 80px;
    text-align: center;
    text-decoration: none;
}

.navigation-bar a:hover, .navigation-bar a:active, .active {
    background-color: #ff8989;
}

.main-content {
    overflow: hidden;
}

.top-buffer {
    margin-top: 2%;
}

.posts {
    width: 55%;
    float: left;
    border: 3px solid black;
    padding: 2% 4%;
    margin-top: 2%;
    margin-bottom: 4%;
    border-radius: 5px;
    background-color: #ffc893;

}

.sidebars {
    width: 26%;
    float: right;
    border: 3px solid black;
    border-radius: 5px;
    padding: 2% 3%;
    background-color: #b5ffb2;
}

.mid-content {
    width: 100%;
    display: block;
    clear: both;
    
}
<div class="container">

  <div class="header">
    <ul class="navigation-bar">
      <li class="active"><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
  </div>

  <div class="main-content">
    <div class="posts top-buffer">
      <div class="post">
        <h1>A Post About Something</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
        </p>
      </div> 
    </div>

    <div class="sidebars top-buffer">
      <div class="sidebar">
        <h1>Sidebar One</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed efficitur urna id mauris laoreet, at dictum ligula tincidunt. Sed eu facilisis nibh. Vivamus a molestie erat, ornare interdum tellus. Maecenas fermentum molestie augue a sollicitudin. Pellentesque feugiat ipsum ut orci consequat tempor. Quisque a urna aliquam, semper lorem sed, venenatis massa. Ut mauris dui, blandit at erat nec, pulvinar eleifend tellus. Donec laoreet lorem ac sodales molestie.
        </p>
      </div>
    </div>

    <div class="mid-content">
      <h1>
        This Should be below everything
      </h1>
    </div>

  </div>
</div>

关于html - Div 占据了容器的整个高度，但仍位于底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45453914/

上一篇：jquery - 如何在一个 js 事件中启用和禁用 css 转换？

下一篇：html - 最大的 div 到所有 div,s 的高度

相关文章：

html - Twitter Bootstrap 表格宽度全宽但内容居中

使用 Batch 和 Blat.exe 的 Html 电子邮件正文

javascript - 如何使用 jquery 在某个点滚动页面本身？

html - 什么 CSS 选择器影响未填充所需输入的边框？

PHP、代码点火器、Dompdf : HTML generating fine but exectuion time out whlie rederning PDF

css - LESS CSS - 函数中的不同元素

html - 移动站点使用 'Mega CSS Sprites' 有什么缺点？

javascript - 在 .html 中为 javascript 使用选择 id

Javascript 在同一张图片上单击播放和暂停歌曲

html - 为什么导航和标题 div 之间存在间隙/空间？

©2024 IT工具网  联系我们