css - 分割位置 - css

Question

cssを使用して、divが画像の例のように動作することを達成しようとしています:

これを行うためのきれいな方法はありますか？「左」の div の高さと「メイン」の div の幅と高さを計算するために JavaScript を使用してこれを実現します。しかし、私はこの解決策が好きではありません... cssのみを使用してこれを行う方法はありますか?

編集:ページにスクロールバーがあってはなりません...そのため、ページの高さは常に最大 100% であり、それ以上ではありません...

ありがとう

Answer 1

サイドバー (またはその他の div) が 100% の高さで、上部に 30px のヘッダーがある場合、コンテナは 100% + 30px の高さになります。

将来的には css3 calc(): http://hacks.mozilla.org/2010/06/css3-calc/で この問題が解決されます。

今overflow: hidden;のところ、htmlandbodyセクションに追加できますが、Javascript を使用してサイドバーの高さ (コンテナーの高さ - ヘッダーの高さ) を計算することをお勧めします。

ここでフィドルを確認してください

Answer 2

Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.

HTML:

<div id="header">

</div>
<div id="side">

</div>
<div id="content">

</div>

CSS:

#header {
    width:100%;
    height:50px;
}
#side {
    width:300px;
    height:100%;
    float:left;
}
#content {
    width:660px;
    height:100%;
    float:left;
}

jsFiddle

Answer 3

2 列のレイアウトを意味する場合は、次のように純粋な CSS で行います。

.container {
  background-color: #aaaaaa;
}

.left {
    float: left;
    width: 100px;
    clear: left;
}

.right {
    margin-left: 100px;
    background-color: #888888;
}

および HTML:

<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>

ライブデモ: jsFiddle

on top は、div特別な CSS なしで実現できます。下に何か (フッターなど) を配置するには、 を使用する必要がありますclear: both。