Câu trả lời:
Mẹo cho điều này là chỉ định 100% chiều cao trên các phần tử html và body. Một số trình duyệt tìm đến các phần tử mẹ (html, body) để tính chiều cao.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}quên tất cả các câu trả lời, dòng CSS này đã làm việc cho tôi trong 2 giây:
height:100vh;1vh = 1% chiều cao màn hình trình duyệt
Để chia tỷ lệ bố cục đáp ứng, bạn có thể muốn sử dụng:
min-height: 100vh[cập nhật tháng 11 năm 2018] Như đã đề cập trong phần nhận xét, việc sử dụng chiều cao tối thiểu có thể tránh gặp vấn đề về thiết kế phản hồi tốt
[cập nhật tháng 4 năm 2018] Như đã đề cập trong phần nhận xét, vào năm 2011 khi câu hỏi được đặt ra, không phải tất cả các trình duyệt đều hỗ trợ đơn vị khung nhìn. Các câu trả lời khác là các giải pháp hồi đó - vmaxvẫn chưa được hỗ trợ trong IE, vì vậy đây có thể không phải là giải pháp tốt nhất cho tất cả.
min-height: 100vhsẽ tốt hơn rất nhiều. Nó cũng sẽ mở rộng quy mô cho các thiết kế đáp ứng.
Trên thực tế, cách tiếp cận tốt nhất là:
html {
height:100%;
}
body {
min-height:100%;
}Điều này giải quyết mọi thứ cho tôi và nó giúp tôi kiểm soát chân trang của mình và nó có thể có chân trang cố định bất kể trang đang được cuộn xuống.
Giải pháp kỹ thuật - ĐÃ CHỈNH SỬA
Trong lịch sử, 'chiều cao' là thứ khó tạo khuôn mẫu, so với 'chiều rộng', là thứ dễ nhất. Vì css tập trung vào <body>việc tạo kiểu để hoạt động. Đoạn mã trên - chúng tôi đã đưa ra <html>và <body>một chiều cao. Đây là lúc phép thuật xuất hiện - vì chúng ta có 'chiều cao tối thiểu' trên bàn chơi, chúng tôi đang nói với trình duyệt <body>vượt trội hơn <html>vì <body>giữ chiều cao tối thiểu. Đến lượt nó, cho phép <body>ghi đè <html>vì <html>đã có chiều cao trước đó. Nói cách khác, chúng tôi đang đánh lừa trình duyệt để "đụng" <html>khỏi bàn, vì vậy chúng tôi có thể tạo kiểu độc lập.
min-heightvà height?
<body>việc tạo kiểu để hoạt động. Mã này: chúng tôi đã cung cấp <html>và <body>chiều cao. Đây là lúc mà phép thuật xuất hiện - vì chúng ta có 'chiều cao tối thiểu' trên bàn chơi, nên chúng tôi đang nói với máy chủ <body>vượt trội hơn <html>vì <body>giữ chiều cao tối thiểu. Đến lượt nó, cho phép <body>ghi đè <html>vì <html>đã có chiều cao trước đó. Nói cách khác, chúng tôi đang lừa máy chủ "va chạm" <html>khỏi bàn, vì vậy chúng tôi có thể tạo kiểu độc lập.
Bạn có thể sử dụng vh trên thuộc tính chiều cao tối thiểu.
min-height: 100vh;Bạn có thể làm như sau, tùy thuộc vào cách bạn đang sử dụng lề ...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside elementGiải pháp được chấp nhận sẽ không thực sự hoạt động. Bạn sẽ nhận thấy rằng nội dung divsẽ bằng chiều cao của cha mẹ của nó body,. Vì vậy, đặt bodychiều cao thành 100%sẽ đặt nó bằng chiều cao của cửa sổ trình duyệt. Giả sử cửa sổ trình duyệt có 768pxchiều cao, bằng cách đặt divchiều cao nội dung thành 100%, divchiều cao của lần lượt sẽ là 768px. Vì vậy, bạn sẽ kết thúc với div tiêu đề là 150pxvà div nội dung là 768px. Cuối cùng bạn sẽ có nội dung 150pxbên dưới cuối trang. Đối với một giải pháp khác, hãy xem liên kết này.
Với HTML5, bạn có thể làm điều này:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}HTML:
<header>blabablalba </header>
<section> Content </section>Đối với tôi, điều tiếp theo hoạt động tốt:
Tôi đã bọc tiêu đề và nội dung trên một div
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>Tôi đã sử dụng tham chiếu này để lấp đầy chiều cao bằng flexbox. CSS như sau:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}Để biết thêm thông tin về kỹ thuật flexbox, hãy truy cập tài liệu tham khảo
Bạn cũng có thể đặt cấp độ gốc thành display: inline. Xem http://codepen.io/tommymarshall/pen/cECyH
Hãy chắc chắn rằng chiều cao của html và nội dung cũng được đặt thành 100%.
Câu trả lời được chấp nhận không hoạt động. Và câu trả lời được bình chọn cao nhất không trả lời câu hỏi thực tế. Với tiêu đề chiều cao pixel cố định và một phần điền vào màn hình còn lại của trình duyệt, và cuộn cho owerflow. Đây là một giải pháp thực sự hoạt động, sử dụng định vị tuyệt đối. Tôi cũng giả định rằng chiều cao của tiêu đề được biết đến, bởi âm thanh của "tiêu đề cố định" trong câu hỏi. Tôi sử dụng 150px làm ví dụ ở đây:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>CSS: (chỉ thêm màu nền cho hiệu ứng hình ảnh)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}Để có cái nhìn chi tiết hơn về cách hoạt động của điều này, với nội dung thực tế bên trong #Content, hãy xem jsfiddle này , sử dụng các hàng và cột bootstrap.
bottombất động sản chắc chắn rằng #Contentở lại mắc kẹt ở phần cuối trang. Tôi đánh giá cao bạn đã dành thời gian để giải thích nó.
Trong trường hợp này, tôi muốn div nội dung chính của mình có chiều cao lỏng để toàn bộ trang chiếm 100% chiều cao của trình duyệt.
height: 100vh;
Vui lòng để tôi thêm 5 xu của mình vào đây và đưa ra giải pháp cổ điển:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>Điều này sẽ hoạt động trên tất cả các trình duyệt, không cần tập lệnh, không cần linh hoạt. Đoạn mã mở ở chế độ toàn trang và trình duyệt thay đổi kích thước: tỷ lệ mong muốn được giữ nguyên ngay cả ở chế độ toàn màn hình.
idHeader.heightvà idContent.topđược điều chỉnh để bao gồm đường viền và phải có cùng giá trị nếu đường viền không được sử dụng. Nếu không, các phần tử sẽ kéo ra khỏi khung nhìn, vì chiều rộng được tính toán không bao gồm đường viền, lề và / hoặc phần đệm.left:0; right:0;có thể được thay thế bởi width:100%cùng một lý do, nếu không có đường viền được sử dụng.padding-topvà / hoặc
padding-bottomcác thuộc tính vào #idOuterphần tử.Để hoàn thành câu trả lời của tôi, đây là bố cục chân trang:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>Và đây là bố cục có cả đầu trang và chân trang:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>Trừ khi bạn cần hỗ trợ IE 9 trở xuống, tôi sẽ sử dụng flexbox
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }Bạn cũng cần có được nội dung để lấp đầy toàn bộ trang
body, html{ width:100%; height:100%; padding: 0; margin: 0;}CSS PLaY | bố cục đầu trang / chân trang / cột đơn được căn giữa trình duyệt chéo
Khung CSS, phiên bản 2: Ví dụ 2, chiều rộng được chỉ định | 456 phố Berea
Một điều quan trọng là mặc dù điều này nghe có vẻ dễ dàng, nhưng sẽ có khá nhiều đoạn mã xấu đi vào tệp CSS của bạn để có được hiệu ứng như thế này. Thật không may, nó thực sự là lựa chọn duy nhất.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}Giải pháp tốt nhất mà tôi tìm thấy cho đến nay là đặt một phần tử chân trang ở cuối trang và sau đó đánh giá sự khác biệt của độ lệch của phần chân trang và phần tử chúng ta cần mở rộng. ví dụ
<div id="contents"></div>
<div id="footer"></div>#footer {
position: fixed;
bottom: 0;
width: 100%;
}var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');Bạn cũng có thể muốn cập nhật chiều cao của phần tử nội dung trên mỗi lần thay đổi kích thước cửa sổ, vì vậy ...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});Bạn đã thử một cái gì đó như thế này?
CSS:
.content {
height: 100%;
display: block;
}HTML:
<div class=".content">
<!-- Content goes here -->
</div>