मुझे लेआउट के साथ कोई समस्या है - यह कहीं भी ऑनलाइन नहीं है, केवल स्थानीय है, लेकिन यदि आप नीचे दिए गए कोड को एक HTML पृष्ठ में कॉपी और पेस्ट करते हैं और इसे स्थानीय रूप से चलाते हैं तो आप देखेंगे एक ही पृष्ठ मैं करता हूँ।फिक्स्ड फ़ूटर और एम्बेडेड Google मानचित्र के साथ 100% ऊंचाई
यह लगभग बहुत करीब है। जो मैं प्राप्त करने की कोशिश कर रहा हूं वह एक पृष्ठ है जिसमें सभी उपलब्ध ऊर्ध्वाधर स्थान का उपयोग करके कोई स्क्रॉलबार नहीं है। हां, मैं कंटेनर घोषणा पर "ओवरफ्लो: छुपा" सेट कर सकता हूं और इससे मदद मिलती है, लेकिन यह बिल्कुल सही नहीं है। मैं वास्तव में 1em सीमा से घिरा हुआ Google मानचित्र चाहता हूं। मेरे पास यह 3 पक्षों पर है लेकिन सामग्री div पर 100% ऊंचाई घोषणा नीचे सीमा को दुर्घटनाग्रस्त कर देती है। यदि आप प्रतिशत आकार के Google मानचित्र div के प्रभावों का एहसास नहीं करते हैं, तो माता-पिता को काम करने के लिए घोषित ऊंचाई की आवश्यकता होती है। चूंकि पाद लेख पूर्ण और प्रवाह के बाहर है, वहां काम करने के लिए कोई "नीचे" सीमा नहीं है और लेआउट बस काम नहीं करता है। प्रतीत होता है कि सामग्री div 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>
वास्तव में मुश्किल ... मैंने कुछ समय के लिए इसके साथ झगड़ा करने की कोशिश की। मुझे लगता है कि समस्या की जड़ div # कंटेनर {ऊंचाई: 100%} – Kasturi
चार साल बाद, यह [सीएसएस फ्लेक्स बॉक्स मॉडल] (http://stackoverflow.com/a/26558073/1269037 का उपयोग करके अधिक आसानी से किया जाता है)। अन्य सभी समाधान घबराए हुए हैं। –