Làm cho DIV lấp đầy phần còn lại của trang theo chiều dọc?

Question

Tôi có ứng dụng Google Maps chiếm hầu hết trang. Tuy nhiên, tôi cần đặt trước dải không gian trên cùng cho thanh trình đơn. Làm thế nào để div bản đồ tự động lấp đầy không gian dọc của nó? height: 100% không hoạt động vì thanh trên cùng sẽ đẩy bản đồ qua cuối trang.

+--------------------------------+ 
|  top bar (n units tall) | 
|================================| 
|   ^    | 
|    |     | 
|    div    | 
|  (100%-n units tall)  | 
|    |     | 
|    v     | 
+--------------------------------+ 

Answer 1

Bạn có thể sử dụng định vị tuyệt đối.

HTML

<div id="content"> 
    <div id="header"> 
     Header 
    </div> 
    This is where the content starts. 
</div> 

CSS

BODY 
{ 
    margin: 0; 
    padding: 0; 
} 
#content 
{ 
    border: 3px solid #971111; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background-color: #DDD; 
    padding-top: 85px; 
} 
#header 
{ 
    border: 2px solid #279895; 
    background-color: #FFF; 
    height: 75px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
} 

Bằng cách định vị #content hoàn toàn và quy định cụ thể phía trên, tính đúng, phía dưới, và bên trái, bạn sẽ có được một div chiếm toàn bộ khung nhìn .

Sau đó, bạn đặt padding-top trên #content thành> = chiều cao #header.

Cuối cùng, đặt #header bên trong #content và định vị nó hoàn toàn (chỉ định trên cùng, bên trái, bên phải và chiều cao).

Tôi không chắc chắn trình duyệt này thân thiện như thế nào. Kiểm tra this article at A List Apart để biết thêm thông tin.

Answer 2

umm, bạn cần phải thêm html, body { height: 100%; }, sau này, một yếu tố relative, với min-height: 100%

Sau đó, cho IE6

<!--[if lt IE 7]> 
<style media="screen" type="text/css"> 
    MyAutoheightElement 
    { 
     height: 100%; 
    } 
</style> 
<![endif]--> 

này sẽ cung cấp% chiều cao trang web của bạn 100 ở mọi trình duyệt.
Hãy dùng thử! Tôi hy vọng nó sẽ giúp :)

Answer 3

Cách để làm điều đó, rõ ràng, là sử dụng JavaScript để giám sát các onload và onresize sự kiện và lập trình thay đổi kích thước div điền như sau:

Sử dụng jQuery:

function resize() { 
    $("#bottom").height($(document).height() - $('#top').height()); 
} 

Sử dụng JavaScript đơn giản:

function resize() { 
    document.getElementById("bottom").style.height = (document.body.clientHeight - headerHeight) + "px"; 
} 

Edit: và sau đó buộc những thân đến window o bject.

Answer 4

Tôi khuyên bạn nên dùng thử plugin jquery-layout. Bạn sẽ thấy một loạt các bản demo và các ví dụ trên liên kết.

Tôi không biết liệu bạn có quen thuộc với các khái niệm về JQuery hoặc một số khung công cụ trợ giúp Javascript khác, như Prototype.js hoặc Mootools nhưng đó là một ý tưởng quan trọng để sử dụng một trong số chúng. Họ ẩn hầu hết các thủ thuật liên quan đến trình duyệt từ lập trình viên và họ có một số tiện ích mở rộng hữu ích cho giao diện người dùng, thao tác DOM, v.v.

Answer 5

Nếu bạn calculate the page position of the div element bạn có thể làm mà không biết các yếu tố tiêu đề:

function resize() { 
    var el = $("#bottom"); 
    el.height($(document).height() - el.offset().top); 
} 

Answer 6

var sizeFooter = function(){ 
    $(".webfooter").css("padding-bottom", "0px").css("padding-bottom", $(window).height() - $("body").height()) 
} 
$(window).resize(sizeFooter); 

Answer 7

sử dụng giải pháp khác không được thay CSS3 hơn javascript. Có một calc() chức năng hiện nay có thể được sử dụng để làm điều tương tự:

HTML

<div id="content"> 
    <div id="header"> 
     Header 
    </div> 
    <div id="bottom"> 
     Bottom 
    </div> 
</div> 

CSS3

#content { 
    height: 300px; 
    border-style: solid; 
    border-color: blue; 
    box-sizing: border-box; 
} 
#header { 
    background-color: red; 
    height: 30px; 
} 
#bottom { 
    height: calc(100% - 30px); 
    background-color: green; 
} 

Đây là jsfiddle

Bạn cũng có thể muốn xem xét sử dụng kiểu box-sizing: border-box cho int div erior vì điều này có thể loại bỏ các vấn đề của padding và border poking bên ngoài div cha.