Tôi gặp sự cố với bố cục - không trực tuyến ở bất kỳ đâu, chỉ cục bộ, nhưng nếu bạn sao chép và dán mã bên dưới vào trang html và chạy cục bộ, bạn sẽ thấy cùng một trang tôi làm.100% chiều cao với chân trang cố định và Bản đồ Google được nhúng
Nó rất gần đó. Những gì tôi đang cố gắng đạt được là một trang không có thanh cuộn sử dụng hết tất cả không gian dọc sẵn có. Có, tôi có thể đặt "overflow: hidden" trên khai báo vùng chứa và điều đó có ích, nhưng nó không hoàn toàn đúng. Tôi muốn thực sự có bản đồ google được bao quanh với đường viền 1em. Tôi có điều này trên 3 mặt nhưng tuyên bố chiều cao 100% trên div nội dung treo biên giới phía dưới. Nếu bạn không nhận ra các tác động của div bản đồ có kích thước phần trăm, thì cha mẹ phải có chiều cao được khai báo để nó hoạt động. Vì chân trang là tuyệt đối và bên ngoài luồng, không có đường viền "dưới cùng" nào hoạt động và bố cục không hoạt động. Chiều cao nội dung div 100% về cơ bản dường như có kích thước của nó từ khung nhìn và không phải là div chứa.
Điều đó khiến tôi phát điên ... dường như không thể tìm ra cách để thực hiện điều này và tôi thực sự đánh giá cao một số đầu vào.
Bắt đầu ở đây:
<!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>
Thực sự khó khăn ... Tôi đã thử sử dụng nó một thời gian. Tôi nghĩ rằng gốc của vấn đề là div # container {height: 100%} – Kasturi
Bốn năm sau, điều này được thực hiện một cách dễ dàng hơn bằng cách sử dụng [CSS flex box model] (http://stackoverflow.com/a/26558073/1269037). Tất cả các giải pháp khác là clunky. –