Html 如何将页面分成三个垂直部分？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36662712/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I divide a page in three vertical sections?
提问by Gaurav Mahindra
I want to convert my web page into four section, one horizontal and three vertical. The horizontal section is okay, but there are two issues with vertical sections:
我想将我的网页转换为四部分，一横三竖。水平段还可以，但是垂直段有两个问题：
- They are not filling the complete screen height.
- The third section is overlapping with second section by nearly 10 or 20 pixels.
- 它们没有填满整个屏幕高度。
- 第三部分与第二部分重叠近 10 或 20 个像素。
Here is my CSS:
这是我的 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;
}
And this is the HTML page:
这是 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>
My output is this:
我的输出是这样的：
And I want it to be like this:
我希望它是这样的：
Here is a jsfiddle.
这是一个 jsfiddle。
回答by Pedram
First, width: availableis not valid property. if you want to use all available space you should set width: 100%. anyway, for solving your issue you should use height: 100%also for bodyand html. see this example:
首先，width: available是无效的财产。如果你想使用所有可用空间，你应该设置width: 100%. 无论如何，为了解决您的问题，您还应该使用height: 100%forbody和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>Note:
笔记：
1.I removed all min-widthand min-heightyou don't need these in this case.
1.我删除了所有min-width，min-height在这种情况下你不需要这些。
2.use height: 100%for your elements also you should set this on bodyand htmltags.
2.使用height: 100%你的元素，你也应该设置这个上body和html标签。
3.left pane should be float: leftwith width: 25%, right pane float: rightwidth: 25%and middle pane float: leftor float: rightwith width: 50%
3.左窗格应float: left与width: 25%、右窗格float: rightwidth: 25%和中间窗格float: left或float: right与width: 50%
that's all!
就这样！
回答by Adittya Verma
Check here. You'll get the simplest code to divide your screen into three columns.
检查这里。您将获得将屏幕分成三列的最简单代码。
HTML File
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>
CSS File
CSS文件
body {
width: 100%;
float: left;
}
.class1,
.class2,
.class3 {
width: 33.33%;
float: left;
height: 100px;
}
p {
padding-top: 25px;
text-align: center;
}
回答by mpsbhat
Use the Twitter Bootstrapframework which has a grid system.
使用具有网格系统的 Twitter Bootstrap框架。
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" media="screen"/>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-xs-12 text-center bg-primary" style="height:40px;">Top </div>
</div>
<div class="row">
<div class="col-xs-3 bg-warning" style="height:200px;">left</div>
<div class="col-xs-6 bg-info" style="height:200px;">Center</div>
<div class="col-xs-3 bg-danger" style="height:200px;">Right </div>
</div>
</div>
</body>
</html>
回答by Atul Gaikwad
<html> <head> <title>Divide Tab </title> <style> 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;
text-align: center; }
.middlepane {
width: 50%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
text-align: center; }
.rightpane { width: 25%; height: 100%; position: relative;
float: right; background-color: yellow; border-collapse:
collapse; text-align: center; }
.toppane { width: 100%; height: 100px; border-collapse:
collapse; background-color: #4da6ff; text-align: center; }
</style>
</head> <body> <div class="container"> <div
class="toppane"><h2>Top View</h2></div> <div class="leftpane">
<h1>Left View</h1></div> <div class="middlepane"><h2>Middle View</h2></div> <div class="rightpane">
<h1>Right View</h1></div> </div> </body> </html>
