固定Div在顶部，Div填充底部的其余页面-CSS [英] Fixed Div On Top, Div that Fills Rest of Page on Bottom - CSS
本文介绍了固定Div在顶部，Div填充底部的其余页面-CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试获取一个布局，该布局具有没有滚动条，并且具有固定的标题div(高度150px)，然后在其下方的 div填充了页面的其余部分(将是Google地图).
I am trying to get a layout that has no scrollbars and has a fixed header div(height 150px) and then below that a div that fills the rest of the page (will be a google map).
地图向下延伸到视口底部下方，我得到一个滚动条.
The map extend down below the bottom of the view-port and I get a scrollbar.
我正在寻找纯CSS解决方案.
I am looking for a CSS only solution.
<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;
}
推荐答案
<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>
在需要的地方隐藏溢出.
Add overflow hidden where needed.
这篇关于固定Div在顶部，Div填充底部的其余页面-CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
