【发布时间】：2013-05-01 00:13:30
【问题描述】：
我的布局有问题 - 它不在任何地方在线，只是在本地，但如果您将以下代码复制并粘贴到 html 页面并在本地运行，您将看到与我相同的页面。
就快到了。我想要实现的是一个没有滚动条的页面会占用所有可用的垂直空间。是的，我可以在容器声明上设置“溢出：隐藏”，这会有所帮助，但这并不完全正确。我实际上想让谷歌地图被 1em 边框包围。我有 3 个侧面，但内容 div 上的 100% 高度声明使底部边框崩溃。如果您没有意识到百分比大小的谷歌地图 div 的含义，那么父级必须声明一个高度才能使其工作。由于页脚是绝对的并且在流程之外，因此没有“底部”边框可以使用，并且布局不起作用。内容 div 100% 高度基本上似乎从视口而不是包含 div 中获取其大小。
这让我发疯了......似乎无法解决如何做到这一点，我真的很感激一些意见。
从这里开始：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Google map test</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:fff;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
div#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:960px;
background:#fff;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
/*height:auto !important; real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
div#header {
border-bottom:1px solid #ccc;
border-left:1em solid #ccc;
height:108px;
position:relative;
}
div#header h1
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#header2
{
border-bottom:1px solid #ccc;
border-left:1em solid #999;
height: 40px;
position: relative;
}
div#header2 p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal
{
border-bottom:1px solid #ccc;
border-left:1em solid #cc3300;
height: 40px;
position: relative;
}
div#headerInternal p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#headerInternal2
{
height: 40px;
position: relative;
}
div#headerInternal2 p
{
position:absolute;
bottom: 0;
left:0.5em;
}
div#rightCol
{
float:right;
width:29%;
padding-bottom:5em; /* bottom padding for footer */
}
div#content
{
float:left;
width:70%;
height:100%; /* fill that hole! */
border-right:1px solid #ccc;
}
div#content p {
}
div#footer {
position:absolute;
clear:both;
width:100%;
height:40px;
bottom:0; /* stick to bottom */
background:#fff;
border-top:1px solid #ccc;
}
div#footer p {
padding:1em;
margin:0;
}
.paddedContent
{
height:100%;
margin: 1em;
}
</style>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.397, 1.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="container">
<div id="header">
<h1>Title here...</h1>
</div>
<div id="header2">
<p>Secondary menu...</p>
</div>
<div id="rightCol">
<div id="headerInternal2">
<p>Right Header</p>
</div>
<p class="paddedContent">This is the right column</p>
</div>
<div id="content">
<div id="headerInternal">
<p>Page Context Menu</p>
</div>
<div class="paddedContent">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
<div id="footer">
<p>This footer is absolutely positioned</p>
</div>
</div>
</div>
</body>
</html>
【问题讨论】：
-
真的很棘手......我试着摆弄它一段时间。我认为问题的根源是 div#container{height:100%}
-
四年后，使用CSS flex box model 更容易做到这一点。所有其他解决方案都很笨拙。