HTML5 + CSS 左右排版自适应高

传统的HTML + CSS的左右排版一般会用 float来处理，但在高度自适应的情况下，由其是当一边的高超出body的100%以后，就会有BUG存在。

现在我介绍Flex排版，以下是Demo，这个Demo，已经可以完美运行在IE10+，Chrome，FireFox。理论上Safari也应该匹配。

关于Flex的布局的基础知识我引用另外一个博客的教程：Flex 布局教程：语法篇，各位同学自行去学习。

以下我重点说说有可能出现问题的地方。

1. <!DOCTYPE html> 当出现这个HTML5的标签时，html,body的样式里面，必须设置高为100%（vh）；

　　因为，在这个标签的作用下，div的height设置为100%(vh)需要继承父标签，在我们的印象中div最顶层的标签应为<body>，但其实body也不是最顶层的标签，因为它还有<html>这一个最顶级的父标签，所以当div的height设置为100%(vh)时，必需为每一层的父标签均设置100%，包括html与body标签，只要这样的继承关系下里面的div所设置的100%高度才得以生效，其效果与最外层html的高度一样。

2. 为了适应多浏览器，建议使用 "vh" 代替 "%" ；

3. min-height，max-height 样式只能在非IE的浏览器中生效；

4. .main::after是为了解决IE无法使用min-height而存在的，如没有这段CSS则在IE中Flex无法响应body的“height: 100%(vh)”，如果你不打算兼容IE，这段CSS可以删除；

5. left与right里面设置的高度是为了测试内容超出body高度时的效果而设置的，实际使用中没有存在的必要，只要按照正常使用就可以，默认为全屏，当超出body的height时出会出现滚动条。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" >
 5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
 6 <title>Flex Test</title>
 7 <style>
 8 html, body { 9     margin: 0px;
10     padding: 0px;
11     height: 100vh;
12 }
13 .main {14     display: -webkit-flex;
15     display: flex;
16     -ms-flex-direction: row;
17     flex-direction: row;
18     align-items: stretch;
19     min-height: 100vh;
20 }
21
22 .main::after {23   content: '';
24   height: 100vh;
25   width: 0;
26   overflow: hidden;
27   visibility: hidden;
28   float: left;
29 }
30
31 .left {32     width: 200px;
33     background: #F0F0F0;
34     flex-shrink: 0;
35 }
36
37 .right {38     flex-grow: 1;
39     background: yellow;
40 }
41 </style>
42 </head>
43
44 <body>
45 <div class="main">
46     <div class="left">
47         <div style="height: 300px;">
48         </div>
49     </div>
50
51     <div class="right">
52         <div style="height: 1000px;">
53             test test test
54         </div>
55     </div>
56 </div>
57 </body>
58 </html>

转载于:https://www.cnblogs.com/badtree/articles/7117826.html

HTML5 + CSS 左右排版自适应高相关推荐

html设置box设置长度自适应,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding ...
网页制作期末大作业成品 HTML5+CSS大作业——简约个性高逼格博客(5页) web网页制作期末大作业模板
HTML5+CSS大作业--简约个性高逼格博客(5页) web网页制作期末大作业模板常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞 ...
css实现整体网页16 9,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形 https://www.ddpool.cn/css/753385.html 现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100 ...
HTML5自动换行的间距设置,div css p段落行高行距怎么设置篇
如何使用div+css样式设置p段落之间的上下间距,需要设置哪些样式来控制之间行距距离呢?css行高怎么写等问题,让大家彻底掌握div css p行距行高样式. DIVCSS5为大家介绍如何通过CS ...
html5纯css字体大小自适应设置
css 字体大小自适应样式设置篇字体可以设置大小使用css font-size来实现,有时需要对字体大小根据浏览器分辨率来判断后自适应大小. 在CSS 2.0中字体大小自适应是难实现的,一般使用JS ...
CSS实现图片自适应布局
CSS实现图片自适应布局最轻松的写法 <div class="container">// 这里图片尺寸为440X440像素,<img src="./i ...
视频教程-HTML5和CSS3移动端开发全套教程-HTML5/CSS
HTML5和CSS3移动端开发全套教程拥有6年web前端和后端开发经验,4年授课经验,还曾在百度专业培训过网络营销课程,曾就职于联想集团和当当网,不仅有丰富的项目实战经验还有营销经验,综合实力较强, ...
HTML5 CSS学习笔记
最新前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程_哔哩哔哩_bilibili 代码地址:HTML5+CSS: 用于学习.练习前端的相关知识. 目录 HTML 1.html ...
HTML5+CSS——Day1
HTML5+CSS--Day1 HTML5概述 1.什么是HTML 2.HTML5是什么常用前端开发工具介绍 VS Code安装 web基础概述网站的构成页面的构成 B/S和C/S 常见互联网名 ...

HTML5 + CSS 左右排版自适应高

HTML5 + CSS 左右排版自适应高相关推荐

最新文章

热门文章