如何創建一個內容div（1）延伸到視口底部，（2）具有20px的邊距？

我想創建：如何創建一個內容div（1）延伸到視口底部，（2）具有20px的邊距？

+--------------+ 
| 20px margin | 
| +--------+ | 
| |  | | 
| | Faux | | 
| |  | | 
| +--------+ | 
|    | 
+--------------+

外廣場是瀏覽器窗口。我需要創建一個延伸至底部，即使是沒有內容的網頁，但網頁應該由一個20像素的保證金包圍：

<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <style> 
     * { margin: 0; padding: 0; } 

     html, body { height: 100%; background: #ccc; } 
     body { margin: 20px; } 

     #wrapper { width: 100%; background: #fff; min-height: 100%; } 
     #header { height: 80px; } 
     #faux { height: 100%; } 
    </style> 
    </head> 
    <body> 
    <div id="wrapper"> 
     <div id="header">Header</div> 
     <div id="faux">Faux</div> 
    </div> 
    </body> 
</html>

然而，這個代碼給我一個垂直滾動條。這可能是由於IE 10計算的高度爲100% + 20px，但我需要它爲，這樣就沒有滾動條，頁面的內容不會超過瀏覽器的視口。我在#wrapper上嘗試了20px的負邊距，但這不起作用。

我該如何擺脫垂直滾動條？

順便說一句：我對這個階段的頁面構建方式漠不關心。 #header現在是#faux之外，但如果它更有意義，把它放在裏面#faux（或者，如果有必要的設計工作），那麼請重新排列的div :-)

任何幫助，不勝感激！

來源

2013-11-27 Pr0no

要避免垂直滾動，您可以使用填充而不是邊距。只需更換保證金：20像素的填充：20像素，並添加箱尺寸：邊界盒

body { padding: 20px; box-sizing: border-box; }

如果你不知道什麼箱尺寸呢，看看這裏 http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

的身高100％在這種情況下不起作用，要做到這一點，你會需要一些JavaScript。如果妳使用jQuery的這條線是不夠

$("#faux").height($("#wrapper").height() - 80);

你可以看到它的工作here

來源

2013-11-27 10:34:41

感謝您的回覆，但您的解決方案對我無效。我現在感到困惑。 '＃wrapper'不應該是'height（） - 80'嗎？所以'$（「＃wrapper」）。height（$（「body」）。height（） - 80）;'？但是，這也行不通。您的洞察力請:-) – Pr0no

#header div在#wrapper內，所以#wrapper可以獲得100％的高度..一旦#header有80px，您需要calc到#faux才能獲得剩餘的。這個答案是否清楚？ –

我確定這是我，但我可以請你給我看一個只有1格的工作示例嗎？所以就像它在開篇文章中所說的那樣：1個div（稱爲#faux或其他），與視口一樣寬（減去20px的左右邊距），至少與視口（上下20px）一樣高沒有滾動條（除非#faux中的內容會強制#faux div長到需要垂直滾動條）。我認爲我在這裏誤解了一些東西，所以儘可能地拋出可能是最好的:-)抱歉打擾你。 – Pr0no

body { padding: 20px; }

身體scretches到你的整個屏幕和保證金的是境外所以他們會在每邊20個像素scretch它。你想要一個'內部'的差異，所以你使用填充。 :)

編輯： 上搜索這個我發現這一點：CSS 100% height with padding/margin，這可能是您的解決方案呢？

來源

2013-11-27 10:33:37 MikaldL

良好的通話 - 但填充100％高度的身體還是會給予一個垂直滾動條，它也將給出一個水平一個由於寬度是100％。橫向可以通過不向div添加寬度來解決，因爲默認情況下，div伸展到最大可用寬度。 – SidOfc

是的，我忘記了在一個元素上填充內容仍然伸出去，以便在內部有所需的空間。 – MikaldL

首先，你的header應該是百分比，因爲你的faux是百分比。否則，達到100％將會很困難。

其次，你需要指定overflow: hidden;給你的身體。

body { padding: 20px; overflow: hidden; } 
#header { height: 20%; } 
#faux { height: 80%; }

來源

2013-11-27 10:33:56 Abhitalks

感謝您的回覆，但不幸的是這並不能解決問題。 – Pr0no

如何創建一個內容div（1）延伸到視口底部，（2）具有20px的邊距？

回答

相關問題