html - 100% 高度，固定页脚和嵌入式 Google map

标签 html css

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

就快到了。我想要实现的是一个没有滚动条的页面，用完了所有可用的垂直空间。是的，我可以在容器声明中设置“overflow:hidden”，这有帮助，但不太正确。我实际上想让谷歌地图被 1em 边框包围。我在 3 个侧面都有这个，但是内容 div 上的 100% 高度声明使底部边框崩溃。如果您没有意识到百分比大小的 google map div 的含义，那么父级必须声明一个高度才能工作。由于页脚是绝对的并且在流程之外，因此没有“底部”边框可供使用，布局也不起作用。内容 div 100% 高度基本上似乎是从视口(viewport)而不是包含的 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) 由于页脚不在流程中，将其移出 div#content 并放在其后。

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

只添加了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,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>

关于html - 100% 高度，固定页脚和嵌入式 Google map ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2821596/

上一篇：javascript - 在任何浏览器中从 &lt;script&gt; 标签中删除类型会中断吗？

下一篇：c# - 如何在 ASP.NET 网站上显示硬盘文件夹中的图像列表？

相关文章：

html - 增加浏览器的默认字体大小是如何工作的？

html - CSS:如何相对于背景固定/修复元素？

php - 对查询字符串条件进行排序的正确方法

javascript - javascript 的日期格式

javascript - execCommand h1 样式仅选定文本

javascript - 我想在提交后立即禁用提交按钮

javascript - 使用 JavaScript 将样式表附加到 html 文档的头部

javascript - CSS 计算中的数学是否比 JS 中的数学更快？

html - 我很难为我的 body 命名

jquery - 追加克隆的 div，删除一类 div

©2024 IT工具网  联系我们