Düzeni ile ilgili bir sorunum var - bu yalnızca yerel bir yerde çevrimiçi değil, ancak aşağıdaki kodu kopyalayıp bir html sayfasına yapıştırır ve yerel olarak çalıştırırsanız aynı sayfa yapıyorum.Sabit altbilgi ve gömülü Google Map ile% 100 yükseklik
Hemen hemen orada. Elde etmeye çalıştığım şey, kullanılabilir tüm dikey alanı kullanan kaydırma çubuğu içermeyen bir sayfa. Evet, kapsayıcı bildirimde "taşma: gizli" ayarlayabilir ve bu yardımcı olur, ancak tam olarak doğru değil. Aslında Google haritasının 1em sınırıyla çevrili olmasını istiyorum. 3 tarafa sahibim ama içerik divundaki% 100 yükseklik beyanı alt sınırı çarpıyor. Yüzde büyüklüğünde bir google map div'in sonuçlarını anlamıyorsanız, ebeveynin çalışması için bildirilen bir yüksekliğe sahip olması gerekir. Altbilgi mutlak ve akış dışında olduğu için, çalışmak için "alt" sınır yoktur ve düzen işe yaramamaktadır. İçerik div% 100 yükseklik temelde boyutunu büyüklüğü viewport'tan alıyor ve içerdiği div gibi görünüyor.
Bu beni delirtiyor ... sadece bunun nasıl yapılacağını anlayamıyorum ve gerçekten bazı girişleri takdir ediyorum. Burada
Başlangıç:
<!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>
Gerçekten zor ... Bir süre onunla uğraşmaya çalıştım. Sorunun kökü div # container {yükseklik:% 100} – Kasturi
olduğunu düşünüyorum Dört yıl sonra, bu [CSS flex box modelini] kullanarak daha kolay bir şekilde yapılır (http://stackoverflow.com/a/26558073/1269037). Diğer tüm çözümler aksaktır. –