Child Div没有垂直拉伸以适应浏览器窗口的内容

我有一个网站，上面有一个谷歌地图画布。它有一个页眉、一个页脚和两侧的侧板，一个容器div和一个地图画布div。

容器div包含侧面板和地图画布div。我的问题是，我无法将容器div及其包含的所有div垂直扩展到浏览器窗口的内容。

HTML

<!DOCTYPE html>
<html>
    <head>   
        <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    </head>
    <body>
        <header id="header"></header>
            <div id="container" >
                <div id="panel"></div>
                <div id="panel2"></div>
                <div id="map-canvas"></div>
            </div>
        <footer id="footer"></footer>
    </body>
</html>

CSS

#container{ height: 100% auto;min-height:500px; width:100% auto;z-index:2;overflow:auto;}
#map-canvas { width:100% auto; height: 100% auto; min-height:500px; margin: 0px; z-index:3;padding: 0px; font-family: NotoSans, Helvetica, Arial; }
#panel   { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:left; }
#panel2  { background-color: #F0F0F0 ; height:100% auto;width:200px; z-index:3;min-height:500px; float:right; }
#header { background-color: #F0F0F0 ; width:100%; min-width:1000px; z-index:3;height:100px;}
#footer { background-color: #F0F0F0 ; width:100%; z-index:4;min-width:1000px;height:100px;}
html, body{ height:100%;width:100%; margin: 0px; z-index:2;padding: 10px; font-family: NotoSans, Helvetica, Arial; }

我不确定你想要什么，但我认为这应该很好。

但请确保您还设置了宽度和高度的媒体查询，以使页面在较小屏幕（如手机）上访问时保持响应。

<!DOCTYPE html>
<html>
<head>   
    <style>
        #wrapper {
            position: fixed;
            left: 0; right: 0; top: 0; bottom: 0;
        }
        #header, #footer {
            position: absolute;
            width: 100%;
            height: 100px;
            background-color: #F0F0F0;
        }
        #header {top: 0;}
        #footer {bottom: 0;}
        #container {
            position: absolute;
            top: 100px;
            bottom: 100px;
            width: 100%;
            overflow: auto;
        }
        #panel, #panel2 {
            background-color: #CCC;
            width: 200px;
            min-height: 500px;
            float: left;
       }
       #panel2 {
            float: right;
       }
       #map-canvas {
            min-height: 500px;
            overflow: auto;
       }
    </style>
</head>
<body>
    <div id="wrapper">
        <header id="header"></header>
        <div id="container" >
            <div id="panel"></div>
            <div id="panel2"></div>
            <div id="map-canvas"></div>
            <div style="clear:both"></div>
        </div>
        <footer id="footer"></footer>
    </div>
</body>
</html>

相关内容

最新更新

热门标签：