Question

我试图制作一个固定的导航栏和侧面菜单，但是一个可滚动的内容窗格。

查看我的codepen - http://codepen.io/anon/pen/jryKvY

但是，我的内容窗格背景在滚动时不会填满溢出内容。

如果不将 if (condition1) action1; else if (condition2) ; // (do nothing) else if (condition3) action3; else if (condition4) ; // (do nothing) else if (condition5) action5; else action99; 定义到我的内容窗格div，我应该如何修复此问题。

＆＃13;

overflow: scroll

＆＃13;

html {
  box-sizing: border-box;
}
*,
*::after,
*::before {
  box-sizing: inherit;
}
.container {
  height: 100%;
  position: static;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.container::after {
  clear: both;
  content: "";
  display: block;
}
.container .navbar {
  width: 100%;
  height: 50px;
  background: grey;
  position: fixed;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.container .contentpane {
  background: lightsalmon;
  position: absolute;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 250px;
}
.container .sidemenu {
  background: lightblue;
  width: 250px;
  position: fixed;
  z-index: 2;
  top: 50px;
  right: 0;
  bottom: 0;
  left: 0;
}

＆＃13;

Answer 1

您可以在html或body元素上设置背景，例如

body {
  background: lightsalmon;
}

它将使背景覆盖整个视口，导航栏和侧边栏的背景位于其顶部，因此它看起来只设置内容面板。即使内容较短或在较大的屏幕上也是如此，换句话说，当不需要滚动条时。

<强> jsFiddle

Answer 2

删除之前的contentpanel并尝试此操作

.container > .contentpane {
    background: lightsalmon;
    top: 29px;
    width:auto;
    height:auto;
    position:relative;
    margin-left:242px;/*Set that equal to or less then the width of sidemenu*/


}

CSS导航栏，侧边栏和内容窗格

2 个答案: