我正在开发此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的解决方案

相关问题