html 布局,上下各100px,中间自适应
HTML 布局 适应 中间 上下
2023-09-14 08:58:44 时间
flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: 0px;
padding: 0px;
height: 100vh;
display: flex;
flex-direction: column;
}
.top,
.bottom {
height: 100px;
background-color: red;
}
.center {
background-color: pink;
flex: 1;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
position: relative;
overflow: hidden;
}
.top,
.bottom {
height: 100px;
background-color: red;
}
.top {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
.bottom {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.center {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 100px 0;
}
.content {
height: 100%;
background-color: blue;
width: 100%;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="center">
<div class="content"></div>
</div>
<div class="bottom"></div>
</body>
</html>
grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
html,
body {
margin: 0px;
padding: 0px;
height: 100vh;
overflow: hidden;
display: grid;
grid-template-rows: 100px auto 100px;
}
.top,
.bottom {
background-color: rgba(255, 0, 0, 0.5);
}
.center {
background-color: blue;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="center"></div>
<div class="bottom"></div>
</body>
</html>
相关文章
- 删除html标签或标签属性以及样式
- html 常用标签及基本用法
- html网页采集
- java发送邮件javamail, freemarker读取html模板内容
- HTML中      等6种空白空格的区别
- HTML CSS + DIV实现整体布局
- html中的下拉框—select和input方式
- html分割线
- spring boot单元测试之十四:controller使用html模板时做单元测试(spring boot 2.4.4)
- HTML CSS里display:block的原理和用法
- CRM Fiori offline技术实现:index.html under CRM.www folder
- How to enable product text HTML editor
- atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform
- Vue项目使用file-saver将html转word文件、把html内容下载保存导出到本地生成doc文件包括图片:前端下载利器FileSaver
- Winnovative HTML to PDF Converter
- 生日祝福(HTML+CSS+JavaScript+jQuery)
- 图片缩放+拖动(html)
- HTML——使用表格对表单进行布局
- atitit.软件开发GUI 布局管理优缺点总结java swing wpf web html c++ qt php asp.net winform
- 关于html中的 script标签中的 代码写法有效性? easyui tabs的href不能载入内容页面,tab标签页中使用content: iframe加载本地内容
- 具体解释HTML中的window对象和document对象
- 在asp.net mvc中使用PartialView返回部分HTML段
- requests-html添加header
- 【DOM】了解HTML DOM常用对象: 对常用元素的简化操作_05
- html+css+js实现时钟
- HTML常用布局方式
- HTML的学习心得和知识总结(三)|CSDN-Markdown上传图片以及图片水印