左侧边栏

Question

我尝试使用包含顶部和底部的左侧边栏创建HTML / CSS布局。

容器应该是页面的整个高度以及更多。

侧栏内顶部的高度应介于容器高度的0到最大值的40％之间，具体取决于该部分的内容。

底部的高度应该是容器内可用高度的剩余部分。

如果每个部分都溢出内容，则三个部分都应该有一个垂直滚动条。

问题出在侧边栏的底部。

下图显示了布局：

＆＃13;

＆＃13;

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container:before,
.container:after {
  content: "";
  display: table;
} 
.container:after {
  clear: both;
}
.container {
   height: 100vh;
  overflow: hidden;
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.left {
  float:left;
  min-width: 200px;
  height:100%;
  background-color: #eee;
}
.right {
  min-width: 200px;
  height:100%;
  background-color: #ddd;
  overflow: auto;
}
.top {
  max-height: 20%;
  background-color: #ee4400;
  overflow: auto;
}
.bottom {
  background-color: #ff0000;
  overflow: auto;
  max-height: 80%;
}
ul {
  margin: 0;
  padding: 0 30px ;
}

＆＃13;

<div class="container">
  <div class="left">
    <div class="top">
       <ul>
        <!-- Enter more list elements to grow this section -->
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
    <div class="bottom">
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li> 
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
  </div> 
  <div class="right">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

在将.left的背景颜色更改为.bottom的背景颜色后，获得我认为您的想法。或者，您可以将.top的高度设置为20％，将.bottom的高度设置为80％，但这不会给您完全相同的结果

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container:before,
.container:after {
  content: "";
  display: table;
} 
.container:after {
  clear: both;
}
.container {
   height: 100vh;
  overflow: hidden;
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.left {
  float:left;
  min-width: 200px;
  height:100%;
  background-color: red;
}
.right {
  min-width: 200px;
  height:100%;
  background-color: green;
  overflow: auto;
}
.top {
 max-height: 20%;
  background-color: yellow;
  overflow: auto;
}
.bottom {
  background-color: red;
  overflow: auto;
  max-height: 80%;
}
ul {
  margin: 0;
  padding: 0 30px ;
}

<div class="container">
  <div class="left">
    <div class="top">
       <ul>
        <!-- Enter more list elements to grow this section -->
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
    <div class="bottom">
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li> 
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
  </div> 
  <div class="right">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container:before,
.container:after {
  content: "";
  display: table;
} 
.container:after {
  clear: both;
}
.container {
   height: 100vh;
  overflow: hidden;
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.left {
  float:left;
  min-width: 200px;
  height:100%;
  background-color: #eee;
}
.right {
  min-width: 200px;
  height:100%;
  background-color: #ddd;
  overflow: auto;
}
.top {
  max-height: 20%;
  background-color: #ee4400;
  overflow: auto;
}
.bottom {
  background-color: #ff0000;
  overflow: auto;
  max-height: 80%;
}
ul {
  margin: 0;
  padding: 0 30px ;
}

<div class="container">
  <div class="left">
    <div class="top">
       <ul>
        <!-- Enter more list elements to grow this section -->
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
    <div class="bottom">
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li> 
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
  </div> 
  <div class="right">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>

Answer 2

我设法通过使用左侧边栏中的flexbox列来解决此问题，该列非常有效。

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
.container:before,
.container:after {
  content: "";
  display: table;
} 
.container:after {
  clear: both;
}
.container {
   height: 100vh;
  overflow: hidden;
	zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
.left {
  float:left;
  min-width: 200px;
  height:100%;
  background-color: #eee;
  display: flex;
  flex-direction: column;
}
.right {
  min-width: 200px;
  height:100%;
  background-color: #ddd;
  overflow: auto;
}
.top {
  max-height: 20%;
  background-color: #ee4400;
  overflow: auto;
  flex-shrink: 0;
}
.bottom {
  background-color: #ff0000;
  overflow: auto;
  flex-grow: 1;
}
ul {
  margin: 0;
  padding: 0 30px ;
}

<div class="container">
  <div class="left">
    <div class="top">
       <ul>
        <!-- Enter more list elements to grow this section -->
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
    <div class="bottom">
      <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li> 
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
      </ul>
    </div>
  </div> 
  <div class="right">
    <ul>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </div>
</div>