Câu hỏi Làm thế nào một phần tử html có thể điền 100% chiều cao màn hình còn lại, chỉ sử dụng css?


Tôi có phần tử tiêu đề và phần tử nội dung:

#header
#content

Tôi muốn tiêu đề có chiều cao cố định và nội dung để lấp đầy tất cả chiều cao còn lại có sẵn trên màn hình, với overflow-y: scroll;.

Điều này có thể không có Javascript? Cảm ơn.


75
2017-09-09 06:19


gốc




Các câu trả lời:


Bí quyết cho điều này là xác định height: 100%; trên html và body các yếu tố. Một số trình duyệt tìm đến các phần tử cha (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;
}

64
2017-09-09 06:32





quên tất cả các câu trả lời, dòng CSS này đã làm việc cho tôi sau 2 giây:

height:100vh;

1vh = 1% chiều cao màn hình trình duyệt

nguồn

[cập nhật tháng 4 năm 2018] như đã đề cập trong các nhận xét, vào năm 2011 khi câu hỏi được hỏi, không phải tất cả các trình duyệt đều hỗ trợ các đơn vị khung nhìn. Các câu trả lời khác là các giải pháp sau đó - vmax vẫn không đượ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ả.


192
2018-04-12 10:30



Đây là câu trả lời đơn giản nhất, vì bạn không cần đặt chiều cao của tất cả các phần tử gốc thành 100%. Đây là hỗ trợ hiện tại cho vh - caniuse.com/#feat=viewport-units - iOS dường như có thể cần giải pháp, vì "vh trên iOS được báo cáo bao gồm chiều cao của thanh công cụ dưới cùng trong tính toán chiều cao". - Brian Burns
cảm ơn bạn, mã này hoạt động cho tôi - Bruno Ribeiro
WOW, đẹp quá! Nhìn vào tất cả những người này với câu trả lời quá phức tạp. - NoName
Khi câu hỏi được hỏi vào năm 2011, không có trình duyệt chính nào hỗ trợ đơn vị xem. Những "câu trả lời quá phức tạp" là những lựa chọn duy nhất trở lại sau đó. - JJJ
Đề xuất nhỏ rằng một min-height: 100vh sẽ tốt hơn rất nhiều. Nó cũng sẽ mở rộng cho các thiết kế đáp ứng. - Wiggy A.


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 cho dù trang có bị cuộn xuống hay không.

Giải pháp kỹ thuật - CHỈNH SỬA

Trong lịch sử, 'chiều cao' là điều khó khăn để đúc với, so với 'chiều rộng', dễ nhất. Vì css tập trung vào <body> để tạo kiểu cho công việc. Mã ở trên - chúng tôi đã cung cấp <html> và <body> độ cao. Đây là nơi ma thuật được đưa vào hình ảnh - vì chúng tôi có 'min-height' trên bàn chơi, chúng tôi đang nói với trình duyệt rằng <body> vượt trội hơn <html> bởi vì <body> giữ chiều cao tối thiểu. Điều này lần lượt, cho phép <body> ghi đè <html> bởi vì <html> đã có chiều cao trước đó. Nói cách khác, chúng tôi đang lừa trình duyệt để "bẻ" <html> ra khỏi bàn, vì vậy chúng tôi có thể tạo kiểu độc lập.


31
2018-01-19 01:32



goood .......... - Mohammad Sadiq Shaikh
Ôi trời ơi, đó là phép màu! - Geoff
Giống như phép lạ, nó hoạt động! Nhưng xin vui lòng: tại sao min-height và height? - Joy
@ShaojiangCai - Trong lịch sử, 'chiều cao' là điều khó khăn để đúc với, so với 'chiều rộng', dễ nhất. Vì css tập trung vào <body> để tạo kiểu cho công việc. Mã này: chúng tôi đã cung cấp <html> và <body> độ cao. Đây là nơi ma thuật được đưa vào hình ảnh - vì chúng tôi có 'min-height' trên bàn chơi, chúng tôi đang nói với máy chủ rằng <body> vượt trội hơn <html> bởi vì <body> giữ chiều cao tối thiểu. Điều này lần lượt, cho phép <body> ghi đè <html> bởi vì <html> đã có chiều cao trước đó. Nói cách khác, chúng tôi đang lừa máy chủ để "đụng" <html> ra khỏi bàn, vì vậy chúng tôi có thể tạo kiểu độc lập. - Faron
@ Faron Nó có vẻ như 'trình duyệt' sẽ là một lựa chọn từ tốt hơn ở đây thay vì 'máy chủ'. ;) - LETs


Giả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 div sẽ bằng với chiều cao của cha mẹ, body. Vì vậy, thiết lập body chiều cao đến 100% sẽ đặt nó bằng với chiều cao của cửa sổ trình duyệt. Giả sử cửa sổ trình duyệt là 768px về chiều cao, bằng cách đặt nội dung div chiều cao đến 100%, các divchiều cao của nó sẽ lần lượt được 768px. Vì vậy, bạn sẽ kết thúc với div tiêu đề đang được 150px và nội dung div đang được 768px. Cuối cùng bạn sẽ có nội dung 150px bê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.


7
2017-09-20 15:14



hãy trả lời rõ ràng hơn - NullPoiиteя


Với HTML5, bạn có thể thực hiện đ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>

4
2018-04-21 15:53





Đối với tôi, người tiếp theo làm việc tốt:

Tôi đã bọc tiêu đề và nội dung trên div

<div class="main-wrapper">
    <div class="header">

    </div>
    <div class="content">

    </div>
</div>

Tôi đã dùng cái này tài liệu tham khảo để lấp đầy chiều cao bằng flexbox. CSS đi như thế này:

.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


2
2017-07-20 13:09





Bạn cũng có thể đặt cha mẹ thành display: inline. Xem http://codepen.io/tommymarshall/pen/cECyH

Hãy chắc chắn cũng có chiều cao của html và cơ thể thiết lập để 100%, quá.


1
2018-05-05 18:22



Các câu trả lời chỉ liên kết được khuyến khích. Vui lòng cố gắng tóm tắt nội dung liên kết trong câu trả lời của bạn - User that is not a user


Trong trường hợp này, tôi muốn div nội dung chính của tôi có chiều cao chất lỏng để toàn bộ trang chiếm 100% chiều cao của trình duyệt.

height: 100vh;


1
2018-05-18 06:02





Bạn có thể sử dụng vh trên thuộc tính min-height.

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 các lề ...

min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside element

1
2018-06-14 14:33





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 phải có được cơ thể để điền vào toàn bộ trang

body, html{ width:100%; height:100%; padding: 0; margin: 0;}

0
2018-05-31 15:25