3

CSS の学習を始めたばかりで、2 つの独立した列があり、それぞれにスクロール バーがあるページが必要です。そして、私のCSSは次のようになります（span4とspan8はdivクラスです）

body { 
       height: 100%; 
       overflow: hidden; } 
.span4 {
        height: 100%;
        overflow: auto; }
.span8 { 
        height: 100%;
        overflow: auto; }

動作していないようです。"400px" のように、span4 と span8 の高さを指定する必要がありますが、これはしたくありません (責任はありませんか? 高さもわかりません)。私は何かが恋しいですか？これが JavaScript なしで実行できれば、それで問題ありません (私は js についてほとんど知りません)。ありがとう。

更新：まだ理解できません。説明するリンクは次のとおりです。http://jsfiddle.net/hPfKk/2/

4

3 に答える 3

8

行流体の周りに「ラッパー/ボックス」を作成したいと思います。Bootstrap CSS とposition:absolute2 つのスパン/列の周りのコンテナーをいくつかオーバーライドすると、これが機能するはずです。

<div class="box">
  <div class="row-fluid">
    <div class="column span4">

     <!-- left-side --->

    </div>
    <div class="column span8">

     <!-- right-side --->

    </div>
  </div>
</div>

いくつかの Bootstrap CSS オーバーライドを追加し、.box および .column コンテナーを微調整します。

html, body {
    height: 100%;
}

.row-fluid {
    height: 100%;
}

.column:before, .column:after {
    content: "";
    display: table;
}

.column:after {
    clear: both;
}

.column {
    height: 100%;
    overflow: auto;
}

.box {
    bottom: 0; /* increase for footer use */
    left: 0;
    position: absolute;
    right: 0;
    top: 40px;
}

.full {
    width: 100%;
}

デモ: http://bootply.com/60614

于 2013-05-04T13:54:21.510 に答える
1

html も height:100% に設定します。

html,body { 
       height: 100%; 
       overflow: hidden; 
} 

.span4 {
        height: 100%;
        overflow: auto; 
}
.span8 { 
        height: 100%;
        overflow: auto; 
}

http://jsfiddle.net/VerCp/

于 2013-05-04T02:02:03.363 に答える
-1

JavaScript を使用してこれを解決する方法を見つけました。

 $(document).ready(function() {
      windowHeight = $(window).height();
      $('.span4').height(windowHeight);
      $('.span8').height(windowHeight);
  });

また、CSS では、span4 または span8 の高さを特定する必要はありません。JS は非常に強力で、来週から学習を開始します。

于 2013-05-04T16:07:37.443 に答える