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

2075
Vincent McNabb 2008-09-18 19:06.

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

Trang có tiêu đề chứa biểu trưng 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 lấp đầy phần còn lại của trang xuống cuối trang.

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 cho bố cục 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 bất kỳ thứ gì 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ủa nó được đặt thành 100%. Đưa headervào bên trong contentsẽ không cho phép điều này hoạt động.

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

Cập nhật:

Các phần 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ẽ lấp đầy nó xuống dưới cùng. Như sẽ có hai yếu tố ở mức 50%.

Cập nhật 2:

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

30 answers

1257
Pebbl 2014-07-27 22:14.

Cập nhật năm 2015: cách tiếp cận flexbox

Có hai câu trả lời khác đề cập ngắn gọn đến 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 điểm kỹ thuật cho flexbox chắc chắn đã ổn định ngay 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 ứng viên, nhưng không phải tất cả các trình duyệt đều triển khai nó. Việc triển khai WebKit phải có tiền tố -webkit-; Internet Explorer triển khai một phiên bản cũ của thông số kỹ thuật, có tiền tố là -ms-; Opera 12.10 triển khai phiên bản mới nhất của thông số kỹ thuật, chưa được sửa lỗi. 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.

(được 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 miếng đệm 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 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 đề để gắn với nội dung của nó (theo câu hỏi OP), tôi đã thêm một chân trang để hiển thị cách thêm vùng có chiều cao cố định và sau đó đặt vùng nội dung để lấp đầy không gian 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, thuộc tính flex viết tắt các thuộc tính flex-grow , flex-co và flex-base để thiết lập tính linh hoạt của các mục flex. Mozilla có một bài giới thiệu hay về mô hình hộp linh hoạt .

237
NICCAI 2008-09-18 22:16.

Thực sự không có cách nào hợp lý để thực hiện điều này trong CSS. Giả sử bố cục của bạn 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 được giá trị này và đặt chiều cao của phần tử, bạn cần phải đính kèm trình xử lý sự kiện vào cả cửa sổ đang tải và kích thước trên để 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.

175
h--n 2011-10-22 05:02.

Bài gốc là hơn 3 năm trước. Tôi đoán nhiều người đến bài đăng này giống như tôi đang tìm kiếm một giải pháp bố cục giống như ứng dụng, chẳng hạn như nội dung đầu trang, chân trang và chiều cao đầy đủ được cố định bằng cách nào đó chiếm màn hình còn lại. Nếu vậy, bài đăng này có thể hữu ích, 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>

148
Danield 2013-06-07 01:20.

Thay vì sử dụng bảng trong đánh dấu, bạn có thể sử dụng 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 FIDDLE2

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

1) Ít đánh dấu hơn

2) Đánh dấu có nhiều ngữ nghĩa hơn bảng, 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 hiện đại và thiết bị di động ( caniuse )


Chỉ để hoàn thiện, đây là các phần tử Html tương đương với thuộc tính css cho mô hình bảng CSS

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 } 
107
Mr. Alien 2014-04-28 02:05.

Phương pháp tiếp cận chỉ CSS (Nếu chiều cao được xác định / cố định)

Khi bạn muốn phần tử giữa kéo 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 tôi có chiều cao headerfootercác phần tử cố định và chúng tôi muốn sectionthẻ nhận toàn bộ chiều cao dọc có sẵn ...

Bản giới thiệu

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

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ì tôi đang làm là cộng chiều cao của các phần tử và trừ khi 100%sử dụng calc()hàm.

Chỉ cần đảm bảo rằng bạn sử dụng height: 100%;cho các phần tử mẹ.

61
nguyên 2016-05-22 17:20.

Đã 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>

53
zok 2015-02-28 08:21.

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>

Codepen mẫu

Một giải pháp thay thế, với một div được căn giữa trong nội dung div

42
Alireza 2017-06-18 08:19.

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

Hãy xem đ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 xem hình ảnh bên dưới mà tôi đã tạo cho bạn:

36
dev.meghraj 2015-08-25 02:57.

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.

31
Ormoz 2014-09-15 11:09.

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;
}

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

29
John Kurlak 2015-02-21 07:12.

Không có giải pháp nào đã đăng hoạt độ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 hiệu quả 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 ban đầu: Làm đầy chiều cao còn lại của vùng chứa trong khi xử lý phần tràn trong CSS

Xem trước trực tiếp JSFiddle

26
Chris 2011-04-12 05:48.

Tôi cũng đang tìm kiếm 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 để lấy các quy tắc hiển thị của bảng có các phần tử cấp khối bao gồm div.

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

23
Michael P. Bazos 2016-01-04 07:16.

Tuyên bố từ chối trách nhiệm: Câu trả lời được chấp nhận cung cấp ý tưởng về giải pháp, nhưng tôi thấy nó hơi cồng kềnh với các quy tắc trình 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 đơn vị khung nhìn và hộp linh hoạt , và do đó là IE10 +, với điều kiện bạn sử dụng cú pháp cũ cho IE10.

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

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

22

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

padding-bottom: 100%;
20
puiu 2015-10-31 05:39.

Bây giờ có rất nhiều câu trả lời, nhưng tôi thấy việc 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.

Bằng cách này, tôi không cần phải thao tác 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 một bảng điều khiển, trong đó tôi có một thanh bên và một thanh chính. Tôi muốn cái 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

15
Jerph 2008-09-18 20:01.
<!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, như một anh chị em và CSS giống nhau sẽ hoạt động. Tuy nhiên, IE7- không diễn giải chiều cao một cách chính xác nếu float là 100% trong trường hợp đó, vì vậy tiêu đề cần phải nằm TRONG nội dung, như ở trên. Việc tràn: auto sẽ gây ra các thanh cuộn kép trên IE (luôn hiển thị thanh cuộn khung nhìn nhưng bị vô hiệu hóa), nhưng nếu không có nó, nội dung sẽ bị cắt nếu nó bị tràn.

13
Mikko Rantalainen 2013-05-04 00:55.

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

Rất tiếc, MSIE 9 trở xuống 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ố này.

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

Cập nhật năm 2020 : Tất cả các trình duyệt hiện đại đều hỗ trợ cả display: flexdisplay: grid. Điều duy nhất còn thiếu là hỗ trợ subgridchỉ được hỗ trợ bởi Firefox. Lưu ý rằng MSIE không hỗ trợ theo 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, nó có thể được thực hiện. Tôi đề 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.

12
Paulie_D 2017-07-05 04:27.

Giải pháp lưới CSS

Chỉ cần xác định thuộc tính bodywith display:gridvà the grid-template-rowsusing autofrvalue.

* {
  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ề Grids @ CSS-Tricks.com

11
B_G 2011-06-20 23:36.

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

Vì có thể dễ dàng đặt nội dung DIV có cùng chiều cao với chiều cao gốc nhưng có vẻ khó đặt nó bằng chiều cao gốc trừ chiều cao tiêu đề, tôi quyết định đặt nội dung div có chiều cao đầy đủ nhưng đặt nó hoàn toàn ở góc trên cùng bên trái và sau đó xác định một khoảng đệm cho trên cùng có chiều cao của tiêu đề. Bằng cách này, nội dung 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%;
}
9
Thaoms 2012-02-20 23:21.

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 chiều cao html và nội dung (theo thứ tự đó) và sau đó chỉ cung cấp cho các phần tử của bạn chiều cao?

Làm việc cho tôi

9
Zohab Ali 2018-03-24 00:43.
 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 bắt buộc

8
Greg 2013-07-06 11:17.

Bạn thực sự có thể sử dụng display: tableđể chia khu vực thành hai phần tử (tiêu đề và nội dung), trong đó tiêu đề có thể thay đổi chiều cao và nội dung lấp đầy không gian còn lại. Điều này hoạt động với toàn bộ trang, cũng như khi khu vực chỉ đơn giản là nội dung của một phần tử khác được định vị với positionđặt thành relative, absolutehoặc fixed. Nó sẽ hoạt động miễn là phần tử mẹ có chiều cao khác 0.

Xem trò chơi này và cả mã bên dưới:

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>
6
Jerph 2008-09-19 07:52.

Vincent, tôi sẽ trả lời lại theo yêu cầu mới của bạn. Vì bạn không quan tâm đến việc nội dung bị ẩn nếu nó quá dài, bạn không cần phải làm nổi tiêu đề. Chỉ cần đặt phần tràn ẩn trên các thẻ html và body, đồng thời đặt #contentchiều cao thành 100%. Nội dung sẽ luôn dài hơn cửa sổ xem bằng chiều cao của tiêu đề, nhưng nó sẽ bị ẩn và 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>
5
Arun 2013-04-28 01:45.

Thử cái này

var sizeFooter = function(){
    $(".webfooter") .css("padding-bottom", "0px") .css("padding-bottom", $(window).height() - $("body").height()) } $(window).resize(sizeFooter);
5
grinmax 2017-02-02 05:59.

Đố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 giới thiệu - https://jsfiddle.net/u763ck92/

5
Michael Schade 2020-04-15 11:12.

Đây là phiên bản tối thiểu của riêng tôi về giải pháp Pebbl. Loay hoay mãi mới tìm ra được 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>
4
htho 2012-09-14 22:02.

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ó màu trắng bên dưới chân trang màu đỏ. Vì vậy, tôi đặt màu nền của các 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 vd. 20em hoặc 50% một trang gần như trống sẽ không để lại toàn bộ trang màu đỏ.

4
Anthony Brenelière 2016-08-26 06:13.

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

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

Tôi đã sử dụng flexbox nhưng theo một cách đơn giản hơn, chỉ sử dụng các thuộc tính display: flexflex-direction: row | column :

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

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

Thành phần chính có 90% khung nhìn, vì đầu trang và chân trang có 5%.

Tôi đã đăng mẫu của mình ở đâ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>
4
Pat M 2016-07-02 10:53.

Xoay quanh ý tưởng về Mr. Alien ...

Đây có vẻ là một giải pháp gọn gàng hơn một giải pháp flex box phổ biến dành 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 bằng 100% và trừ chiều cao của đầu trang 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 kết xuất bằng javascript và các khuôn khổ JS như Angular2. Nếu không, phép tính sẽ không đẩy chân trang xuống cuối trang khi nội dung được hiển thị javascript hiển thị.

Đây là một ví dụ đơn giản về đầu trang và chân trang sử dụng chiều cao 50px và đệ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, phép toán có thể được đơn giản hóa nhưng bạn có ý tưởng ...

4
gadolf 2020-02-26 11:16.

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) lấp đầy chiều cao của không gian màn hình còn lại và căn chỉnh nội dung ở giữa phần tử mẹ:

<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>

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Đây là Tổng thống Trump đe dọa 'trợ cấp' xe điện của GM vì đóng cửa nhà máy

Trump và Giám đốc điều hành GM Mary Barra vào năm 2017. Kể từ khi tin tức nổ ra ngày hôm qua rằng General Motors đang cắt giảm việc làm ở Bắc Mỹ để chuẩn bị cho tương lai điện / xe tự hành / khủng khiếp có thể xảy ra của chúng tôi, gần như tất cả mọi người đã tự hỏi: Tổng thống Trump, người đã vận động tranh cử trên một nền tảng sẽ như thế nào của việc mang lại và duy trì việc làm ô tô của Mỹ, phải nói gì về điều này? Bây giờ chúng ta biết.

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bản vá lỗi tiếp theo của Fallout 76 sẽ mang lại một số bản sửa lỗi cần thiết

Bethesda cho biết ngày hôm nay trên Reddit, Fallout 76 sẽ có một bản vá lớn khác vào ngày 4 tháng 12, sẽ bắt đầu cố gắng khắc phục một số vấn đề lớn hơn của trò chơi. Ngoài ra, công ty cho biết họ có kế hoạch giao tiếp nhiều hơn trong tương lai về những gì nhóm Fallout 76 đang làm việc và khi nào các bản cập nhật mới cho trò chơi sẽ ra mắt.

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Mạng lưới bệnh viện Công giáo sẽ không cho phép nhân viên phá thai tại phòng khám ngoài giờ làm việc

Bạn có biết rằng một trong sáu bệnh nhân ở bệnh viện ở Hoa Kỳ được điều trị tại một cơ sở Công giáo? Và bạn có biết rằng quyền sở hữu của Công giáo hạn chế sâu sắc việc thiết lập các thủ tục y tế có thể được thực hiện trong các bệnh viện này, rõ ràng nhất là khi nói đến chăm sóc sức khỏe sinh sản? Bây giờ NPR báo cáo rằng sự gia tăng của các bệnh viện thuộc Công giáo đang gây khó khăn hơn cho các bác sĩ — những người bị cấm bởi các quy định do Hoa Kỳ viết.

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Khói từ đám cháy rừng ở California đã đến tận thành phố New York

Đường chân trời San Francisco bị che khuất bởi khói và khói mù do cháy rừng phía sau Đảo Alcatraz, Thứ Tư, ngày 14 tháng 11 năm 2018, ở San Francisco.

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Thanh thiếu niên, Gia đình Florida Hội đồng quản trị trường học về Luật 'Không nói đồng tính': 'Buộc chúng tôi tự kiểm duyệt'

Vụ kiện, nêu tên một số học khu, lập luận rằng dự luật "Không nói đồng tính" được ban hành gần đây của Florida "có hiệu quả im lặng và xóa bỏ học sinh và gia đình LGBTQ +"

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Khi bạn không thể trở thành người mà Internet muốn bạn trở thành

Tôi ghét từ "tàu đắm". Mọi người cảm thấy thoải mái trong la bàn đạo đức của riêng mình, và khi làm như vậy, họ thấy mình vượt qua sự phán xét.

Language