样式如下：
<!DOCTYPE html><html><header><title>上中下布局</title><style> html,body{ height:100%;width:100%;margin:0;padding:0;overflow: hidden;} .header{ width:100%;height:100px;} .main{ position:absolute;top:100px;bottom:50px;right:0;left:0;overflow:auto;background-color:gray;} .footer{ width:100%;height:50px;position:fixed;bottom:0} </style></header><body><div class="header">header</div><div class="main">main</div><div class="footer">footer</div></body></html>
css经典布局上下左右样式
css上中下布局 样式如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0...
以下是一个简单的 HTML 页面，其中包括上、左、中、右和下的布局。您可以使用CSS来自定义布局的样式。 <!DOCTYPE html> <html>
原文网址：[CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例\_IT利刃出鞘的博客-CSDN博客][CSS_--_--_IT_-CSDN] 简介 本
CSS网页布局有何技巧？ Example Source Code .left-blue \{ color: \369; \} 你可能立即知道这个类选择符是为左侧边栏的
flex布局，也称为弹性盒子布局，这是一种简单而强大的布局方式，我们通过弹性盒指明控件的分布方式、内容的对齐方式和元素的排布顺序，把不同的组件放置在页面中，内容可以轻易的横向或
效果图 ![在这里插入图片描述][20210510165638463.gif] 实现代码 复制，运行即可查看效果。 <!DOCTYPE html>
先上效果图： ![在这里插入图片描述][20210421001710245.gif] 实现方法： 方法一： 这个最简单，利用css中vh单位和calc() 函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上中下DIV+CSS布局案例</titl
头部：定高100px，宽度自适应100% 左侧：定宽200px，高度铺满 右侧：宽度铺满自适应，高度铺满 底部：定高50px，宽度100% 整体页面无滚动条，内容
1.效果图 
向右看齐
迷南。
深藏阁楼爱情的钟
╰半橙微兮°
忘是亡心i
红太狼
还没有评论，来说两句吧...