Tạo một div lấp đầy chiều cao của không gian màn hình còn lại

Tôi đang làm việc trên một ứng dụng web nơi tôi muốn nội dung lấp đầy chiều cao của toàn bộ màn hình.

Trang này có một tiêu đề, chứa logo và thông tin tài khoản. Đây có thể là một chiều cao tùy ý. Tôi muốn div nội dung điền phần còn lại của trang xuống dưới cùng.

Tôi có một tiêu đề divvà một nội dung div. Hiện tại tôi đang sử dụng một bảng để bố trí như vậy:

CSS và HTML

#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}

<table id="page">
    <tr>
        <td id="tdheader">
            <div id="header">...</div>
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            <div id="content">...</div>
        </td>
    </tr>
</table>

Toàn bộ chiều cao của trang được lấp đầy và không cần cuộn.

Đối với mọi thứ bên trong div nội dung, cài đặt top: 0;sẽ đặt nó ngay bên dưới tiêu đề. Đôi khi nội dung sẽ là một bảng thực, với chiều cao được đặt thành 100%. Đưa headervào bên trong contentsẽ không cho phép điều này làm việc.

Có cách nào để đạt được hiệu quả tương tự mà không cần sử dụng tablekhông?

Cập nhật:

Các yếu tố bên trong nội dung divcũng sẽ có chiều cao được đặt thành tỷ lệ phần trăm. Vì vậy, một cái gì đó ở 100% bên trong divsẽ điền nó vào dưới cùng. Như hai yếu tố sẽ ở mức 50%.

Cập nhật 2:

Chẳng hạn, nếu tiêu đề chiếm 20% chiều cao của màn hình, một bảng được chỉ định ở mức 50% bên trong #contentsẽ chiếm 40% không gian màn hình. Cho đến nay, bọc toàn bộ thứ trong một cái bàn là thứ duy nhất hoạt động.

Cập nhật 2015: phương pháp flexbox

Có hai câu trả lời khác đề cập ngắn gọn về flexbox ; tuy nhiên, đó là hơn hai năm trước và họ không cung cấp bất kỳ ví dụ nào. Các đặc điểm kỹ thuật cho flexbox đã chắc chắn giải quyết bây giờ.

Lưu ý: Mặc dù đặc tả Bố cục Hộp linh hoạt CSS đang ở giai đoạn Đề xuất của Ứng viên, nhưng không phải tất cả các trình duyệt đã triển khai nó. Việc triển khai WebKit phải được bắt đầu bằng -webkit-; Internet Explorer thực hiện một phiên bản cũ của thông số kỹ thuật, có tiền tố là -ms-; Opera 12.10 thực hiện phiên bản mới nhất của thông số kỹ thuật, chưa được chỉnh sửa. Xem bảng tương thích trên mỗi thuộc tính để biết trạng thái tương thích cập nhật.

(lấy từ https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )

Tất cả các trình duyệt chính và IE11 + đều hỗ trợ Flexbox. Đối với IE 10 trở lên, bạn có thể sử dụng shim FlexieJS.

Để kiểm tra hỗ trợ hiện tại, bạn cũng có thể xem tại đây: http://caniuse.com/#feat=flexbox

Ví dụ làm việc

Với flexbox, bạn có thể dễ dàng chuyển đổi giữa bất kỳ hàng hoặc cột nào có kích thước cố định, kích thước kích thước nội dung hoặc kích thước không gian còn lại. Trong ví dụ của tôi, tôi đã đặt tiêu đề thành snap cho nội dung của nó (theo câu hỏi của OP), tôi đã thêm một chân trang để hiển thị cách thêm một vùng có chiều cao cố định và sau đó đặt vùng nội dung để lấp đầy khoảng trống còn lại.

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

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 1px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}

.box .row.content {
  flex: 1 1 auto;
}

.box .row.footer {
  flex: 0 1 40px;
}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->

<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

Trong CSS trên, flex shorthands tài sản flex-nuôi , flex-co , và flex-cơ sở tính để thiết lập sự linh hoạt của các mục flex. Mozilla có một giới thiệu tốt về mô hình hộp linh hoạt .

Thực sự không có cách nào để tạo ra điều này trong CSS. Giả sử bố cục của bạn có độ phức tạp, bạn cần sử dụng JavaScript để đặt chiều cao của phần tử. Bản chất của những gì bạn cần làm là:

Element Height = Viewport height - element.offset.top - desired bottom margin

Khi bạn có thể nhận giá trị này và đặt chiều cao của phần tử, bạn cần đính kèm các trình xử lý sự kiện vào cả cửa sổ đang tải và kích thước để bạn có thể kích hoạt chức năng thay đổi kích thước của mình.

Ngoài ra, giả sử nội dung của bạn có thể lớn hơn chế độ xem, bạn sẽ cần đặt tràn-y để cuộn.

Bài viết gốc là hơn 3 năm trước. Tôi đoán nhiều người đến với bài đăng này như tôi đang tìm kiếm một giải pháp bố cục giống như ứng dụng, nói rằng một tiêu đề, chân trang và nội dung chiều cao đầy đủ cố định chiếm màn hình còn lại. Nếu vậy, bài đăng này có thể giúp đỡ, nó hoạt động trên IE7 +, v.v.

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

Và đây là một số đoạn trích từ bài đăng đó:

@media screen { 
  
  /* start of screen rules. */ 
  
  /* Generic pane rules */
  body { margin: 0 }
  .row, .col { overflow: hidden; position: absolute; }
  .row { left: 0; right: 0; }
  .col { top: 0; bottom: 0; }
  .scroll-x { overflow-x: auto; }
  .scroll-y { overflow-y: auto; }

  .header.row { height: 75px; top: 0; }
  .body.row { top: 75px; bottom: 50px; }
  .footer.row { height: 50px; bottom: 0; }
  
  /* end of screen rules. */ 
}

<div class="header row" style="background:yellow;">
    <h2>My header</h2>
</div> 
<div class="body row scroll-y" style="background:lightblue;">
    <p>The body</p>
</div> 
<div class="footer row" style="background:#e9e9e9;">
    My footer
</div>

Thay vì sử dụng các bảng trong đánh dấu, bạn có thể sử dụng các bảng CSS.

Đánh dấu

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Có liên quan) CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1 và FIDDLE2

Một số ưu điểm của phương pháp này là:

1) Ít đánh dấu

2) Đánh dấu là ngữ nghĩa nhiều hơn bảng, bởi vì đây không phải là dữ liệu dạng bảng.

3) Hỗ trợ trình duyệt rất tốt : IE8 +, Tất cả các trình duyệt và thiết bị di động hiện đại ( caniuse )

table    { display: table }
tr       { display: table-row }
thead    { display: table-header-group }
tbody    { display: table-row-group }
tfoot    { display: table-footer-group }
col      { display: table-column }
colgroup { display: table-column-group }
td, th   { display: table-cell }
caption  { display: table-caption } 

Cách tiếp cận chỉ CSS (Nếu biết chiều cao / cố định)

Khi bạn muốn phần tử ở giữa trải dài trên toàn bộ trang theo chiều dọc, bạn có thể sử dụng calc()phần tử được giới thiệu trong CSS3.

Giả sử chúng ta có chiều cao header và footercác yếu tố cố định và chúng tôi muốn sectionthẻ lấy toàn bộ chiều cao có sẵn ...

Bản giới thiệu

Đánh dấu giả định và CSS của bạn phải là

html,
body {
  height: 100%;
}

header {
  height: 100px;
  background: grey;
}

section {
  height: calc(100% - (100px + 150px));
  /* Adding 100px of header and 150px of footer */
  background: tomato;
}

footer {
  height: 150px;
  background-color: blue;
}

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

Vì vậy, ở đây, những gì đang làm là, thêm chiều cao của các yếu tố và hơn là khấu trừ từ 100%việc sử dụng calc()chức năng.

Chỉ cần chắc chắn rằng bạn sử dụng height: 100%;cho các yếu tố cha.

Đã sử dụng: height: calc(100vh - 110px);

mã:

  
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
  

<div class="header">
    <h2>My header</h2>
</div> 
<div class="body">
    <p>The body</p>
</div> 
<div class="footer">
    My footer
</div>

Một giải pháp đơn giản, sử dụng flexbox:

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

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

Mẫu Codepen

Một giải pháp thay thế, với một div tập trung trong div nội dung

Làm thế nào về bạn chỉ cần sử dụng vhviết tắt view heighttrong CSS ...

Nhìn vào đoạn mã tôi đã tạo cho bạn bên dưới và chạy nó:

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

Ngoài ra, hãy nhìn vào hình ảnh dưới đây mà tôi đã tạo cho bạn:

Cách đơn giản CSS3

height: calc(100% - 10px); // 10px is height of your first div...

tất cả các trình duyệt chính hiện nay đều hỗ trợ nó, vì vậy hãy tiếp tục nếu bạn không có yêu cầu hỗ trợ các trình duyệt cổ điển.

Nó có thể được thực hiện hoàn toàn bằng CSScách sử dụng vh:

#page {
    display:block; 
    width:100%; 
    height:95vh !important; 
    overflow:hidden;
}

#tdcontent {
    float:left; 
    width:100%; 
    display:block;
}

#content {      
    float:left; 
    width:100%; 
    height:100%; 
    display:block; 
    overflow:scroll;
}

và HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

Tôi đã kiểm tra nó, Nó hoạt động trong tất cả các trình duyệt chính: Chrome, IE, vàFireFox

Không có giải pháp nào được đăng khi bạn cần div dưới cùng để cuộn khi nội dung quá cao. Đây là một giải pháp hoạt động trong trường hợp đó:

.table {
  display: table;
}

.table-row {
  display: table-row;
}

.table-cell {
  display: table-cell;
}

.container {
  width: 400px;
  height: 300px;
}

.header {
  background: cyan;
}

.body {
  background: yellow;
  height: 100%;
}

.body-content-outer-wrapper {
  height: 100%;
}

.body-content-inner-wrapper {
  height: 100%;
  position: relative;
  overflow: auto;
}

.body-content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

<div class="table container">
  <div class="table-row header">
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
    <div>This is the header whose height is unknown</div>
  </div>
  <div class="table-row body">
    <div class="table-cell body-content-outer-wrapper">
      <div class="body-content-inner-wrapper">
        <div class="body-content">
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
          <div>This is the scrollable content whose height is unknown</div>
        </div>
      </div>
    </div>
  </div>
</div>

Nguồn gốc: Làm đầy chiều cao còn lại của một container trong khi xử lý tràn trong CSS

Xem trước trực tiếp

Tôi cũng đang tìm kiếm một câu trả lời cho điều này. Nếu bạn đủ may mắn để có thể nhắm mục tiêu IE8 trở lên, bạn có thể sử dụng display:tablevà các giá trị liên quan để có được quy tắc kết xuất của các bảng với các thành phần cấp khối bao gồm div.

Nếu bạn thậm chí còn may mắn hơn và người dùng của bạn đang sử dụng các trình duyệt hàng đầu (ví dụ: nếu đây là ứng dụng mạng nội bộ trên các máy tính bạn điều khiển, như dự án mới nhất của tôi là), bạn có thể sử dụng Bố cục hộp linh hoạt mới trong CSS3!

Điều làm việc cho tôi (với một div trong một div khác và tôi giả sử trong tất cả các trường hợp khác) là đặt phần đệm dưới cùng thành 100%. Đó là, thêm phần này vào css / biểu định kiểu của bạn:

padding-bottom: 100%;

Tuyên bố miễn trừ trách nhiệm: Câu trả lời được chấp nhận đưa ra ý tưởng về giải pháp, nhưng tôi thấy nó hơi bực bội với một quy tắc bao bọc và css không cần thiết. Dưới đây là một giải pháp với rất ít quy tắc css.

HTML 5

<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;       /* body takes whole viewport's height */
}

main {
  flex: 1;                 /* this will make the container take the free space */
}

Giải pháp ở trên sử dụng các đơn vị khung nhìn và flexbox , và do đó là IE10 +, cung cấp cho bạn sử dụng cú pháp cũ cho IE10.

Codepen để chơi với: liên kết đến codepen

Hoặc cái này, cho những người cần container chính có thể cuộn được trong trường hợp tràn nội dung: liên kết đến codepen

Hiện tại có rất nhiều câu trả lời, nhưng tôi thấy sử dụng height: 100vh;để làm việc trên phần tử div cần lấp đầy toàn bộ không gian dọc có sẵn.

Theo cách này, tôi không cần phải chơi xung quanh với màn hình hoặc định vị. Điều này rất hữu ích khi sử dụng Bootstrap để tạo bảng điều khiển trong đó tôi có thanh bên và phím chính. Tôi muốn chính kéo dài và lấp đầy toàn bộ không gian dọc để tôi có thể áp dụng màu nền.

div {
    height: 100vh;
}

Hỗ trợ IE9 trở lên: nhấp để xem liên kết

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}

</style>
</head>
<body>

    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

</body>
</html>

Trong tất cả các trình duyệt lành mạnh, bạn có thể đặt div "tiêu đề" trước nội dung, với tư cách là anh chị em và cùng một CSS sẽ hoạt động. Tuy nhiên, IE7- không diễn giải chính xác chiều cao nếu float là 100% trong trường hợp đó, vì vậy tiêu đề cần phải IN nội dung, như trên. Overflow: auto sẽ khiến các thanh cuộn kép trên IE (luôn có thanh cuộn khung nhìn hiển thị, nhưng bị vô hiệu hóa), nhưng không có nó, nội dung sẽ bị cắt nếu tràn.

Tôi vật lộn với điều này trong một thời gian và kết thúc với những điều sau đây:

Vì có thể dễ dàng làm cho nội dung DIV có cùng chiều cao với cha mẹ nhưng dường như rất khó để làm cho chiều cao của cha trừ đi chiều cao tiêu đề, tôi quyết định làm cho nội dung div có chiều cao đầy đủ nhưng đặt nó ở góc trên cùng bên trái và sau đó xác định phần đệm cho đầu có chiều cao của tiêu đề. Bằng cách này, nội dung sẽ hiển thị gọn gàng dưới tiêu đề và lấp đầy toàn bộ không gian còn lại:

body {
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

#header {
    position: absolute;
    top: 0;
    left: 0;
    height: 50px;
}

#content {
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    height: 100%;
}

Nếu bạn có thể đối phó với việc không hỗ trợ các trình duyệt cũ (nghĩa là MSIE 9 trở lên), bạn có thể thực hiện việc này với Mô-đun bố trí hộp linh hoạt đã là W3C CR. Mô-đun đó cũng cho phép các thủ thuật hay khác, chẳng hạn như sắp xếp lại nội dung.

Thật không may, MSIE 9 hoặc ít hơn không hỗ trợ điều này và bạn phải sử dụng tiền tố của nhà cung cấp cho thuộc tính CSS cho mọi trình duyệt khác ngoài Firefox. Hy vọng rằng các nhà cung cấp khác cũng sớm bỏ tiền tố.

Một lựa chọn khác sẽ là CSS Grid Layout nhưng thậm chí còn có ít sự hỗ trợ hơn từ các phiên bản trình duyệt ổn định. Trong thực tế, chỉ có MSIE 10 hỗ trợ này.

Cập nhật năm 2020 : Tất cả các trình duyệt hiện đại hỗ trợ cả display: flexvà display: grid. Điều duy nhất còn thiếu là hỗ trợ subgridmà chỉ được Firefox hỗ trợ. Lưu ý rằng MSIE không hỗ trợ thông số kỹ thuật nhưng nếu bạn sẵn sàng thêm các bản hack CSS cụ thể của MSIE, thì nó có thể được thực hiện để hành xử. Tôi sẽ đề nghị đơn giản là bỏ qua MSIE vì ngay cả Microsoft cũng nói rằng nó không nên được sử dụng nữa.

Giải pháp lưới CSS

Chỉ cần xác định bodyvới display:gridvà grid-template-rowssử dụng autovà thuộc tính frgiá trị.

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

header {
  padding: 1em;
  background: pink;
}

main {
  padding: 1em;
  background: lightblue;
}

footer {
  padding: 2em;
  background: lightgreen;
}

main:hover {
  height: 2000px;
  /* demos expansion of center element */
}

<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

Hướng dẫn đầy đủ về lưới @ CSS-Tricks.com

Tại sao không chỉ như thế này?

html, body {
    height: 100%;
}

#containerInput {
    background-image: url('../img/edit_bg.jpg');
    height: 40%;
}

#containerControl {
    background-image: url('../img/control_bg.jpg');
    height: 60%;
}

Cung cấp cho bạn html và cơ thể (theo thứ tự đó) chiều cao và sau đó chỉ cần cung cấp cho các yếu tố của bạn chiều cao?

Làm việc cho tôi

Bạn thực sự có thể sử dụng display: tableđể phân chia khu vực thành hai yếu tố (tiêu đề và nội dung), trong đó tiêu đề có thể khác nhau về chiều cao và nội dung lấp đầy không gian còn lại. Tác phẩm này với toàn bộ trang, cũng như khi khu vực này chỉ đơn giản là nội dung của một nguyên tố vị trí với positioncác thiết lập để relative, absolutehoặc fixed. Nó sẽ hoạt động miễn là phần tử cha có chiều cao khác không.

Xem fiddle này và cũng mã dưới đây:

CSS:

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

p {
    margin: 0;
    padding: 0;
}

.additional-padding {
    height: 50px;
    background-color: #DE9;
}

.as-table {
    display: table;
    height: 100%;
    width: 100%;
}

.as-table-row {
    display: table-row;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background-color: #33DD44;
}

HTML:

<div class="as-table">
    <div id="header">
        <p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
        <div class="additional-padding"></div>
    </div>
    <div class="as-table-row">
        <div id="content">
            <p>This is the actual content that takes the rest of the available space.</p>
        </div>
    </div>
</div>

 style="height:100vh"

giải quyết vấn đề cho tôi Trong trường hợp của tôi, tôi đã áp dụng điều này cho div yêu cầu

Vincent, tôi sẽ trả lời lại bằng cách sử dụng các yêu cầu mới của bạn. Vì bạn không quan tâm đến nội dung bị ẩn nếu quá dài, bạn không cần phải làm nổi tiêu đề. Chỉ cần đặt ẩn tràn trên thẻ html và thẻ body và đặt #contentchiều cao thành 100%. Nội dung sẽ luôn dài hơn chế độ xem theo chiều cao của tiêu đề, nhưng nó sẽ bị ẩn và sẽ không gây ra thanh cuộn.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Test</title>
    <style type="text/css">
    body, html {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      color: #FFF;
    }
    p {
      margin: 0;
    }

    #header {
      background: red;
    }

    #content {
      position: relative;
      height: 100%;
      background: blue;
    }

    #content #positioned {
      position: absolute;
      top: 0;
      right: 0;
    }
  </style>
</head>

<body>
  <div id="header">
    Header
    <p>Header stuff</p>
  </div>

  <div id="content">
    Content
    <p>Content stuff</p>
    <div id="positioned">Positioned Content</div>
  </div>

</body>
</html>

Thử cái này

var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom", "0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

Tôi tìm thấy một giải pháp khá đơn giản, vì đối với tôi đó chỉ là vấn đề thiết kế. Tôi muốn phần còn lại của Trang không được trắng bên dưới chân trang màu đỏ. Vì vậy, tôi đặt màu nền của trang thành màu đỏ. Và nội dung màu nền sang màu trắng. Với chiều cao nội dung được đặt thành ví dụ. 20em hoặc 50% một trang gần như trống sẽ không để lại toàn bộ trang màu đỏ.

Tôi đã có cùng một vấn đề nhưng tôi không thể thực hiện giải pháp với flexbox ở trên. Vì vậy, tôi đã tạo mẫu riêng của mình, bao gồm:

• một tiêu đề với một yếu tố kích thước cố định
• chân trang
• một thanh bên với thanh cuộn chiếm chiều cao còn lại
• Nội dung

Tôi đã sử dụng flexbox nhưng theo cách đơn giản hơn, chỉ sử dụng hiển thị thuộc tính : flex và flex-direction: row | cột :

Tôi sử dụng angular và tôi muốn kích thước thành phần của mình là 100% thành phần cha mẹ của chúng.

Điều quan trọng là đặt kích thước (tính theo phần trăm) cho tất cả các bậc cha mẹ sắp xếp để giới hạn kích thước của chúng. Trong ví dụ sau, chiều cao myapp có 100% khung nhìn.

Thành phần chính có 90% chế độ xem, bởi vì tiêu đề và chân trang có 5%.

Tôi đã đăng mẫu của mình tại đây: https://jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

Html:

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

Đối với ứng dụng di động, tôi chỉ sử dụng VH và VW

<div class="container">
  <div class="title">Title</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>

.container {
  width: 100vw;
  height: 100vh;
  font-size: 5vh;
}

.title {
  height: 20vh;
  background-color: red;
}

.content {
  height: 60vh;
  background: blue;
}

.footer {
  height: 20vh;
  background: green;
}

Bản trình diễn - https://jsfiddle.net/u763ck92/

Thoát khỏi ý tưởng về ông Alien ...

Đây có vẻ là một giải pháp sạch hơn hộp flex phổ biến cho các trình duyệt hỗ trợ CSS3.

Chỉ cần sử dụng min-height (thay vì height) với calc () cho khối nội dung.

Calc () bắt đầu với 100% và trừ đi độ cao của tiêu đề và chân trang (cần bao gồm các giá trị đệm)

Sử dụng "min-height" thay vì "height" đặc biệt hữu ích để nó có thể hoạt động với nội dung được hiển thị javascript và các khung công tác JS như Angular2. Mặt khác, phép tính sẽ không đẩy chân trang xuống cuối trang sau khi hiển thị nội dung javascript.

Dưới đây là một ví dụ đơn giản về đầu trang và chân trang sử dụng chiều cao 50px và phần đệm 20px cho cả hai.

Html:

<body>
    <header></header>
    <div class="content"></div>
    <footer></footer>
</body>

Css:

.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

Tất nhiên, toán học có thể được đơn giản hóa nhưng bạn có ý tưởng ...

Trong Bootstrap:

Kiểu CSS:

html, body {
    height: 100%;
}

1) Chỉ cần lấp đầy chiều cao của không gian màn hình còn lại:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1>

    <header>Header</header>
    <div>Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

2) điền chiều cao của không gian màn hình còn lại và căn chỉnh nội dung vào giữa phần tử cha:

<body class="d-flex flex-column">
  <div class="d-flex flex-column flex-grow-1">

    <header>Header</header>
    <div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
    <footer class="mt-auto">Footer</footer>

  </div>
</body>

Đây là phiên bản tối thiểu của giải pháp Pebbl của riêng tôi. Mất mãi mãi để tìm ra mẹo để nó hoạt động trong IE11. (Cũng được thử nghiệm trong Chrome, Firefox, Edge và Safari.)

<!DOCTYPE html>
<html>
<head>
<style>
html {
    height: 100%;
    }
body {
    height: 100%;
    margin: 0;
    }
section {
    display: flex;
    flex-direction: column;
    height: 100%;
    }
div:first-child {
    background: gold;
    }
div:last-child {
    background: plum;
    flex-grow: 1;
    }
</style>
</head>
<body>
    <section>
      <div>FIT</div>
      <div>GROW</div>
    </section>
</body>
</html>