在前端人員之間有乙個普遍存在的問題，如何讓乙個div的高度自動延伸到瀏覽視窗100%的高度。有一些不同的方法可以實現，但是，我想出了乙個我個人比較喜歡的方法。今天，我將於你分享一下。
我對你是不了解的，但我試圖弄明白如何讓我的布局垂直拉伸到頁面的100％高度，這樣乙個令我沮喪的問題。我想讓div結構自動延伸，但是它就是不能自動延伸，現在，為什麼他不能這樣那？今天我將與你一起分享這個解決方法。
比方說你有如下html**文件
提示：您可以先修改部分**再執行
同時你有如下css樣式檔案
css code複製內容到剪貼簿
這就給了你這個示例檔案。正如你所看到的，頁面的content容器不能自動延伸到頁面的整個高度。儘管我們給css樣式檔案新增了」height:100%」。為什麼那？
讓我給你另外一種方式來思考html，幾乎每乙個html檔案都有一組容器彼此包含的。因此，在我們的頁面裡面，首先我們有乙個容器，其次
容器包含在裡，最後才是
容器包含在裡面。當我們往任何乙個容器裡面放置內容的時候，這個容器和包含此容器的父容器盒子都會自動延伸的，從而能容下這些新新增的內容。也就是說，當我們往
容器盒子新增文字內容的時候，這個div容器盒子是自動延伸的，包含這個div容器的父容器盒子（body與html）依次是自動延伸的。
當我們給
容器定義「height:100%」樣式時，我們現在做的就是告訴它讓其高度延伸到包含它的父容器的整個高度。在這個例子裡，這個div容器被包含在容器裡面，所以
就是body的整個高度。好了，body容器是如何延伸增長的那？它就像
的高度一樣，因為我們從來沒有告訴它如何增高的。所以當我們給
定義「height：100%」樣式的時候，我們僅僅告訴了它自己。
解決此問題，我需要告訴
容器變的大一些兒，同時容器也會出現同樣的問題，它應該與一樣大。所以為了解決這個問題（讓
容器自動延伸到整個頁面的高度）我們需要告訴和容器高度應為整個頁面的高度。
如果我們修改我們的css檔案，如下所示
css code複製內容到剪貼簿
就是這樣，這裡是我們現在的最終效果。這個content容器現在已經能自動延伸到整個頁面的高度了。
中文原文：小技巧：css100%高度
英文原文：quick tip：css 100% height
本文標題: css設計網頁小技巧 100%的高度
本文位址: /web/css/29707.html
Javascript設計網頁中的下拉列表
我們就可以開始在網頁中製作下拉列表了。我們在網頁的頂部放置乙個區域，用於顯示主選單條，每乙個主選單條作為乙個超連結橫向置於該區域中，當然除非選單項沒有子選單，一般情況下這裡的超連結不指向任何位址，只用它來啟用子選單。區域的格式見程式1。code 選單項一 選單項二 接著，我們根據主選單條的個數定義相...
CSS設計網頁時的一些常用規範
一 注釋書寫規範 1 行間注釋 直接寫於屬性值後面，如 search 2 整段注釋 分別在開始及結束地方加入注釋，如 搜尋條 search 搜尋條結束 二 樣式屬性 縮寫 1 不同類有相同屬性及屬性值的縮寫 對於兩個不同的類，但是其中有部分相同甚至是全部相同的屬性及屬性值時，應對其加以合併縮寫，特別...
CSS設計網頁時的一些常用規範
css命名規範 一 檔案命名規範 全域性樣式 global.css 框架布局 layout.css 字型樣式 font.css 鏈結樣式 link.css 列印樣式 print.css 二 常用類 id命名規範 常用類的命名應盡量以常見英文單詞為準，做到通俗易懂，並在適當的地方加以注釋。對於二級類 ...