如何将页面分为三个垂直部分？

Question

我想将我的网页转换成四个部分,一个是水平的,三个是垂直的.水平部分没问题,但垂直部分有两个问题:

1. 它们没有填满整个屏幕高度.
2. 第三部分与第二部分重叠近10或20像素.

这是我的CSS:

body{
    width: available;
    height: available;
}

.container{
    width: available;
    height: available;
}

.leftpane{
    width: 25%;
    min-width: 350px;
    height: available;
    min-height: 400px;
    float: left;
    background-color: rosybrown;
    border-collapse: collapse;
}

.middlepane{
   width: 50%;
   min-width: 800px;
   height: available;
   min-height: 650px;
   float: left;
   background-color: royalblue;
   border-collapse: collapse;
}

.rightpane{
    width: available;
    height: available;
    position: relative;
    margin-left: 75%;
    background-color: yellow;
    border-collapse: collapse;
}

.toppane{
    width: available;
    height: 100px;
    border-collapse: collapse;
    background-color: #4da6ff;
}

这是HTML页面:

<div class="container">
            <div class="toppane">Test Page</div>
            <div class="leftpane"><h1>Test Page</h1></div>
            <div class="middlepane">Test Page</div>
            <div class="rightpane"><h1>Test Page</h1></div>
</div>

我的输出是这样的:

我希望它是这样的:

这是一个jsfiddle.

Answer 1

首先,width: available是无效的财产.如果你想使用你应该设置的所有可用空间width: 100%.无论如何,为了解决你的问题,你height: 100%也应该使用body和html.看这个例子:

body, html {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;
}

.leftpane {
    width: 25%;
    height: 100%;
    float: left;
    background-color: rosybrown;
    border-collapse: collapse;
}

.middlepane {
    width: 50%;
    height: 100%;
    float: left;
    background-color: royalblue;
    border-collapse: collapse;
}

.rightpane {
  width: 25%;
  height: 100%;
  position: relative;
  float: right;
  background-color: yellow;
  border-collapse: collapse;
}

.toppane {
  width: 100%;
  height: 100px;
  border-collapse: collapse;
  background-color: #4da6ff;
}

<div class="container">
  <div class="toppane">Test Page</div>
  <div class="leftpane">
    <h1>Test Page</h1></div>
  <div class="middlepane">Test Page</div>
  <div class="rightpane">
    <h1>Test Page</h1></div>
</div>

注意:

1.我删除了所有min-width与min-height你不需要这些在这种情况下.

2.使用height: 100%你的元素,你也应该设置这个上body和html标签.

3.左窗格中应该float: left有width: 25%,右边的窗格float: right width: 25%和中间窗格float: left或float: right与width: 50%

就这样!