在前端人員之間有一個普遍存在的問題，如何讓一個div的高度自動延伸到瀏覽視窗100%的高度。有一些不同的方法可以實現，但是，我想出了一個我個人比較喜歡的方法。今天，我將於你分享一下。
我對你是不瞭解的，但我試圖弄明白如何讓我的布局垂直展開到頁面的100％高度，這樣一個令我沮喪的問題。我想讓div結構自動延伸，但是它就是不能自動延伸，現在，為什麼他不能這樣那？今天我將與你一起分享這個解決方案。
比方說你有如下html代碼文檔
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><title>CSS 100% Height</title><link rel="stylesheet" type="text/css" href="style.css" /></head><body><div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div></body></html>
同時你有如下css樣式檔案
body {margin: 0;padding: 0;}#content {background: #EEE;border-left: 1px solid #000;border-right: 1px solid #000;padding: 0 20px 0 20px;margin: auto;font: 1.5em arial, verdana, sans-serif;width: 960px;height: 100%;}
這就給了你這個樣本檔案。正如你所看到的，頁面的content容器不能自動延伸到頁面的整個高度。儘管我們給css樣式檔案添加了”height:100%”。為什麼那？
讓我給你另外一種方式來思考HTML，幾乎每一個HTML檔案都有一組容器彼此包含的。因此，在我們的頁面裡面，首先我們有一個<html>容器，其次<body>容器包含在<html>裡，最後才是<div id=”content”></div>容器包含在裡面。當我們往任何一個容器裡面放置內容的時候，這個容器和包含此容器的父容器盒子都會自動延伸的，從而能容下這些新添加的內容。也就是說，當我們往<div id=”content”></div>容器盒子添加文字內容的時候，這個div容器盒子是自動延伸的，包含這個div容器的父容器盒子（body與html）依次是自動延伸的。
當我們給<div id=”content”></div>容器定義“height:100%”樣式時，我們現在做的就是告訴它讓其高度延伸到包含它的父容器的整個高度。在這個例子裡，這個div容器被包含在<body>容器裡面，所以<div id=”content”></div>就是body的整個高度。好了，body容器是如何延伸增長的那？它就像<div id=”content”></div>的高度一樣，因為我們從來沒有告訴它如何增高的。所以當我們給<div id=”content”></div>定義“height：100%”樣式的時候，我們僅僅告訴了它自己。
解決此問題，我需要告訴<body>容器變的大一些兒，同時<html>容器也會出現同樣的問題，它應該與<body>一樣大。所以為瞭解決這個問題（讓<div id=”content”></div>容器自動延伸到整個頁面的高度）我們需要告訴<html>和<body>容器高度應為整個頁面的高度。
如果我們修改我們的css檔案，如下所示
html {min-height: 100%;_height:100%;}body {margin: 0;padding: 0;min-height: 100%;_height:100%;}#content {background: #EEE;border-left: 1px solid #000;border-right: 1px solid #000;padding: 0 20px 0 20px;margin: auto;font: 1.5em arial, verdana, sans-serif;width: 960px;min-height: 100%;_height:100%;}
就是這樣，這裡是我們現在的最終效果。這個content容器現在已經能自動延伸到整個頁面的高度了。
中文原文：小技巧：css100%高度
英文原文：Quick Tip：CSS 100% Height
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
