2 列布局，在内容添加到侧边栏 div 时扩展页面长度答案

【问题标题】：2 column layout that extends the length of the page as content is added to sidebar div2 列布局，在内容添加到侧边栏 div 时扩展页面长度
【发布时间】：2014-10-09 06:58:55
【问题描述】：

我正在构建一个具有 2 列布局、页眉和页脚的页面。我正在使用 div、html 和 css。

我遇到的问题是由 div#sideBar 创建的左列在添加内容时延伸到页脚。

我正在寻找的解决方案是当更多内容添加到 div#侧边栏。

我浏览了几个教程，但似乎无法弄清楚。有人可以指导我看一个可以解决这个问题的教程，或者帮助我修改下面的代码，以便它创建的页面会随着内容添加到 div#sideBar 而扩展（下推页脚）？

下面的屏幕截图显示了下面代码的结果。

<style type="text/css">
#wrapper {
    width: 900px;
    margin: auto;
}
#header {
    background-color: #0F0;
}
#contentWrapper {
    background-color: #FF0;
}
#footer {
    background-color: #00F;
}
#sideBar {
    float: left;
    width: 200px;
    height: 100%;
    color: #F00;
}
#content {
    width: 700px;
    margin-left: 200px;
    background-color: #FFF;
}
p {
    margin: 0px;
}
</style>
</head>

<body>
<div id="wrapper">
  <div id="header">
    Home | Page One | Page Two  </div>
  <div id="contentWrapper">
    <div id="sideBar">
      <p>
        <ul>
  <li>Home</li>
  <li>Page One</li>
  <li> Page Two</li>
</ul>
      </p>
      <p>hgfds</p>
      <p>kgjkfhghf</p>
      <p>jkfhgjdffgfhj</p>
      <p>ljkfhgjdf</p>
      <p>;klgjhg</p>
      <p>lkgjhfg</p>
      <p>lgkjhfg</p>
      <p>&nbsp;</p>
    </div>
    <div id="content">
      <p>Content for  id "content" Goes Here</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="footer">
    <p>CopyRight 2014</p>
<p>Home | Page One | Page Two</p>
  </div>
</div>
</body>
</html>

【问题讨论】：

标签： html css

【解决方案1】：

#footer {
    background-color: #00F;
    clear:both;
}

您需要清除侧边栏中使用的浮动，您可以在页脚中执行此操作。

#sideBar {
    float: left;
    width: 200px;
    height: 100%;
    color: #F00;
}

除非你还需要扩展背景，在这种情况下你需要在包装器内添加一个标签来清除浮动

    </div> <!-- content div -->
    <div style="clear:left"></div>
  </div> <!-- wrapper div -->
  <div id="footer">

【讨论】：

【解决方案2】：

最简单的方法是在侧边栏和主要内容区域共享的容器上使用display:table;，并将两个子div设置为display:table-cell;

HTML：

<div class="container">
    <div class="sidebar">
        <ul>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>
            <li>item 1</li>

        </ul>
    </div>
    <div class="main">
        main content main content main content main content main content main content main content main content main content main content main content main content main content main content main
    </div>    
</div>

CSS：

.container {
    width:100%;
    display:table;
}
.sidebar, .main {
    width:50%;
    display:table-cell;
}
.main {
    background:#eee;
}
.sidebar {
    background:#666;
}

http://jsfiddle.net/3gbfnpua/3/

【讨论】：

【解决方案3】：

您可以通过将其添加到您的 css 来解决此问题：

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

然后将class="clearfix" 添加到您要扩展的任何元素。

在 StackOverflow（以及互联网上的其他地方）上有很多关于 Clearfix 的信息。例如，试试this question。

#wrapper {
  width: 900px;
  margin: auto;
}
#header {
  background-color: #0F0;
}
#contentWrapper {
  background-color: #FF0;
}
#footer {
  background-color: #00F;
}
#sideBar {
  float: left;
  width: 200px;
  height: 100%;
  color: #F00;
}
#content {
  width: 700px;
  margin-left: 200px;
  background-color: #FFF;
}
p {
  margin: 0px;
}
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.clearfix {
  display: inline-block;
}
html[xmlns] .clearfix {
  display: block;
}
* html .clearfix {
  height: 1%;
}

<div id="wrapper">
  <div id="header">
    Home | Page One | Page Two</div>
  <div id="contentWrapper" class="clearfix">
    <div id="sideBar">
      <p>
        <ul>
          <li>Home</li>
          <li>Page One</li>
          <li>Page Two</li>
        </ul>
      </p>
      <p>hgfds</p>
      <p>kgjkfhghf</p>
      <p>jkfhgjdffgfhj</p>
      <p>ljkfhgjdf</p>
      <p>;klgjhg</p>
      <p>lkgjhfg</p>
      <p>lgkjhfg</p>
      <p>&nbsp;</p>
    </div>
    <div id="content">
      <p>Content for id "content" Goes Here</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
  </div>
  <div id="footer">
    <p>CopyRight 2014</p>
    <p>Home | Page One | Page Two</p>
  </div>
</div>

【讨论】：