0

I'm building a page with three basic elements: a header, a sidebar, and a <div> that will contain a Google map. The header has a fixed size and full width; below that, the sidebar is on the left and has a fixed width, while the map is on the right and should expand to fill all available width. It looks something like this:

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

So far, my layout could be accomplished using this method. The problem is that I want both the map and the sidebar to take up all available vertical space too. I managed to get this working by absolutely positioning the map and the sidebar, but then I couldn't set a background-gradient on the page because the <body> was only as tall as the header--the sidebar and map were not part of the document flow.

Is it possible to achieve this combination of fixed-size and flexible objects while leaving the <body> with a reasonable height?

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 回答