Bố cục CSS chiều cao tối thiểu 100%

Cách tốt nhất để tạo một yếu tố có chiều cao tối thiểu 100% trên một loạt các trình duyệt là gì?

Đặc biệt nếu bạn có bố cục với một headervà footercố định height,

Làm thế nào để bạn làm cho phần nội dung giữa lấp đầy 100%khoảng trống ở giữa với phần footercố định ở phía dưới?

Tôi đang sử dụng cách sau: Bố cục CSS - chiều cao 100%

Chiều cao tối thiểu

Phần tử #container của trang này có chiều cao tối thiểu 100%. Theo cách đó, nếu nội dung yêu cầu nhiều chiều cao hơn chế độ xem cung cấp, chiều cao của #content buộc #container cũng trở nên dài hơn. Các cột có thể có trong #content sau đó có thể được hiển thị bằng hình ảnh nền trên #container; div không phải là ô bảng và bạn không cần (hoặc muốn) các yếu tố vật lý để tạo hiệu ứng hình ảnh như vậy. Nếu bạn chưa bị thuyết phục; nghĩ các đường uốn lượn và độ dốc thay vì các đường thẳng và cách phối màu đơn giản.

Định vị tương đối

Vì #container có vị trí tương đối, #footer sẽ luôn duy trì ở cuối; vì chiều cao tối thiểu được đề cập ở trên không ngăn #container mở rộng, điều này sẽ hoạt động ngay cả khi (hoặc đặc biệt là khi) #content buộc #container trở nên dài hơn.

Đệm đáy

Vì nó không còn trong luồng thông thường, phần đệm dưới của #content hiện cung cấp không gian cho #footer tuyệt đối. Phần đệm này được bao gồm trong chiều cao cuộn theo mặc định, do đó phần chân trang sẽ không bao giờ chồng lấp nội dung trên.

Thu nhỏ kích thước văn bản một chút hoặc thay đổi kích thước cửa sổ trình duyệt của bạn để kiểm tra bố cục này.

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

Hoạt động tốt cho tôi.

Để đặt chiều cao tùy chỉnh bị khóa ở một nơi nào đó:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

Đây là một giải pháp khác dựa trên vh, hoặc viewpoint height, để biết chi tiết, hãy truy cập các đơn vị CSS . Nó dựa trên giải pháp này , sử dụng flex thay thế.

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

Các đơn vị là vw, vh, vmax, vmin. Về cơ bản, mỗi đơn vị bằng 1% kích thước khung nhìn. Vì vậy, khi chế độ xem thay đổi, trình duyệt sẽ tính giá trị đó và điều chỉnh tương ứng.

Bạn có thể tìm thêm thông tin ở đây:

Đặc biệt:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

Câu trả lời của kleolb02 có vẻ khá tốt. một cách khác sẽ là sự kết hợp giữa footer dính và hack min-height

Để min-heighthoạt động chính xác với tỷ lệ phần trăm, trong khi kế thừa nút cha của nó min-height, mẹo sẽ là đặt chiều cao nút cha thành 1pxvà sau đó đứa trẻ min-heightsẽ hoạt động chính xác.

Trang demo

Một CSSgiải pháp thuần túy ( #content { min-height: 100%; }) sẽ hoạt động trong rất nhiều trường hợp, nhưng không phải trong tất cả chúng - đặc biệt là IE6 và IE7.

Thật không may, bạn sẽ cần phải sử dụng một giải pháp JavaScript để có được hành vi mong muốn. Điều này có thể được thực hiện bằng cách tính chiều cao mong muốn cho nội dung của bạn <div>và đặt nó làm thuộc tính CSS trong một hàm:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

Sau đó, bạn có thể đặt chức năng này làm trình xử lý onLoadvà onResizecác sự kiện:

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

Tôi đồng ý với Levik vì bộ chứa cha mẹ được đặt thành 100% nếu bạn có thanh bên và muốn chúng lấp đầy khoảng trống để đáp ứng với phần chân trang, bạn cũng không thể đặt chúng thành 100% vì chúng cũng sẽ là 100% chiều cao của phụ huynh có nghĩa là chân trang cuối cùng bị đẩy xuống khi sử dụng chức năng xóa.

Hãy nghĩ về nó theo cách này nếu tiêu đề của bạn là chiều cao 50px và chân trang của bạn là chiều cao 50px và nội dung chỉ được tự động cho không gian còn lại, ví dụ 100px và vùng chứa trang là 100% giá trị này chiều cao của nó sẽ là 200px. Sau đó, khi bạn đặt chiều cao thanh bên thành 100% thì nó sẽ là 200px mặc dù nó được cho là vừa khít giữa đầu trang và chân trang. Thay vào đó, nó kết thúc là 50px + 200px + 50px, vì vậy trang hiện tại là 300px vì các thanh bên được đặt ở cùng độ cao với vùng chứa trang. Sẽ có một khoảng trắng lớn trong nội dung của trang.

Tôi đang sử dụng internet Explorer 9 và đây là những gì tôi nhận được khi sử dụng phương pháp 100% này. Tôi chưa thử nó trong các trình duyệt khác và tôi cho rằng nó có thể hoạt động trong một số tùy chọn khác. nhưng nó sẽ không phải là phổ quát

Trước tiên, bạn nên tạo một divvới id='footer'sau contentdiv của bạn và sau đó chỉ cần làm điều này.

HTML của bạn sẽ trông như thế này:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

Và CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

Thử cái này:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

Các divyếu tố bên dưới div nội dung phải có clear:both.

Có lẽ là giải pháp ngắn nhất (chỉ hoạt động trong các trình duyệt hiện đại)

Đoạn CSS nhỏ này tạo ra "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

yêu cầu duy nhất là bạn cần phải có một chân trang có chiều cao cố định.

Ví dụ cho bố cục này:

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

bạn cần CSS này:

    html, body { height: 100%; }
    main { min-height: calc(100% - 2em); }
    footer { height: 2em; }

Bạn có thể thử điều này: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ Đó là 100% chiều cao và trung tâm ngang.

chỉ chia sẻ những gì tôi đã được sử dụng và hoạt động độc đáo

#content{
        height: auto;
        min-height:350px;
}

Như đã đề cập trong câu trả lời của Afshin Mehrabani, bạn nên đặt chiều cao của thân và html thành 100%, nhưng để có phần chân trang ở đó, hãy tính chiều cao của trình bao bọc:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}