height:auto和height:100%的区别

一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成height:auto就好了,百度过这个问题,却一直没有细看。

今天又浮现了同样的问题,百度细看和群里的朋友指点,终于明白其中的道理,记录一下。

height:auto,是指根据块内内容自动调节高度。
height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高度的父层的高度来定义高度。

时间: 2024-11-03 00:04:47

height:auto和height:100%的区别的相关文章

jquery-jQuery中的$(document).height()和$(window).height()

问题描述 jQuery中的$(document).height()和$(window).height() 本来是两个不同的意思,一个是文档的高度,一个是滚动条的高度,为什么我这里有的页面能区分,在我的网站首页就总是相等的呢?求解答 解决方案 $(document).height()表示文档内容的总高度,而$(window).height()表示窗口显示的页面内容的高度,不是滚动条的高度.二者的差值才是滚动图条的高度,一般情况下$(window).height()<=$(document).hei

wpf columnwidth设为auto 其中的gridview列宽会有问题

问题描述 wpf columnwidth设为auto 其中的gridview列宽会有问题 本人wpf小菜鸟 而且刚注册论坛没有币 还望各位大神帮帮忙 如图 三列的每一列我都想width =auto,但是gridview的列宽就变成这样了.问题出在哪里呢?应该怎么处理 <Grid Name=""MainGrid""> <Grid.ColumnDefinitions> <ColumnDefinition Width=""

DIV+CSS网页制作布局技术漫谈

css|网页 CSS布局常用的方法:float : none | left | right 取值: none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml: <div id="wrap">     <div id="column1">这里是第一列</div>     <div id="column2"&g

DIV+CSS网页制作布局技术

css|网页 CSS布局常用的方法:float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><di

实例详细讲解DIV+CSS网页制作布局技术

css|网页 CSS布局常用的方法:float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><di

基于XHTML的DIV+CSS网页制作布局技术

css|xhtml|网页 CSS布局常用的方法:float:none|left|right 取值:none:默认值.对象不飘浮left:文本流向对象的右边right:文本流向对象的左边  它是怎样工作的,看个一行两列的例子 xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div>

div+css布局漫谈

css 1.CSS布局常用的方法:float : none | left | right 取值:none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml:<div id="warp">  <div id="column1">这里是第一列</div>  <div id="column2">这里是第二列&

CSS布局常用的方法和实例及一些问题

css|问题 1.CSS布局常用的方法:float : none | left | right 取值:none : 默认值.对象不飘浮 left : 文本流向对象的右边 right : 文本流向对象的左边 它是怎样工作的,看个一行两列的例子 xhtml: <div id="warp"> <div id="column1">这里是第一列</div> <div id="column2">这里是第二

CSS布局——左定宽度右自适应宽度并且等高布局

今天有位朋友一早从妙味课堂转来一个有关于CSS布局的面试题,需要解决,花了点时间写了几个DEMO,放上来与大家分享受.那么我们在看DEMO之前一起先来看看这个面试题的具体要求吧:   左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到效果其实也并不是太难,只是给人感觉像有点蛋疼的问题一样.但是你仔细看后你会觉得不是那么回事: 左边固定,右边自适应布