在CSS 中如何使用百分比设置页面 Div 高度?

如题所述

html, body,.container {height: 100%; }
container的高度要设置成100%则前面一个元素要设置一个高度,所以我们追溯到html标签,给html标签定义高度为100%,这样就可以了,chrome中实测。
注意:
1.div外层的父标签如果没有定义高度或宽度(用px或者其它单位定义,而非百分比),div用百分比是无效的。如果坚持要用百分比,请换成table标签。
2.如果一定要用div标签,一种方法是通过JS脚本获取浏览器高度或宽度然后给标签,用纯CSS方法,是这样:给login_wrapper加一条属性“position:absolute”。
温馨提示:内容为网友见解,仅供参考
无其他回答

在CSS 中如何使用百分比设置页面 Div 高度?
用户填用户名和密码。现在为了保证不同屏幕下显示效果相同,div的高度使用百分比设置。body和login_wrapper的高度为100%,以保证本页面充满浏览器并且不会翻页。同时设置login_header和login_footer的高度为20%,content为60%。但是如此设置,浏览器只能显示content的内容,header和footer高度均为0px。无法达到...

css让高度百分比,height:100% 生效的3种方法
比如:[html] view plain copy 132 这样从根的Html开始,到字的div结束,全部都具有百分比高度,这样,就都能够获取到高度信息;方法二 给父容器设置具体的高度信息;比如直接写死在样式中,或者用javascript来设置;示例,用js使得到高度,从而使其中的div全屏:[html] view plain copy 132 vars...

css行高元素的高(不确定,百分比)
首先行高百分比的书写,百分比是针对字体大小进行设置的,也就是说如果你的文字大小为20px,那么100%就是20px,这个和你的需求不符合 其次,CSS当中也不能写成height\/2的样子 那么,两种方案能够解决这个问题 1 改变标签的默认显示样式,然后使用vertical-align属性进行控制 <style>.box {width: 800px;...

在css设置高度height:100%滚动条不出来,设置具体好使
按照常理,当我们用CSS的height属性定义一个元素的高度时,这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如,如果一个div元素的CSS是height:100px;,那它应该在页面的竖向空间里占满100px的高度。而跟w3c的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以,如果你...

如何做出css百分比图如何做出css百分比图
填充,边距百分比是指宽度(包括填充)。)的最近的母盒进行定位;示例:div{宽度:50%;溢出:隐藏;}p{宽度:50%;高度:100px浮动:左;背景色:粉色;}p:最后一个孩子{背景色:绿色;} 第二,框尺寸:边界框;扩展了css2中的盒子模型。css3的盒子大小:盒子模型中的减法。(在宽度和高度的基础上写填充...

如何div中的div居中cssdiv中的div怎么居中
方法一:使用绝对布局位置:absolutefordiv并设置top、left、right、bottom的值相等,但不一定都等于0;并设置边距:自动。方法二:这个方法需要知道div的宽度和高度。使用绝对布局位置:绝对用于div并将top和left的值设置为50%;50%是指页面窗口宽度和高度的50%;最后,将div向左上方移动div宽度和高度的一半...

c和height的问
当我们尝试使用百分比给块级元素如div设置高度,如height: 50%,可能会遇到预期外的问题。这是因为百分比高度是相对于其父元素的宽度或高度的,而非绝对值。对于宽度,由于父元素不需要预先设定宽度,可以利用position属性实现动态布局,例如:父元素CSS: position: relative\/absolute;,子元素CSS: position:...

CSS中百分比高度的div中单行文字垂直居中,怎么实现?
CSS中百分比高度的div中单行文字垂直居中实现方法:1、css代码:.table { width:100%; height:100%; position:absolute; display:table;}.cell { display:table-cell; vertical-align:middle; width:100%; height:100%:} 2、html代码:<div class="table"> <div class...

css手机版页面制作时如何让背景图片适应div的高度和宽度
1、输入position:fixed; top: 0; left: 0;使整个div固定在屏幕的最上方和最左方。2、输入width:100%;height:100%; min-width: 1000px;这个可以适合div的高度和宽度,而min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变。3、输入background-size: cover;-webkit-background-size: ...

css中min-height和height的问题
子元素css: position: relative; left: -50%;但高度则不同,若某元素的父元素没有确定高度,则无法有效使用height=XX%的样式,我们可以这样解决(假设最外层的div需要设置百分比高度样式):html, body { height: 100%;} .outDiv { height: 50%;} 不过这里有个需要注意的,若div里的内容超出了...

相似回答