Question

我将页面设计为：固定的顶部和侧面菜单，可根据内容滚动的主页以及容器中的所有内容。我不知道如何阻止容器泄漏底部的背景。我尝试了最小高度：100％，高度：calc（100vh-50px），但是这些都不起作用。我到目前为止所拥有的

中看到背景泄漏

我该如何摆脱呢？

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
}

Answer 2

从#topMenu中删除固定位置。

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

从#container和计算出的高度中删除位置，并将height的{{1}}设置为100vh，以完全防止背景出血。

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

从#main容器中移除边距顶部。

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

Answer 3

请如下更改容器类css：

100vh始终取其父级的总高度。

#container {
    background-color: #fff;
    position: relative;
    width: 1000px;
    _min-height: calc(100vh - 50px);//remove this line
    height: 100vh; //Set this height.
    margin: 0px auto 0px auto;
}

如何设置<div>高度而无泄漏？

3 个答案: