100％高度固定页脚和嵌入式谷歌地图

时间：2010-05-12 18:18:48

标签： html css

我的布局有问题 - 它不是在线的，只是本地的，但如果您将下面的代码复制并粘贴到html页面并在本地运行，您将看到我所在的页面。

它几乎就在那里。我想要实现的是一个没有滚动条占用所有可用垂直空间的页面。是的，我可以在容器声明中设置“overflow：hidden”，这有帮助，但这不太对。我想让谷歌地图周围有1em边框。我有三面，但内容div上的100％高度声明崩溃底部边框。如果您没有意识到百分比大小的谷歌地图div的影响，那么父母HAS要声明其工作的高度。由于页脚是绝对的并且在流程之外，因此没有“底部”边界可以工作，并且布局不起作用。内容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>

2 个答案:

答案 0 :(得分：17)

唉，我已经开始工作了。做以下更改。

1）由于页脚不在流程中，因此请将其中的内容添加到内容中并将其放在其后面。

2）更改div＃content的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＃container

的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;
}

仅添加溢出：隐藏。

以下是整个页面： - 

<!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 {
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, 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> 

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

答案 1 :(得分：5)

@Katsuri，感谢您的解决方案，它的效果非常好！

但是对于其他想要左侧固定大小的列和 Gmap div填充整个右侧空间的人来说，这是我从Katsuri修改的代码：

直播示例：http://jsfiddle.net/EZbfN/ 源代码：

<!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 */
}
div#container {
    height:100%;
    width:100%;
    /*height:auto !important;  real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
    margin:0 auto;
    min-height:100%;
    overflow:hidden;
    position:relative;
}
div#header {
    height:50px;
    position:relative;
}
div#leftCol {
    left:0;
    bottom:0;
    top:0;
    overflow:hidden;
    padding-bottom:35px;
    margin-top:55px;
    position:absolute;
    width:300px;
}
div#content {
    right:0;
    bottom:0;
    top:0;
    left: 300px;
    overflow:hidden;
    padding-bottom:35px;
    margin-top:55px;
    position:absolute;
}
div#footer {
    position:absolute;
    clear:both;
    width:100%;
    height:20px;
    bottom:0; /* stick to bottom */
    background:#fff;
    border-top:1px solid #ccc;
}
.paddedContent {
    height:100%;
    margin: 5px;
    border: solid 1px red;
}
</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="leftCol">
    <div class="paddedContent">This is the left column</div>
  </div>
  <div id="content">
    <div class="paddedContent">
      <div id="map_canvas" style="width: 100%; height: 100%;"></div>
    </div>
  </div>
  <div id="footer">
This footer is absolutely positioned
  </div>
</div>
</body>
</html>

享受！

相关问题
最新问题