Question

我正在努力获得一个扩展到我页面底部的两列布局。但是，即使我试图让它扩展到整个页面，我的侧边栏也会在container-fluid高度处切断。

奇怪的是我的内容栏工作正常。

HTML ：

<div class="container-fluid">
    <div class="row-fluid columns no-margin fill">
        <div id="sidebar" class="span2 columns no-margin right-edge"></div>
        <div id="contentWrapper" class="span10 columns no-margin pull-right"></div>
    </div>
</div>

CSS ：

html, body, form {
    height: 100%;
    min-height: 100%;
    background-image:url("../../images/lightGreyBackground.png");
    background-repeat: repeat;
    font-family:"Segoe UI", Helvetica, Arial, Sans-Serif;
}
.container-fluid {
    margin: 0 auto;
    height: auto;
    padding: 0px;
}
.columns {
    height: 100%;
    min-height:100%;
    margin: 0px;
    width: 100%;
}
.fill {
    position: absolute;
    height: 100%;
    min-height: 100%;
}
.no-margin {
    margin-left: 0%;
    width: 100%;
}
.right-edge {
    border-right: 1px;
    border-right-style: solid;
    border-right-color: #CCCCCC;
}
#sidebar {
    background-color: White;
    padding-top:15px;
}

Answer 1

有2列：

<html>
    <head>
        <style type="text/css">
            .container-fluid { width: 100%;}
            .float {
                float: left;
                width: 50%; /* Size colonne */
                margin: 1em 0; /* Margin colonne */
            }
            .spacer { clear: both; }
        </style>
    </head>
    <body>
        <div class="container-fluid">
            <div class="float">Colonne 1</div>
            <div class="float">Colonne 2</div>
            <div class="spacer"></div>
        </div>
    </body>
</html>

使用框架bootstrap或960.gs，功能强大的前端框架，以便更快，更轻松地进行Web开发。

使用bootstrap 3：

<div class="container">
  <!-- Example row of columns -->
  <div class="row">
    <div class="col-lg-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus.</p>
      <p><a class="btn btn-default" href="#">View details »</a></p>
    </div>
    <div class="col-lg-4">
      <h2>Heading</h2>
      <p>Donec id elit non mi porta gravida at eget metus.</p>
      <p><a class="btn btn-default" href="#">View details »</a></p>
   </div>
    <div class="col-lg-4">
      <h2>Heading</h2>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in.</p>
      <p><a class="btn btn-default" href="#">View details »</a></p>
    </div>
  </div>
</div>

获取侧栏列以扩展到页面底部

1 个答案: