Высота 100% с фиксированным нижним колонтитулом и встроенная карта Google
У меня проблема с макетом - она не в Интернете нигде, только локальная, но если вы скопируете и вставьте код ниже в html-страницу и запустите ее локально, вы увидите ту же страницу, что и я.
Это очень близко. То, что я пытаюсь достичь, - это страница без полос прокрутки, использующих все доступные вертикальные пространства. Да, я могу установить "переполнение: скрытый" в декларации контейнера, и это помогает, но это не совсем правильно. Я хочу на самом деле иметь карту google, окруженную рамкой 1em. У меня есть это с 3-х сторон, но объявление 100% высоты в содержимом div сбрасывает нижнюю границу. Если вы не понимаете значения размера div в google-карте в процентах, то родитель должен иметь высоту, объявленную для ее работы. Поскольку нижний колонтитул является абсолютным и вне потока, нет "нижней" границы для работы, и макет просто не работает. Высота контента на уровне 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
Увы, у меня это работает. выполните следующие изменения.
1) Поскольку нижний колонтитул выходит из потока, принесите его содержимое div # и верните его после него.
2) измените css содержимого div # следующим образом
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) Измените css контейнера div #
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>
Ответ 2
@Katsuri, Спасибо за ваше решение, он отлично работает!
Но для других, кто хочет иметь левый фиксированный столбец и Gmap div, заполняющий все свободное пространство, вот мой код, измененный от Katsuri's:
живой пример: 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>
Наслаждайтесь!
