这种div高度自适应确定你知道吗?

原创 2016年06月01日 23:22:13

# 1. 随子元素div高度自适应

如何下面的child1和child2浮动,parent高度就会为0,前提child1和child2都有高度,如果你想parent的高度自适应,请继续阅读

<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>
</body>
  • 样式省略

方法1

.parent{
    overflow:hidden;
}

方法2

  • 会使用到伪元素:after,如果不懂请看伪元素
.parent:after{
    content: " ";
    height: 0;
    diplay: block;
    clear: both;
    visibility: hidden;
}

2. 根据div宽度的百分比调整div高度

假设我的div宽度会自动变化,但是我的高度只想色湖之成div宽度的一半,该如何实现呢?

<body>
    <div class="main"></div>
</body>
  • 设置main的高度为宽度的一半
.main:after{
    display: block;
    content: ' ';
    padding-top: 50%;
    border: 1px solid black;/*便于看出div的效果*/
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

table+div+iframe打造高度自适应的后台布局框架(需要用JS控制大小)

discuz后台用的就是这种结构,用table撑开布局,在table里写div,用于菜单栏目的布局,在主体区域用iframe,作为页面容器。 html代码: 1 2 ...

三种Div高度自适应的方法

让DIV高度自适应,这是在网页设计中常遇到的问题,为了给大家提供参考,这里提供3种div高度自适应的方法:一是JS法、二是背景图填充法、三是“补丁大法”(比较变态)。 1、JS法 代码如下。原理:...

div高度自适应问题杂谈

很多的Web designer在刚接触W3C标准的时候,都遇到过高度自适应的问题。因为div等对象的height:100%;并不能够直接产生实际效果,于是开始怀疑浏览器是否支持height:100%;...
  • lhy2199
  • lhy2199
  • 2012年01月03日 18:27
  • 3765

div模拟textarea文本域轻松实现高度自适应

转载自:http://www.zhangxinxu.com/wordpress/2010/12/div-textarea-height-auto/ 一、关于textarea文本域以及高度自适应 te...

div或img图片高度随宽度自适应

一、可以利用js判断图片的宽度从而实现自适应。 二、只利用css来实现图片高度的自适应问题。...
  • zh_rey
  • zh_rey
  • 2017年04月08日 11:39
  • 9730

IE8下DIV嵌套出现外层自适应高度(四种解决方法)

升级了IE8,发现了好些问题,一开始用IE6和IE7都没有的新问题出现了,总归时间有余,就四处查阅解决办法,大概就是以下的四种方法! 当b1和b2都是float=le...

div自适应宽度和高度实现

Demo .send { position:relative; width:auto; //height:auto; //display:inline; max-width:150p...

内容滚动条和子div高度自适应

内容滚动条和子div高度自适应 写在前面:老套路有图有真相,这才叫做分享。本文内容是:一个div里面,两个子div高度自适应(平分父div的高度)和元素内容过多的时候,根据需求出现高度滚动条或者...
  • OBKoro1
  • OBKoro1
  • 2017年03月23日 15:43
  • 1342
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:这种div高度自适应确定你知道吗?
举报原因:
原因补充:

(最多只允许输入30个字)