css - 固定Div在上面，Div填充底部的其余页面 - CSS - Thinbug

固定Div在上面，Div填充底部的其余页面 - CSS

时间：2010-12-15 18:01:33

标签： css layout

我正在尝试获得一个没有滚动条并且固定标题div（高度为150px）的布局，然后在 div下面填充页面的其余部分（将是谷歌地图）。

问题

地图向下延伸到视口左下方，我得到一个滚动条。

我正在寻找一种仅限CSS的解决方案。

HTML

<div id="container">
    <div id="header"></div>
    <div id="map"></div>
</div>

CSS

#container
{
    position:relative;
    height:100%;
    min-height:100%;
    width:100%;
    margin:0;
    padding:0;
}
#map
{
    position:absolute;
    top:150px;
    width:100%;
    height:100%;
    background-color:#bb3311;
}
#header
{
    height:150px;
    position:absolute;
    width:100%;
    background-color:#00ffbb;
}

1 个答案:

答案 0 :(得分：4)

<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
#container{
    position: relative;
    height: 100%;
    width: 100%;
    background: yellow;
}

#map {
    position: absolute;
    top: 150px;
    bottom: 0;
    left: 0;
    right: 0;
    background: red;
    overflow: hidden;
}

#header {
    height: 150px;
    background: green;
}
</style>
</head>
<body>
<div id="container">
    <div id="header"></div>
    <div id="map"></div>
</div>
</body>
</html>

在需要的地方添加隐藏溢出。