阅读量:0
可以使用以下CSS代码实现上中下三行布局，中间部分自适应高度：，，``
css，body {， display: flex;， flexdirection: column;， minheight: 100vh;，}，，.header, .footer {， height: 50px;， backgroundcolor: #f8f9fa;，}，，.content {， flex: 1;，}，`，，HTML结构如下：，，`html，，，，，，，上中下布局，，，，，，，，``Flex布局
1、简介：
Flex是CSS3提供的一种新的布局方式，旨在实现自适应布局，随着移动互联网时代的到来，Flex布局因其灵活性和易用性而受到广泛应用。
2、优点：
简单易学，维护性好，能够轻松实现复杂的布局效果。
3、缺点：
不兼容旧版浏览器。
4、代码示例：
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>This is title</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
display: flex;
height: 100%;
flexdirection: column;
}
.top {
height: 100px;
backgroundcolor: #a9ff29;
}
.middle {
flex: 1;
overflow: auto;
backgroundcolor: #ffb91b;
}
.bottom {
height: 50px;
backgroundcolor: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="top">上</div>
<div class="middle">中</div>
<div class="bottom">下</div>
</div>
</body>
</html>
```
网格布局（Grid）
1、简介：
网格布局是较新的CSS标准特性，适用于响应式布局，在移动互联网时代尤为流行。
2、优点：
简单、清晰，易于理解和实现。
3、缺点：
不兼容旧版浏览器。
4、代码示例：
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>This is title</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
.container {
display: grid;
height: 100%;
gridtemplaterows: 100px auto 50px;;
}
.top {
backgroundcolor: #a9ff29;
}
.middle {
backgroundcolor: #ffb91b;
}
.bottom {
backgroundcolor: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="top">上</div>
<div class="middle">中</div>
<div class="bottom">下</div>
</div>
</body>
</html>
```
vh+calc()布局
1、简介：
利用CSS中的vh单位和calc()函数来实现上下固定，中间自适应的布局。
2、优点：
简单，兼容旧版浏览器。
3、缺点：
代码较为繁琐。
4、代码示例：
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>This is title</title>
<style>
* {
margin: 0;
padding: 0;
}
.top {
height: 100px;
backgroundcolor: #a9ff29;
}
.middle {
height: calc(100vh 150px);
backgroundcolor: #ffb91b;
}
.bottom {
height: 50px;
backgroundcolor: #40c3ff;
}
</style>
</head>
<body>
<div class="container">
<div class="top">上</div>
<div class="middle">中</div>
<div class="bottom">下</div>
</div>
</body>
</html>
```
表格布局（Table）
1、简介：
通过设置display:table和display:tablerow来模拟表格行的效果。
2、优点：
兼容性较好。
3、缺点：
不推荐使用，因为其灵活性较差。
4、代码示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>This is title</title>
<style>
* { margin: 0; padding: 0; }
html, body, #box { height: 100%; font: small/1.5 "宋体", serif; }
body { textalign: center; }
#box { textalign: left; background: #666; display: table; width: 80%; margin: 0 auto; position: relative; }
#box > div { display: tablerow; }
#header, #footer { background: #fcc; height: 50px; }
#main { background: #ccf; }
#wrap { display: tablecell; background: #ffc; verticalalign: middle; }
</style>
</head>
<body>
<div id="box">
<div id="header">header</div>
<div id="main">
<div id="wrap">
<div id="text">内容内容</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
```
绝对定位布局（Positioned）
1、简介：
通过绝对定位来实现上下固定，中间自适应的布局。
2、优点：
兼容性较好。
3、缺点：
不推荐使用，因为其灵活性较差。
4、代码示例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<title>This is title</title>
<style>
* { margin: 0; padding: 0; }
#header, #footer { width: 100%; zindex: 3; position: absolute; }
#footer { bottom: 0; }
#main { height: 100%; zindex: 1; position: relative; }
#wrap { position: absolute; top: 50%; width: 100%; textalign: left; }
#text { position: relative; width: 100%; top: 50%; background: #ccc; }
</style>
</head>
<body>
<div id="box">
<div id="header">header</div>
<div id="main"> <div id="wrap"> <div id="text">内容内容</div></div></div> <div id="footer">footer</div> </div> </body> </html>
```
相关问答FAQs
问题一：为什么Flex布局是实现上中下三行布局的最佳选择？
答：Flex布局具有简单、灵活的特点，能够轻松实现各种复杂布局，并且维护性好，它也是现代Web开发的主流技术之一，能够很好地适应不同屏幕尺寸和设备类型，对于需要高度自适应和响应式的上中下三行布局，Flex布局是最佳选择。
问题二：如何确保上中下三行布局在不同浏览器中的兼容性？
答：为了确保上中下三行布局在不同浏览器中的兼容性，可以采用以下几种方法：一是使用Flex或Grid布局，这两种布局方式在现代浏览器中都有良好的支持；二是使用vh+calc()布局，这种方式也能兼容旧版浏览器；三是针对特定浏览器（如IE）编写特定的样式规则，以确保布局在各个浏览器中都能正常显示。
