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工作示例.

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

Answer 1

同样设置html标签.这样就不需要奇怪的位置攻击.

html, body {height: 100%}

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>

Answer 3

尝试将体型设置为:

body { position:relative;}

它对我有用