在固定div下安装Div，高度100％，无溢出

Question

我有一个简单而愚蠢的问题。我试图在另一个div height:100%下使用div而不产生溢出，只是适合身体的高度。

示例无效：https://jsfiddle.net/L38cea2s/1/

HTML：

＆＃13;

＆＃13;

<div id="top"></div>
<div id="left"></div>
<div id="right"></div>

＆＃13;

＆＃13;

＆＃13;

CSS：

＆＃13;

＆＃13;

html, body {
  height:100%;
}

#top {
  width:100%;
  height:50px;
  background-color:red;
}

#left {
  width:70%;
  height:100%;
  background-color:green;
  float:left;
  display:block;
}

#right {
  width:30%;
  height:100%;
  background-color:yellow;
  float:right;
  display:block;
  position:absolute;
}

＆＃13;

＆＃13;

＆＃13;

我不知道为什么在jsfiddle上我的div不会占据宽度的100％。但正如你在示例中看到的那样，溢出是因为在两个div之上还有另一个div。我不想要overflow:hidden。

谢谢！

编辑：

我正在寻找这样的事情：（任何div都落后于任何div）

Answer 1

这个jQuery可能有帮助

var body = $('body').height();
var top = $('#top').height();
var workoutheight = body - top;
$('#left').css('height',workoutheight);
$('#right').css('height',workoutheight);

https://jsfiddle.net/L38cea2s/7/

Answer 2

我做了一个仅限CSS的解决方案

从JSFiddle获取更新的标记

CSS

body {
    margin: 0;
}
.sidebar {
    width: 20%;
    float: left;
    background: #B2B200;
    height: 100vh;
}
.main-content {
    width: 80%;
    float: left;
    height: 100%;
}
.top {
    height: 20%;
    width: 100%;
    background: #26FF5C;
    height: 20vh;
}
.left {
    width: 70%;
    float: left;
    background: #4DFFFF;
    height: 80vh;
}
.right {
    width: 30%;
    float: left;
    background: #8500B2;
    height: 80vh;
}

https://jsfiddle.net/aq8awrnz/

Answer 3

您也可以在CSS中使用calc ...示例：

#left {
  height: 100vh;
  width: 300px;
  float:left;
}
#top {
  height: 45px;
  width: calc(100vw - 300px); // or calc(100% - 300px)
  margin: 0 0 0 300px;
}
#right {
  height: calc(100vh - 45px);
  width: 30%;
  float: right;
}
#middle {
  height: calc(100vh - 45px);
  margin: 0 30% 0 300px;
}

Answer 4

最好是在考虑如何将所有内容堆叠在一起时使用分层。我在这里更新了你的jsFiddle。

https://jsfiddle.net/L38cea2s/8/

html, body {
  height:100%;
  margin: 0;
}

#top {
  width:100%;
  height:50px;
  top: 0;
  background-color:red;
  position: absolute;
}

#left {
  width:70%;
  height:100%;
  top: 0;
  background-color:green;
  position: absolute;
}

#right {
  width:30%;
  height:100%;
  top: 0;
  background-color:yellow;
  position: absolute;
}