Mở rộng div theo chiều dọc

Tôi có vấn đề đơn giản với divs. Tôi muốn tạo một div lớn ("container") bao gồm toàn bộ màn hình và đưa vào đó hai div khác ("A" và "B"). "A" có chiều cao 200px và tôi muốn "B" che khoảng trống còn lại như hình bên trái. Dưới đây tôi dán mã của tôi nhưng nó không hoạt động chính xác, bởi vì "B" cũng nằm ngoài "vùng chứa" như hình bên phải. Có ai biết làm thế nào mở rộng "B" để trang trải không gian còn lại trong "container" như trên hình ảnh bên trái? Tôi sẽ biết ơn câu trả lời.Mở rộng div theo chiều dọc

What I want to get Result produced by my code

index.html

<html> 
<head> 
<link rel=stylesheet href="style.css" type="text/css" media=screen> 
</head> 
<body> 
<div id="container"> 
    <div id="A">text</div> 
    <div id="B">text</div> 
</div> 
</body> 
</html>

style.css

#container { 
    border-color: blue; 
    width: 100%; 
    height: 100%; 
} 

#A { 
    border-color: green; 
    height: 200px; 
    min-height: 200px; 
    max-height: 200px; 
} 

#B { 
    border-color: red; 
    height: 100%; 
    overflow: hidden; 
} 

#A, #B, #container { 
    border-style: solid; 
    border-size: 1px; 
}

Nguồn

2012-11-05 mchrobok

http://jsfiddle.net/S27an/ đây ran của nó rất tốt đẹp, những gì vấn đề là thế này.? – Selvamani

Bạn có thể sử dụng 'Absolu mâu thuẫn te vị' kỹ thuật như thế này:

http://jsfiddle.net/TjArZ/

#container { 
    border-color: blue; 
    width: 100%; 
    position:absolute; 
    top:0; 
    bottom:0; 
} 

#A { 
    border-color: green; 
    height: 200px; 
} 

#B { 
    border-color: red; 
    position:absolute; 
    top:204px; 
    bottom:0; 
    left:0; 
    right:0; 
} 

#A, #B, #container { 
    border-style: solid; 
    border-width: 4px; 
}

Ý tưởng cơ bản là các divs được kéo dài đến tọa độ bạn chỉ định. Bối cảnh here on ALA.

Nguồn

2012-11-05 14:09:32

Hãy thử:

#A { 
    border-color: green; 
    height: 200px; 
    position:relative; 
    top:0;left:0; 
} 

#B { 
    border-color: red; 
    overflow: hidden; 
    position:relative; 
    top:200px;left:0;bottom:0; 
}

Nguồn

2012-11-05 14:06:38

Bạn có thể thử này:

#container { 
border-color: blue; 
width: 100%; 
height: auto !important; 
height: 100%; 
} 

#A { 
border-color: green; 
height: 200px; 
min-height: 200px; 
max-height: 200px; 
} 

#B { 
border-color: red; 
height: 100%; 

} 

#A, #B, #container { 
border-style: solid; 
border-size: 1px; 
}

Nguồn

2012-11-05 14:10:21

Mở rộng div theo chiều dọc

Trả lời

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