html – 具有固定页脚和嵌入式Google地图的100％高度

我有一个布局的问题 – 它不在任何地方,只是本地,但如果你将代码下面的代码复制并粘贴到一个html页面,并在本地运行,你会看到我做的相同的页面.

几乎在那里我想要实现的是没有滚动条的页面使用了所有可用的垂直空间.是的,我可以在容器声明上设置“overflow：hidden”,这有助于,但是这并不完全正确.我想要实际上有一个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>

解决方法

唉,我已经工作了请执行以下更改.

1)由于页脚已经流出,所以将它放在一起,然后放在它的后面.

2)更改div#内容的CSS如下

div#content{

border-right:1px solid #CCCCCC;
bottom:0;
float:left;
overflow:hidden;
padding-bottom:108px;
margin-top:148px;
position:absolute;
top:0;
width:70%;

}

注意：当您的页眉和页脚具有固定的高度时,填充顶部和填充底部将被固定.如果它们具有百分比值,这将失败！

3)更改div#容器的css

div#container{    
background:none repeat scroll 0 0 #FFFFFF;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
height:100%;
margin:0 auto;
min-height:100%;
overflow:hidden;
position:relative;
width:960px;
}

只有overflow：hidden被添加.

这是整个页面： –

<!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,serif; 
 margin:0 0 0.5em;
}

div#container {
background:none repeat scroll 0 0 #FFFFFF;
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
height:100%;
margin:0 auto;
min-height:100%;
overflow:hidden;
position:relative;
width:960px;

 /*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{

border-right:1px solid #CCCCCC;
bottom:0;
float:left;
overflow:hidden;
padding-bottom:108px;
margin-top:148px;
position:absolute;
top:0;
width:70%;

}
 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,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> 

        <div id="footer"> 
            <p>This footer is absolutely positioned</p> 
        </div> 
</div> 
</body>
</html>

html – 具有固定页脚和嵌入式Google地图的100％高度

解决方法

相关推荐