8

次の例のように、固定された左の列と流動的な右の 2 列のレイアウトを構築しようとしています。どちらも 100% の高さです。

ここに画像の説明を入力

私は非常に多くのバリエーションを試しましたが、今何を試したか思い出せず、正しく表示することができません。LayoutGalaなどの Web サイトも調べてみましたが、両方の列の高さが 100% の例はありません。

何を試したかは覚えていませんが、間違いなくこれが最後の試みでした。アパートの 4 階からコンピューターのモニターを投げつけて逮捕される前に、これが最後にアクセスした Web ページだったので、私はこれを知っています。

body { margin:0; padding:0; }
.left-column { position:absolute; top:0; width:235px; height:100%; background:#090909; }
.right-column { margin-left:235px; background:yellow; height:100%; width:100%; }


<div class="page-wrapper">
    <div class="left-column"></div>
    <div class="right-columnr">
        sd
    </div>
</div>

これが結果です。

マイフィドル

私は 960 幅の中央の Web サイトに慣れすぎているため、フルスクリーンの流動的なレイアウトになると完全に打ちのめされました。どんな助けでも大歓迎です。

4

2 に答える 2

3

IF 本当に列の高さを 100% にしたい場合は、高さ 100%bodyをhtml要素に設定する必要があります。

これは機能します：

html {height: 100%}
body {height: 100%}
.page-wrapper {height: 100%} /* This element is redundant unless You know You will need it in future for something */
.left-column {float: left; width: 235px; height: 100%}
.right-column {overflow: hidden; height: 100%}

編集：

あなたのコードに基づくデモ: http://jsfiddle.net/YL8Eh/

于 2013-08-24T22:10:04.673 に答える