21

次のような Web ページを作成したいと考えています。

|----------------------------|
|            header          |
|----------------------------|
|  L  |                      |
|  e  |                      |
|  f  |                      |
|  t  |                      |
|     |                      |
|  S  |   Content Area       |
|  i  |                      |
|  d  |                      |
|  e  |                      |
|  b  |                      |
|  a  |                      |
|  r  |                      |
|----------------------------|

ヘッダーの高さは固定ですが、幅は動的にする必要があります。左側のサイドバーの幅は固定で、高さは動的にする必要があります。コンテンツ領域では、高さと幅の両方が動的です。ユーザーがブラウザを拡大縮小しても、スクロール バーは表示されません (overflow:hidden; を設定して非表示にしないでください)。

私は次のようなコードを書いてみました：

<div class="top">
    TOP
</div>
<div class="left">
    LEFT
</div>
<div class="main">
    MAIN
</div>

CSSで：

.top {
    width: 100%;
    height: 92px;
}
.left {
    width: 178px;
    height: 100%;
    float:left;
}
.main {
    float: left;
    height: 100%;
    width: 100%;
 }

しかし、それは失敗しました。

編集：コンテンツエリアと左サイドバーはブラウザウィンドウ全体を埋める必要があります.....私は必要ありません

|----------------------------|
|            header          |
|----------------------------|
|  L  |                      |
|  e  |                      |
|  f  |                      |
|  t  |                      |
|     |                      |
|  S  |   Content Area       |
|  i  |                      |
|  d  |----------------------|
|  e  |
|  b  |
|  a  |
|  r  |
|-----|
4

7 に答える 7

28

jsFiddle の例

.top {
    position:absolute;
    left:0; right:0;
    height: 92px;
}
.left {
    position:absolute;
    left:0; top:92px; bottom: 0;
    width: 178px;
}
.main {
    position: absolute;
    left:178px; top:92px; right:0; bottom:0;
}
于 2012-11-02T05:54:38.787 に答える
6

これがあなたのための簡単なコードです。CSSこれを試して、高品質のコーディングを知ってください。

HTML:

<div class="main">
<div class="top">TOP</div>
<div class="left">LEFT</div>
<div class="right">MAIN</div>
<div class="clear"></div>
</div>

CSS:

.clear{
clear:both;
} 
.main{
width:500px;
}
.top {
background: blue;
width:500px;
height: 92px;
}
.left {
float:left;
width: 150px;
background: red;
}
.right{
float:right;
width:350px;
background: yellow;
}
于 2012-11-02T09:34:08.450 に答える
2

ライブデモ

こんにちは、あなたはこのように簡単にできます

CSS

.top {
    height: 92px;
}
.left {
    width: 178px;
    float:left;
}
.main {
  margin-left:178px;
 }

HTML

<div class="top">
    TOP
</div>
<div class="left">
    LEFT
</div>
<div class="main">
N content here MAIN content here MAIN content here </div>

ライブデモ

------------

更新されたデモ

于 2012-11-02T05:16:59.717 に答える
1

"float: left;"定義から削除する必要があります.main。

また、ポジショニングをデバッグする場合、これは本当に役立ちます。

div {
    border: 1px solid #000;
}

height: 100%また、垂直スクロールバーを防ぐために、.leftと.mainからドロップする価値があるかもしれません

于 2012-11-02T05:11:33.190 に答える
1

デモ： http： //jsfiddle.net/nRQeA/

.top {
    width: 100%;
    height: 92px;

}
.left {
    width: 20%;
    height: 100%;
    float:left;
}
.main {
    float: left;
    height: 100%;
    width: 80%

 }
于 2012-11-02T05:11:34.523 に答える