-1

CSS を使用して全高の列を作成しようとしていますが、悪夢に見舞われています。

これを管理できる唯一の方法は、縦に繰り返される body タグに背景画像を適用することですが、これの欠点は、列幅にパーセンテージを使用できないことです。

私の問題を実証する最も簡単な方法は、JSFiddle に投稿して、ここにいる誰かが助けてくれるかどうかを確認することだと思いました。

http://jsfiddle.net/smclintock/xZw6n/

html, body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

.sidebar {
    background-color: black;
    color: white;
    float: left;
    width: 20%;
    min-height: 100%;
}

.canvas {
    background-color: grey;
    width: 80%;
    float: right;
}

ありがとう、

スティーブン。

4

2 に答える 2

4

正直なところ、これにはまだ本当に良い解決策はありませんが、table-cell css プロパティを使用できます。万人に好まれるわけではありませんが、ブラウザのサポートが充実しており、機能します。

http://jsfiddle.net/VR9Bg/

.sidebar {
    background-color: black;
    color: white;
    width: 20%;
    height: 100%;
    display: table-cell;
}

.canvas {
    background-color: grey;
    width: 80%;
    height: 100%;
    display: table-cell;
}

.wrapper {
    display: table;
}
于 2013-06-28T09:25:12.727 に答える
-1

質問を参照して（覚えていません）、

パーセンテージ

高さのパーセンテージを指定します。パーセンテージは、生成されたボックスの包含ブロックの高さに関して計算されます。包含ブロックの高さが明示的に指定されておらず (つまり、コンテンツの高さに依存する)、この要素が絶対配置されていない場合、値は「auto」と計算されます。

したがって、jQuery を使用するのが適切なオプションになります。

var hei = $('.canvas').height();
 $('.sidebar').height(hei);

このJSFiddleを確認してください

于 2013-06-28T09:18:26.743 に答える