2

ページの下部まで拡張される 2 列のレイアウトを取得することに取り組んでいます。ただし、サイドバー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;
}
4

1 に答える 1

0

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>

フレームワークブートストラップまたは960.gs、強力なフロントエンド フレームワークを使用して、Web 開発をより迅速かつ簡単にします。

ブートストラップ 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>
于 2013-08-21T15:19:54.297 に答える