我正在開發此website，我希望右側邊欄具有100％的高度。CSS div 100％高度

body { 
    height: 100%; 
    min-height: 100%; 
    position: relative; 
} 

mydiv { 
    height: 100%; 
    min-height: 100%; 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    width: 290px; 
}

我已經讀了很多答案，尤其是這（Prestaul答案）： Setting 100% height on an absolutely positioned element when the content expands past the window size。

但對我來說這個伎倆不起作用，小提琴例句也不起作用！

This is the jsfiddle working example.

This is the same code that doesn't work.

來源

2013-01-31 T1T

你的意思是在頂部的幾個像素的空白？設置你的身體的邊緣爲'0'，它應該工作。 – hsan

嘗試身體樣式設置爲：

body { position:relative;}

它爲我工作

來源

2013-01-31 15:13:58

我已經做到這一點，你可以閱讀， http://aquilewp.webkolm.com/grafica/prova.html這裏你可以看到的jsfiddle例如把我的網站...它不工作 – T1T

相反，您已將body style設置爲'body {height：100％;最小高度：100％; position：relative;}'我建議你應該將它設置爲'body {position：relative;}' –

非常感謝！有用！！ – T1T

設置HTML標籤了。這樣就不需要奇怪的位置了。

html, body {height: 100%}

來源

2013-01-31 15:07:29 MildlySerious

我想知道爲什麼這不是選擇的答案？然而，將身體位置設置爲'相對'並不是一個好習慣。 –

我還有一個建議。當你想讓myDiv擁有100％的高度時，在你的div上使用這些額外的3個屬性：

myDiv { 
    min-height: 100%; 
    overflow-y: hidden; 
    position: relative; 
}

這應該做的工作！

來源

2013-11-13 07:49:18

Flexbox的解決方案

注：如果需要，您supported browsers添加柔性供應商前綴。

html { 
 
    height: 100%; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    display: flex; 
 
} 
 

 
.Content { 
 
    flex-grow: 1; 
 
} 
 

 
.Sidebar { 
 
    width: 290px; 
 
    flex-shrink: 0; 
 
}

<div class="Content" style="background:#bed">Content</div> 
 
<div class="Sidebar" style="background:#8cc">Sidebar</div>

來源

2017-11-13 22:47:10

CSS div 100％高度

回答

Flexbox的解決方案

相關問題