Cách tạo bố cục này bằng CSS?

Tôi không phải là người mới ở CSS, nhưng đây là vấn đề đối với tôi và tôi không thể giải quyết nó. Tôi cần phải xây dựng bố trí như sau:Cách tạo bố cục này bằng CSS?

Layout http://img121.imageshack.us/img121/2153/layoutsample.jpg

Divs mà là ở phía dưới và ở phía trên đã cố định độ cao. Một ở trung tâm phải được exacly trong chiều cao của PAGE HEIGHT - DIV 1 HEIGHT - DIV 3 HEIGHT hoặc trong một số trường hợp nhỏ hơn.

Ngoài ra nó phải có kích thước này được giải quyết bởi vì tôi dự đoán rằng đôi khi nội dung của nó sẽ lớn hơn và sau đó nó sẽ cần một thanh cuộn bên trong.

Tôi sẽ chấp nhận trường hợp khi DIV2 nhỏ hơn, nhưng không bao giờ quá lớn để vừa với kích thước trang bằng DIV1 và DIV3.

Bất kỳ giải pháp sẽ được tốt, không chỉ sử dụng CSS, nhưng nếu bạn có một ý tưởng bạn có thể ném một số Javascript quá ... Tôi sẽ biết ơn đối với bất kỳ giải pháp .. thậm chí không hoàn toàn đúng :)

Nguồn

2010-07-27 ŁukaszW.pl

tôi tin rằng bạn muốn một cái gì đó như thế này

<div id="header" style="position:absolute; top:0px; left:0px; height:200px;overflow:hidden;"> 
</div> 
<div id="content" style="position:absolute; top:200px; bottom:200px; left:0px; overflow:auto;"> 
</div> 
<div id="footer" style="position:absolute; bottom:0px; height:200px; left:0px; overflow:hidden;"> 
</div>

Nguồn

2010-07-27 14:49:19

Giải pháp tuyệt vời, cảm ơn ông John Hartsock ... –

Không sao cả. Tôi sử dụng bố cục này mọi lúc. Linh hoạt và dễ sử dụng. Không có javascript, chỉ thuần html và CSS. bạn cũng có thể sử dụng kỹ thuật tương tự để chia nội dung thành hai tạo menu điều hướng bên trái –

sử dụng jQuery để thiết lập chiều cao div2 về cửa sổ thay đổi kích thước:

var $div1 = $('#DIV1'), 
    $div2 = $('#DIV2'), 
    $div3 = $('#DIV3'), 
    $window = $(window); 

$window.resize(function() 
{ 
    $div2.height($window.height() - ($div1.height() + $div3.height())); 
});

là một lựa chọn tôi đã sử dụng.

Nguồn

2010-07-27 14:53:11

Aaaa .. một số giải pháp js, đẹp .. cảm ơn bạn đã trợ giúp ... –

này sẽ giúp bạn tập trung divs theo chiều dọc và chiều ngang

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

Nguồn

2010-07-27 14:53:11 Catfish

Liên kết rất tốt, cảm ơn .. Sẽ hữu ích ... –

Tôi không chắc chắn nếu tôi hiểu chính xác những gì bạn yêu cầu. Nhưng những gì về điều này.

<html> 
<head> 
<style> 
body { 
    margin : 0 
} 

#top { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100px; 
    border: solid 1px black 
} 
#middle 
{ 
    position: absolute; 
    top: 100px; 
    bottom: 100px; 
    left: 0; 
    width: 100%; 
    overflow: auto; 
    border: solid 1px green; 
} 

#bottom { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    height: 100px; 
    width: 100%; 
    border: solid 1px blue; 
} 

</style> 

</head> 
<body> 
    <div id="top"></div> 
    <div id="middle"></div> 
    <div id="bottom"></div> 
</body> 
</html>

Nguồn

2010-07-27 15:02:39 Jonnio

Cách tạo bố cục này bằng CSS?

Trả lời

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