将div一直拉伸到底部而不会溢出

Question

任何人都可以帮助我填充父容器的宽度并将其一直拉伸到底部而不会溢出。这是jsfiddle

http://jsfiddle.net/vn50gka2/1/#&togetherjs=p1VVmrhCtA

.toolbar {
  position: absolute;
  height: 50px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: green;
}

.layout {
  height: 100%;
  width: 400px;
  margin: 60px auto
}

.container {
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: red;
}

容器是我要修复的div。工具栏和布局无法更改。而且也只是因为我想重用容器，我真的希望不要使用任何计算或任何硬编码的高度数字。.我不知道这是否可能

Answer 1

$(document).ready(function(){
var toolbarheight = $(".toolbar").height();
var windowheight  = $(this).height();
var divheight =  windowheight - toolbarheight -10;
console.log(divheight)

$(".mydiv").height(divheight);
})

*{
margin:0;
paddin:0;}
.toolbar {
  position: fixed;
  height: 50px;
  width: 100%;
  top: 0;
  left: 0;
  background-color: green;
}


.layout {
  margin-top: 60px;
  height: 100%;
  width: 100%;
}

.container {
  width: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toolbar">
  Toolbar
</div>
<div class="layout">
  <div class="container mydiv">
    <div>
      stretch to bottom without overflow
    </div>
  </div>
</div>

使用jquery为您的div设置此高度！ 添加-10是您的工具栏高度和布局顶部边距之间的差异！