trong một thời gian dài tôi đang loay hoay xung quanh với một vấn đề bố cục cụ thể mà tôi rõ ràng đang tiếp cận sai hướng.Tràn với bố cục bố cục tuyệt đối/tương đối
Dưới đây là cách tiếp cận chia nhỏ các thành phần cơ bản của nó:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="stretched">
<div class="header">SOME HEADER</div>
<div class="someControls">
<input type="button" value="click me"/>
<input type="button" value="no me"/>
</div>
<div class="inner">
some text...
</div>
</div>
</body>
</html>
với css sau:
.stretched {
position:absolute;
height:auto;
bottom: 0;
top: 0;
left: 0;
right: 0;
width: 250px;
margin: 30px auto 20px;
background-color: green;
}
.inner {
margin:10px;
background-color: red;
overflow: auto;
}
Những gì tôi đang cố gắng để làm là có stretched div sử dụng tất cả có sẵn không gian khung nhìn dọc (trừ một vài điểm ảnh trên và dưới cho đầu trang và chân trang) và được căn giữa theo chiều ngang với một cố định với.
Điều này dường như hoạt động khá tốt. Vấn đề là thuộc tính overflow: auto; không được áp dụng cho nội dung inner như tôi muốn. Khi some text... lâu hơn, các inner div chồng chéo vùng chứa của tôi và không hiển thị thanh cuộn.
Đây là Fiddle: fiddle #1
Tôi muốn tránh việc thanh cuộn trên cơ thể trang và thay vào đó có tràn bởi cuộn quản lý bên trong inner div, do đó làm cho stretched luôn hoàn toàn có thể nhìn thấy.
tôi có thể áp dụng các thủ thuật tương tự với position: absolute; top: 0; ... đến inner div là tốt, nhưng sau đó tôi phải xác định chiều cao của header + someControls một cách rõ ràng, mà tôi muốn tránh, bởi vì nó là khác nhau trên tất cả các trang của tôi.
Đây là cách nó hoạt động như tôi muốn nó (trừ phần top: 40px;): fiddle #2
Tôi đang làm gì sai ở đây? Cảm ơn trước!
+1 cho câu hỏi được cấu trúc tốt và tự thử. – MarioDS
Yêu cầu hỗ trợ IE7 phải không? – thirtydot
Không nhất thiết. Tuy nhiên, sẽ tốt đẹp. – FlxMgdnz