DIV - 力量高度100％= /頁面高度？

我正在嘗試設置一個設計，這是一個很大的問題。這裏是供參考的網站;DIV - 力量高度100％= /頁面高度？

http://throwbackhero.com/index1.php

的問題是，我設置身體高度：100％;在樣式表和#wrapper div中。高度超出當前頁面高度，並且不考慮可能導致溢出的其他div。

我想，即使瀏覽器的垂直尺寸發生變化，空白頁面也會成爲瀏覽器的大小，但內容/包裝div會收縮。

可以這樣做嗎？

編輯

好了，所以顯然我原來的問題是極其混亂。這是一張圖片;

因此，在圖一（左）是問題。身高100％;在包裝和內容的div，它創造了這個壞男孩。我希望它看起來像圖片，其中白色/灰色區域根據瀏覽器的大小增長/收縮...

來源

2012-03-16 Konzine

你的問題確實含糊不清。你的意思是#wrapper是瀏覽器的大小嗎？ – SMacFadyen 2012-03-16 09:43:25

[CSS 100％height with padding/margin]可能的重複（http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin） – 2012-03-16 09:48:12

嘗試使用min-height:100%來解決您的問題。（儘管我沒有完全理解你的問題;））

來源

2012-03-16 09:46:30 Christoph

將overflow:auto加到wrapper元素。

來源

2012-03-16 09:52:19 MakuraYami

給身體，HTML &主DIV height 100%。像這樣寫：

body,html{height:100%;} 

.parent{ 
    min-height:100%; 
    width:400px; 
    margin:0 auto; 
    background:red; 
}

入住這http://jsfiddle.net/3VUGt/

來源

2012-03-16 09:55:12 sandeep

好吧，這是好的，直到我們得到第二個div涉及，http://jsfiddle.net/3VUGt/5/。試試看。看看它是如何造成溢出問題，而不僅僅是頁面高度的100％？我想避免這種情況。 – Konzine 2012-03-16 10:44:41

沒有針對此問題沒有完整的CSS的解決方案。這個CSS「問題」已爲人所知多年。由於多年來CSS的功能不斷增強，我認爲現在可能會有一個完整的CSS解決方案。但是，唉，沒有。我已經嘗試了很多東西，並且已經搜索到了高和低，並且問題依然存在。

據我所知，只有3種解決方案不需要第三方庫：絕對定位，人造柱（雙色重複背景）和JS。

唯一吸引我的兩個解決方案是：人造色彩列和JS。我更喜歡JS解決方案，因爲它更多地使用CSS。使用JS，如果您想稍後更改列寬或顏色，則不必重新處理背景圖像。這是一個更具適應性和可重複使用的解決方案。我可以看到創建虛擬列的唯一優點是，如果客戶端禁用JS，則您的佈局不會中斷。

JS解決方案（無需包裝）：https://jsfiddle.net/Kain52/uec9cLe4/

var side1 = document.getElementsByTagName('main')[0]; 
var side2 = document.getElementById('mainMenu'); 
var side1Height = side1.clientHeight; 
var side2Height = side2.clientHeight; 
if(side2Height < side1Height) { side2.style.height = side1Height + "px"; } 
else { side1.style.height = side2Height + "px"; }

JS解決方案（需要包裝）：https://jsfiddle.net/Kain52/7udh55zq/

var wrapperHeight = document.getElementById('innerWrapper').clientHeight; 
document.getElementsByTagName('main')[0].style.height = wrapperHeight + "px"; 
document.getElementById('mainMenu').style.height = wrapperHeight + "px";

說明：如果你使用一個div包裝，那麼你可以把它分配給包裝的高度。如果你不使用包裝，那麼你可以將最短邊的高度設置爲最長邊的高度。如果你知道你身邊的菜單欄將永遠是比你的內容更短，那麼你只需要兩行代碼：

var contentHeight = document.getElementsByTagName('main')[0].clientHeight; 
document.getElementById('mainMenu').style.height = contentHeight + "px";

來源

2015-08-08 03:08:50 XSapien

最簡單的方法就是使用CSS：

height: 100vh;

在哪裏VH '代表瀏覽器窗口的垂直高度。響應瀏覽器和移動設備的大小調整。

來源

2015-10-13 03:43:24 alchuang

保存我的屁股！在每個現代移動設備和非瀏覽器中得到很多支持！ +1 – 2016-04-20 11:29:30

-1

如果您可以在網頁上每毫秒運行一段JavaScript，並且所討論的白色區域上方的內容將總是具有相同的像素高度，那麼您可以嘗試一下沿着這條線......

bodyLeadingFill = // put the size taken up by everything above the white div, 
        // including margin, padding, border, etc 
function resizeElement(){ 
    document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here *//100) + "%"; 
} 
window.setTimeout(resizeElement, 0);

當然，這是假定白色框上方的內容將總是相同的大小，不管窗口的字體或操作系統或大小。

我自己實際上沒有測試過這個，但是這個概念應該可行。注意那些說明在哪裏放置一些信息的評論。

來源

2015-10-28 02:15:22 MineAndCraft12

DIV - 力量高度100％= /頁面高度？

回答

相關問題