css - 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 答案）： Setting 100% height on an absolute Position element when the content expand the window size。

但对我来说，这个技巧不起作用，小提琴的例子也不起作用！

这是 jsfiddle 工作示例。

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

Answer 1

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

html, body {height: 100%}

Answer 2

尝试将正文样式设置为：

body { position:relative;}

它对我有用

Answer 3

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>

Answer 4

我还有一个建议。当您希望 myDiv 的高度为 100% 时，请在您的 div 上使用这些额外的 3 个属性：

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

那应该做的工作！

Answer 5

这个策略最适合我：

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

它创建一个全屏容器。