问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

我想将我的网页转换为四个部分，一个水平和三个垂直。横截面没问题，但是竖截面有两个问题：

  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 。

原文由 Gaurav Mahindra 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcss
阅读 723
2 个回答
得票最新
社区维基
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. left pane should be float: left with width: 25% , right pane float: right width: 25% and middle pane float: left or float: right 与 width: 50%

就这样！

2022 年更新！

这是通过 flex 更新的版本：

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

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

.leftpane {
  width: 25%;
  height: 100vh;
  background-color: rosybrown;
}

.middlepane {
  width: 50%;
  height: 100vh;
  background-color: royalblue;
}

.rightpane {
  width: 25%;
  height: 100vh;
  background-color: yellow;
}

body {
  margin: 0!important;
}

.d-flex {
  display: flex;
}

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

原文由 Pedram 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

在这里 检查。您将获得将屏幕分成三列的最简单代码。

HTML文件

<body>
  <div class="class1" style="background-color:#9BCB3B;">
    <p>Hi</p>
  </div>
  <div class="class2" style="background-color:#1AB99E;">
    <p>Aditya</p>
  </div>
  <div class="class3" style="background-color:#F36F25;">
    <p>This is Working!</p>
  </div>
</body>

文件

body {
  width: 100%;
  float: left;
}

.class1,
.class2,
.class3 {
  width: 33.33%;
  float: left;
  height: 100px;
}

p {
  padding-top: 25px;
  text-align: center;
}

原文由 Adittya Verma 发布，翻译遵循 CC BY-SA 3.0 许可协议

查看全部 2 个回答
推荐问题