生成一份自适应布局的html框架模板,再此基础上继续增加一个底部距离主要内容150px,但如果内容不足以把底部撑到底部则让底部一直在底部,代码内容过多底部不会遮挡内容,请以这个生成一份html框架
时间: 2024-03-09 17:51:18 浏览: 62
高端大气五谷农产品类自适应html模板
5星 · 资源好评率100%
好的,以下是一个自适应布局的 HTML 框架模板,并根据你的要求添加了底部距离主要内容 150px 的样式:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自适应布局框架模板</title>
<style type="text/css">
/* 设置网页默认字体和字体大小 */
html, body {
font-family: Arial, sans-serif;
font-size: 16px;
}
/* 清除默认外边距和内边距 */
body {
margin: 0;
padding: 0;
}
/* 设置页头样式 */
header {
background-color: #333;
color: #fff;
padding: 20px;
}
/* 设置主要内容区域样式 */
.main {
max-width: 960px;
margin: 0 auto;
padding: 20px;
min-height: calc(100vh - 170px); /* 减去页头和页脚高度 */
}
/* 设置页脚样式 */
footer {
background-color: #333;
color: #fff;
padding: 20px;
position: absolute; /* 让页脚始终在底部 */
bottom: 0;
left: 0;
right: 0;
height: 150px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<header>
<h1>这是页头</h1>
</header>
<div class="main">
<p>这是主要内容区域。如果内容不足以把底部撑到底部,则底部会一直在底部。</p>
</div>
<footer>
<h2>这是页脚</h2>
</footer>
</body>
</html>
```
这个 HTML 框架模板包含了一个页头、一个主要内容区域和一个页脚。主要内容区域的高度会自适应屏幕高度,并且会留出 150px 的底部距离。如果内容不足以把底部撑到底部,则底部会一直在底部。同时,当内容过多时,不会遮挡页面底部的内容。
阅读全文