1. Trang chủ
  2. Câu hỏi và trả lời
  3. làm cho khoảng div theo chiều dọc tất cả chiều cao có sẵn

làm cho khoảng div theo chiều dọc tất cả chiều cao có sẵn

2012-01-05 28 views

Trả lời

5

Bạn nên có một div có chứa cả hai yếu tố và là clearfixed

<div class="wrapper clearfix"> 
    <div class="red"></div> 
    <div class="green"></div> 
</div>

Sau đó bạn thêm vị trí tương đối so với wrapper:

.wrapper { 
    /* remember this is clearfixed */ 
    position: relative; 
}

Bạn hãy để phao chứa màu xanh lá cây bên phải:

.green { 
    float: right; 
    width: 50%; 
}

Sau đó, bạn xác định vị trí tuyệt đối đỏ và để cho nó biết rằng nó phải sử dụng tất cả các không gian của wrapper:

.red { 
    position: absolute; 
    left: 0; 
    width: 50%; 
    top: 0; 
    bottom: 0; 
}

Lưu ý rằng trường hợp này sẽ chỉ làm việc khi container màu xanh lá cây là lớn hơn so với một trái.

Nguồn

2012-01-05 09:35:20 Duopixel

0

Đó là vấn đề - bởi vì để làm cho chiều cao giống nhau, bạn cần phải thêm div giữa tài liệu và div màu xanh lá cây và màu xanh lá cây, div này phải có chiều cao được xác định, vì vậy bạn có thể thiết lập chiều cao cho cả hai div-s bên trong đến 100% ví dụ.

<div style="height: [must be defined]"> 
    <div id="red" style="height: 100%; ..."> ... </div> 
    <div id="green" style="height: 100%; ..."> ... </div> 
</div> 
<div id="black" style="height: 100%; ..."> ... </div>

NHƯNG - điều này sẽ phá vỡ, khi một trong những divs sẽ cao hơn khác - sửa chữa nó bằng cách sử dụng tràn

PS. Đối với một số trường hợp, nó là tốt để sử dụng bảng ở đây, vì các tế bào bảng có luôn cùng chiều cao

Nguồn

2012-01-05 09:33:37 SergeS

0

Bạn có thể sử dụng bảng làm trình bao bọc. Tr đầu tiên và cuối cùng là tùy chọn. Nhưng nếu bạn cần tr đầu tiên hoặc cuối cùng để thiết lập chiều cao. trình duyệt cần điều này để tính toán chiều cao chính xác cho tr trung bình.

<!DOCTYPE HTML> 
<html> 
<head> 
    <title></title> 
</head> 
<style type="text/css"> 
    html, body {height:100%; padding:0; margin:0;} 
    #wrapper {height:100%;width:100%;border-collapse:collapse;} 
    #wrapper td {vertical-align:top;} 
    #wrapperFirst, #wrapperLast {height:1px;} 
</style> 
<body> 
    <table id="wrapper"> 
     <tr><td id="wrapperFirst" style="background-color: #ff44ff;">foo top</td></tr> 
     <tr><td style="background-color: #ffff44;">text</td></tr> 
     <tr><td id="wrapperLast" style="background-color: #44ffff;">foo bottom</td></tr> 
    </table> 

</body> 
</html>

Nguồn

2013-06-12 08:41:55 Uwe

Các vấn đề liên quan

 Các vấn đề liên quan