元素的高度自适应

网页布局中有时候有的高度需要根据内容调整，所以不能固定，今天就来说说，最小高度自适应

属性：min-height 最小高度，但IE6不识别该属性，height在IE6中类似min-height属性；

以下是解决BUG问题方法：

hack1：min-height:value; _height:value;（IE6能识别下划线"_"和星号" * "，IE7能识别星号" * "，但不能识别下划线"_"，而firefox两个都不能认识）

hack2：min-height:value; _height:auto !important; height:value;(建议使用)

min-height 最小高度

max-height 最大高度

min-width最小宽度

max-width 最大宽度

时间： 2024-04-25 17:23:15

元素的高度自适应的相关文章

清除浮动，浮动元素的高度自适应问题

一.问题当有时不浮动的父元素装载着浮动的子元素时,这个时候父元素的高度不会跟着的子元素的内容高度而自适应高度变大.比如截图的第一行图,上面一条黑色的粗线,就是父div的边框(为了看效果,我设置了父div的border:5px.左右两边是各浮动一个div). 于是乎,我想解决这个父元素高度不会跟随着子元素的内容而变化的问题.谷歌了一下,找到答案二.解决方法参考来源:http://www.ruanyifeng.com/blog/2009/04/float_clearing.html 里面提到了

子元素浮动后、父元素的高度自适应

一.普通情况下,即没有任何浮动样式等的情况下设置父元素的高度为aotu 或100% 或者不设置,那么父元素会根据子元素的高度而自动调整自身高度. 栗子  <div id="wrap"> <img src="./1.png" alt="logo"/> <div id="content"></div> </div> CSS样式 #w

div高度自适应

第一种: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><meta http-equiv="Content-Type"

子元素绝对定位，父元素高度自适应子元素高度

子元素设置了绝对定位,父元素没有设置相对定位,因此子元素脱离了文档流,父元素高度就变成没有了,如何让父元素高度自适应子元素高度. 子元素的高度是不确定的可以JS设置父元素高度 <<span class="hljs-keyword" style="box-sizing: border-box; font-weight: bold;">divid="father"> <<span class="h

【css基础】div父元素根据子元素高度自适应高度

两种情况(无特殊说明子元素都是指代父元素的第一级子元素) 第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为0,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子! 解决这个问题的根源就是清除浮动: 1 , 给父节点增加样式overflow:hidden或者overflow:auto 2 , 在子元素中的最后一个添加一个兄弟节点,当然该节点应该是一个空节点.你可以用div

CSS float 父元素高度自适应

<html> <head><title></title><style type="text/css">*{margin:0 ;padding:0;}.content{border:1px solid red;}.fl{float:left}</style></head> <body> <div class="content"> <div class=&q

转载，元素高度自适应

何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在兼容浏览器方面也稍微复杂一些. <!DOCTYPE html> <html> <head> <title>高度自适应布局</title> <style> html,body{ height:100%;} body,div{ margin:

谷歌、火狐浏览器下实现JS跨域iframe高度自适应的完美解决方法，跨域调用JS不再是难题！

谷歌.火狐浏览器下实现JS跨域iframe高度自适应的解决方法导读:今天开发的时候遇到个iframe自适应高度的问题,相信大家对这个不陌生,但是一般我们都是在同一个项目使用iframe嵌套页面,这个ifame高度自适应网上一搜一大把,今天要讲的如何在不同的网站下进行相互的调用跟在同一个网站下是一个效果:例如我在自己的项目里面Iframe 了第一博客的页面 http://www.diyibk.com/ 当第一博客的页面高度变化了怎么通知父页面呢? 这个时候在谷歌下肯定是拿不到 ifram

一个定高，一个高度自适应的布局

Problem:父元素内包含两个子元素,一个定高,另一个高度自适应 Ans: <div class="box"> <div class="ele1"></div> <div class="ele2"></div></div> (1) .box { width:200px; height:300px; background:red;