CSS div 100% 高度

Question

我正在开发这个网站，并希望右侧边栏具有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的回答): 在内容超过窗口大小时，将绝对定位的元素高度设置为100%。

但是对于我来说，这种技巧不起作用，甚至这个示例也无法正常工作!

这是可以正常工作的jsfiddle示例。

这是相同的代码，但不起作用。

- T1T

---

你是指顶部的几个像素的空白吗？将你的body边距设置为0，它应该可以解决。 - hsan

我希望你的问题更像是“绝对定位元素的CSS div 100%高度”。这是一个热门搜索结果，但你的情况比问题更具体。我就像一只飞蛾扑向错误的火焰。 - Erik Hermansen

Answer 1

也要设置html标签。这样就不需要奇怪的位置修补了。

html，body {height: 100%}

- MildlySerious

---

我想知道为什么这不是被选中的答案？将body位置设置为'relative'并不是一个好的做法..!! - Clain Dsilva

我尝试了这个方法，它非常有效。我原本想为div设置最小高度，但这会创建滚动条。这个解决方案最为优雅。 - Abraham Luna

Answer 2

CSS Flexbox旨在简化创建这些类型的布局。

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>

- Reggie Pinkham

Answer 3

尝试将 body 样式设置为：

body { position:relative;}

它对我有效

- J Max

---

我已经做了这个，你可以看到， http://aquilewp.webkolm.com/grafica/prova.html 在这里你可以看到放在我的网站上的jsfiddle示例...但它不起作用。 - T1T

相反地，您已将body样式设置为body {height:100%; min-height:100%; position:relative;}。我建议您将其设置为body { position:relative;}。 - J Max

Answer 4

这个策略对我来说最有效：

div.full {
  width: 100wh;
  height: 100vh;
}

它创建了一个全屏容器。

- Filip Górny

Answer 5

我有另一个建议。当你想让myDiv的高度为100%时，在你的div上使用这3个额外的属性：

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

那应该可以完成工作！

- Lars Ljungvist