0

<div>ヘッダー、サイドバー、 Googleマップを含む3つの基本要素でページを作成しています。ヘッダーのサイズと全幅は固定されています。その下では、サイドバーが左側にあり、幅が固定されています。一方、マップは右側にあり、使用可能なすべての幅を満たすように拡張する必要があります。これは次のようになります。

+----------------------------------------------+
|                  header                      |
+-------------+--------------------------------+
|             |                                |
|             |                                |
|             |                                |
|   sidebar   |              map               |
|             |                                |
|             |                                |
|             |                                |
+-------------+--------------------------------+

これまでのところ、私のレイアウトはこの方法を使用して実現できます。問題は、マップとサイドバーの両方が利用可能なすべての垂直方向のスペースも占めるようにしたいということです。地図とサイドバーを完全に配置することでこれを機能させることができましたが、ページの背景グラデーションを設定できませんでし<body>た。ヘッダーと同じくらいの高さでした。サイドバーと地図はドキュメントの一部ではありませんでした。フロー。

<body>適度な高さを残しながら、この固定サイズと柔軟なオブジェクトの組み合わせを実現することは可能ですか？

4

2 に答える 2

1

必ず使用してください：

body, html {height:100%}
于 2012-12-06T15:39:52.407 に答える
1

もちろん！

フィドルをチェックしてください：http：//jsfiddle.net/FTD86/

このアプローチでは、固定サイズのヘッダーとサイドバーに絶対位置に配置されたアイテムと、コンテナー内のパディングを組み合わせて、これらの固定サイズのアイテムを考慮します。境界線に注意してください。これにより、これらが適切なサイズになっていることがわかります:)

HTML：

<div class="main">
    <header></header>
    <div class="content">
        <div class="sidebar">

        </div>
        <div class="map">     
        </div>
    </div>
</div>

CSS：

body, html{
    width:100%;
    height:100%;    
}

.main{
    width:100%;
    height:100%;
    box-sizing:border-box;
    padding-top:100px;
}

.main header{
    box-sizing:border-box;
    border:5px solid #ffff00;
    background:#333333;
    width:100%;
    height:100px;
    position:absolute;
    top:0;
    left:0;
}

.main .content{
    position:relative;
    background:#eeeeee;
    width:100%;
    height:100%;
    box-sizing:border-box;
    padding-left:150px;
}

.main .content .sidebar{
    box-sizing:border-box;
    border:5px solid #ff00ff;
    background:#336699;
    position:absolute;
    top:0;
    left:0;
    width:150px;
    height:100%;
}

.main .content .map{
    box-sizing:border-box;
    border:5px solid #ffffff;
    background:#ff0000;
    width:100%;
    height:100%;    
}
​

</ p>

于 2012-12-06T15:40:05.230 に答える