Ich habe ein Problem mit einem Layout - es ist nirgendwo online, nur lokal, aber wenn Sie den Code unten in eine HTML-Seite kopieren und lokal ausführen, sehen Sie die Ich mache die gleiche Seite.100% Höhe mit fester Fußzeile und eingebettetem Google Map
Es ist fast da. Was ich versuche, ist eine Seite ohne Scrollbalken, die den gesamten verfügbaren vertikalen Platz ausnutzt. Ja, ich kann "overflow: hidden" auf der Container-Deklaration setzen und das hilft, aber es ist nicht ganz richtig. Ich möchte eigentlich die Google Map mit einem 1em Rand umgeben haben. Ich habe dies auf 3 Seiten, aber die 100% ige Deklaration auf dem Inhalt div stürzt den unteren Rand ab. Wenn Sie die Implikationen eines google map div mit einer prozentualen Größe nicht erkennen, muss der Elternteil eine Höhe deklariert haben, damit er funktioniert. Da die Fußzeile absolut und außerhalb des Flusses ist, gibt es keine "untere" Grenze, an der gearbeitet werden kann, und das Layout funktioniert einfach nicht. Der Inhalt div 100% height scheint im Grunde genommen seine Größe aus dem Viewport und nicht dem enthaltenden div zu beziehen.
Es macht mich verrückt ... kann einfach nicht herausfinden, wie dies zu tun ist, und ich würde wirklich etwas Input schätzen.
starten hier:
<!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>
Wirklich tricky ... Ich habe versucht, es für eine Weile zu tun. Ich denke, der Grund des Problems ist div # container {height: 100%} – Kasturi
Vier Jahre später ist dies mit dem [CSS flex box model] (http://stackoverflow.com/a/26558073/1269037) viel einfacher). Alle anderen Lösungen sind klobig. –