7
Khi tôi cuộn xuống màu nền div vẫn không cập nhật được chiều cao 100% ở cuối trang. Xem ảnh chụp màn hình của tôi ở đây:
thấy đoạn mã sau vào JSFiddle example tôi:
Màu nền DIV không lấp đầy chiều cao 100% khi cuộn
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
width: 100%; height: 100%; margin: 0 auto;
background: orange; color: #000000;
font-family: "Century Gothic", "Apple Gothic", Verdana, sans-serif;
}
#container {
width: 800px; height: 100%;
position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto;
}
#page {
background: #FFFFFF;
padding: 1.1em;
position: absolute; top: 0; bottom: 0; left: 3px; right: 3px
}
</style>
</head>
<body>
<div id="container">
<div id="page">
<u>Page Title</u>
<br /><br /><br /><br />
<b>Content</b><br /><br /><br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
Lorem Ipsum<br /><br />Lorem Ipsum<br /><br />
</div>
</div>
</body>
</html>
Làm thế nào để nói với div #page căng background-color trắng của nó
thêm vào dưới cùng của trang khi tôi cuộn xuống?
@Srinivas Pai: "min-height: 100%;" và "vị trí: tương đối;" trong #page
sản xuất các thanh cuộn bên phải:
Bạn có thực sự cần sử dụng chiều cao: 100% không? Bạn có thể thử chiều cao tối thiểu: 100% thay thế không? – Jackson
@udgru kiểm tra fiddle cập nhật của tôi sẽ hoạt động. –