要实现一个灵活的三行网页布局，其中中间内容的高度自适应，可以使用HTML和CSS来实现。以下是一个简单的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三行布局</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="header">头部</div>
<div class="content">中间内容</div>
<div class="footer">底部</div>
</body>
</html>
/* 重置默认样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 设置页面高度为100% */
html, body {
height: 100%;
}
/* 头部样式 */
.header {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
border-bottom: 1px solid #ddd;
}
/* 中间内容样式 */
.content {
flex: 1;
padding: 20px;
background-color: #e9ecef;
text-align: center;
}
/* 底部样式 */
.footer {
background-color: #f8f9fa;
padding: 20px;
text-align: center;
border-top: 1px solid #ddd;
}
/* 使用Flexbox布局 */
body {
display: flex;
flex-direction: column;
height: 100%;
}
HTML结构：
header：页面的头部部分。content：页面的中间内容部分，高度自适应。footer：页面的底部部分。CSS样式：
html, body { height: 100%; }：确保页面高度占满整个视口。body { display: flex; flex-direction: column; height: 100%; }：使用Flexbox布局，将页面分为三行，并使中间内容自适应高度。.content { flex: 1; }：flex: 1 使得中间内容部分占据剩余的空间，从而实现高度自适应。.content中添加min-height属性。这个布局方式简单且灵活，适用于大多数网页布局需求。