html中常常遇到body和html的最小高度不能够100%,这个该怎么解决?


html中常常遇到body和html的最小高度不能够100%,用css设置了最小高度min-height:100%,还是不起作用,我就每次都是用js来控制,尤其在手机端的网页,设置背景颜色的时候大多都需要设置最小高度为100%。求助大家的好建议

css3 html5 JavaScript

kuki88 8 years, 9 months ago

要想页面全屏显示?

  1. 令html,body {width: 100%, height: 100%;}。这样子<body>里面的<div>只要设置width: 100%,height: 100%;即可使<div>满屏显示。

  2. 通过javascript选择<body>下<div>,令其宽度等于window.innerWidth;高度等于window.innerHeight

【注】方法一会有副作用:如果页面有<input>,在移动端下,点击<input>输入时,软键盘可能覆盖<input>,无法使<input>自动往软键盘上方滚动

平和島臨也 answered 8 years, 9 months ago

我也想搞明白html里面的高度问题。它100%显然是没有用的。除非这个与元素的父元素确定了高度,如120px之类的,那么这个元素的height:100%;才会有意义。要不然你可以试试用js获取现在网页的高度这种方法?手机端的不能令父元素fill-parent吗?之后子元素自拟宽度?不知道可不可行。

东方萃妄想 answered 8 years, 9 months ago


 html,
body{
  height: 100%;
}

或者移动端可以尝试 min-height: 100vh;

今天还吃鱼 answered 8 years, 9 months ago

你希望至少撑满一个屏幕的时候,如果设置元素100%


 div{
    height:100%;
}

由于百分比是相对的,div会根据父元素计算基数,得到基数*100% 的高度

所以需要给body 设置 高度


 body {
 height:100%;
}

同理, 还要设置html


 html {
  height: 100%;
}

类似的,可以给html设置font-size来控制整个页面的默认font-size;这个方法常用于不同分辨率的移动设备的web页面中。

豊総耳机子 answered 8 years, 9 months ago


有吗,直接设置body或者html的背景就是全屏的背景了吧。

爱吃菠菜的猫 answered 8 years, 9 months ago

JS计算?赋值?不过这好麻烦,希望能有更简便的办法。

永远D风雅 answered 8 years, 9 months ago

html,body{


 height: 100%;

}

jk0833 answered 8 years, 9 months ago

Your Answer