这种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的效果*/
}
版权声明:本文为博主原创文章,未经博主允许不得转载。

让div自动适应内容的高度

我们看下面的代码:  当Content内容多时,即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了,但容器main的高度还是不能撑开。  我们可以通过三...
  • gaoyunpeng
  • gaoyunpeng
  • 2007年08月02日 12:54
  • 22927

三种有效解决DIV高度自适应的方法

本文和大家重点讨论一下DIV高度自适应的三种有效解决方法,它们分别是一是JS法、二是背景图填充法、三是“补丁大法”(比较变态)。 DIV高度自适应的三种有效解决方法 DIV+CSS设计俨然已成网页...
  • aaawyh
  • aaawyh
  • 2016年10月20日 14:05
  • 976

HTML/CSS中,DIV高度自适应的解决方法

在WEB开发过程中,有些需求要求DIV的高度随着浏览器窗口的改变而改变。 这里我就列举两种情况: ① 顶部为一排菜单栏,下部为内容部。其中,要求,菜单栏高度固定,内容部随着浏览器窗口大小的改变而改变,...
  • rainbow702
  • rainbow702
  • 2016年01月14日 15:44
  • 1387

DIV的高度自适应及注意问题

转自:http://hi.baidu.com/samxx8/blog/item/eeb4c0efc112963facafd55b.html      积累了一些经验,总结出一些关于div的高度自适应...
  • tudopi
  • tudopi
  • 2010年05月11日 18:12
  • 5466

Java这些冷知识你知道吗?

1)jvm有很多种,其实jvm是一个标准,sun做的那个叫hotspot,作者就是后来v8的作者lars bak,其他公司也做过jvm,其中做得比较好的有bea的jrockit,其他的包括ibm的r9...
  • FYGu18
  • FYGu18
  • 2017年10月24日 00:00
  • 204

Float引起div自适应高度无效的解决办法

Float引起div自适应高度无效的解决办法。 一、当子元素在正常的文档流中时 三生草 #ss{ border:2px solid yellow; width:400px...
  • a1217158716
  • a1217158716
  • 2017年05月04日 13:08
  • 470

关于DIV高度自适应屏幕、左右高度自适应一致的js

1.在使用DIV和CSS进行网页布局中,DIV的自适应高度和自适应宽度是一个很常见的问题。 为了保证页面的整体美观性,需要将两个或者多个层的高度/宽度保持一致。 左右自适应高度一致 Jque...
  • acongshijia
  • acongshijia
  • 2013年03月06日 13:28
  • 1993

DIV最小高度且自适应高度

在IE6中,如果子容器的高度超过父容器的时候,父容器会被子容器撑开,所以我们可以直接设置一个height的高度值即可。但是在IE7和firefox就不行了,它不会自动撑开。   如果要设置...
  • u013700383
  • u013700383
  • 2015年07月09日 11:30
  • 2491

div自适应屏幕高度

问题描述:本地项目页面左侧菜单点击父亲节点拉伸出子节点后,演示的阴影不能覆盖所有的左侧菜单,现象如下图:此时整个演示的页面要通过滚动条才能看到整个菜单内容 整个菜单都放在div中,div的父亲节点...
  • qq_27802255
  • qq_27802255
  • 2017年04月12日 14:55
  • 5816

假茅台酒比例你知道吗

2011年9月贵州省商务厅一位陈胜官员宣称,2009年茅台酒年产约2万吨,而2010年全国茅台酒销量约20万吨,由此推断市场上90%的茅台酒是假酒。此言一出,舆论大哗,茅台酒假货泛滥甚嚣尘上。 针对...
  • sanbao11
  • sanbao11
  • 2012年06月14日 12:07
  • 10673
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:这种div高度自适应确定你知道吗?
举报原因:
原因补充:

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