html - 如何设置 <div> 高度而不泄漏？

Question

我将我的页面设计为: 固定的顶部和侧面菜单，主页可根据内容滚动，容器内的所有内容。 我不知道如何阻止容器泄漏底部的背景。我试过 min-height: 100%, height: calc(100vh-50px)，但这些都不行。 到目前为止我有什么

您可以在 https://jsfiddle.net/0afeh6cb/ 中看到背景泄漏

我怎样才能摆脱它？

html,
body {
  margin: 0px;
  padding: 0px;
  background-color: green;
}

#container {
  background-color: #fff;
  position: relative;
  width: 1000px;
  min-height: calc(100vh - 50px);
  margin: 0px auto 0px auto;
}

#topMenu {
  position: fixed;
  top: 0px;
  margin: 0px;
  padding: 5px 10px 5px 10px;
  background-color: #e0e0e0;
  width: 980px;
  height: 40px;
}

#sideMenu {
  position: fixed;
  top: 50px;
  margin: 0px;
  padding: 5px;
  background-color: #c0c0c0;
  width: 180px;
  height: 100%;
}


/* ------------- Container ------------- */

#main {
  margin-top: 50px;
  margin-left: 190px;
  width: 790px;
  padding: 10px;
  background-color: #f0ffff;
}

#footer {
  margin-left: 190px;
  width: 790px;
}

<div id="container">
  <div id="topMenu">
    <p>Top Menu</p>
  </div>

  <div id="sideMenu">
    <h3>Side menu</h3>
  </div>

  <div id="main">
    <h1>My content here</h1>
  </div>

  <div id="footer">
    <p>Footer</p>
  </div>
</div>

Answer 1

我希望这会有所帮助:

body,
#container {
  height: 100vh;
}

#container {
  /*height: calc(100vh - 50px);*/ You can remove this line
}