小编Gau*_*dra的帖子

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

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

  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;
}
Run Code Online (Sandbox Code Playgroud)

这是HTML页面:

<div class="container">
            <div class="toppane">Test Page</div>
            <div class="leftpane"><h1>Test …
Run Code Online (Sandbox Code Playgroud)

html css

6
推荐指数
1
解决办法
3万
查看次数

标签 统计

css ×1

html ×1