HTML5 + CSS 左右排版自适应高

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

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

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

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

1. 当出现这个HTML5的标签时,html,body的样式里面,必须设置高为100%(vh);

  因为,在这个标签的作用下,div的height设置为100%(vh)需要继承父标签,在我们的印象中div最顶层的标签应为,但其实body也不是最顶层的标签,因为它还有这一个最顶级的父标签,所以当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 Testtitle>
 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 左右排版自适应高)