微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

css设置自适应高度和垂直居中

注:IE盒子模型和标准w3c盒子模型区别(参考:

自适应高度

第一种:一定高度内容加多时自适应高度,而内容少时DIV有一定最小高度

_height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ,设置高度200px,内容超出后IE6会自动撑高设定高度 */ 
min-height:200px; /* css注释: css最小高度为200px支持所有浏览器,IE6浏览器除外 */ 

第二种:没有最小高度,DIV完全自适应高度。

第三种:容器嵌套的情况下,而子容器又是浮动的

例:
 
其中class为fuqin的div有浮动的li,当li比较多的时候,即便是div设置的是最小高度,也无法被撑开。 
原因就在于作为子容器的li是浮动的即 。在这种情况下,即便是li的内容超过了div的高度,div也无法撑开。 
解决方法如下: 
在浮动的容器后面,父容器结束之前加入一个div 

<div class="fuqin">

<div class="clearfloat">

.clearfloat{clear:both;height:0;font-size: 1px;line-height: 0px;}

第四种:通过position自适应高度

    例:
  
.righinfo{ font-family: '华文'; background-color: #f6fffa; border: 1px solid red; padding: 0px; left:0px; right:0px; top:0px; bottom: 0px; position: absolute; text-align: center; } 主要通过position、left、right、top、bottom来设置实现

垂直居中

第一种:CSS中的vertical-align属性,但是它只对(X)HTML元素中拥有valign特性的元素才生效,

例如表格元素中的、等,而像
这样的元素是没有valign特性的, 因此使用vertical-align对它们不起作用 通过display来实现这种方式 多行<a href="https://www.jb51.cc/tag/wenzi/" target="_blank" class="keywords">文字</a>实现垂直居中
现在我们要使这段文字垂直居中显示! }

第二种:固定高度的div垂直居中

例:
 
 
 
 
上下垂直居中 在线演示 DIVCSS5 
 
 
    
这里设置一个“#main”对象样式,宽400px,高200px,使用了绝对定位position样式同时使用绝对定位left和top,并且同时设置margin-top和margin-left,为了观察到效果,所以对此div盒子加了个红色边框。 这里使用了绝对定位position:absolute,使用left和top设置对象距离上和左为50%,但如果设置50%,实际上盒子是没有实现居中效果,所以又设置margin-left:-200px;margin-top:-100px;,这里有个技巧是,margin-left的值是宽度一半,margin-top的值也是对象高度一半,同时设置为负,这样就实现了水平和垂直居中。

第三种:不固定高度div垂直居中(还没整理)

参考(http://www.haorooms.com/post/css_div_juzhong)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐