如何让高度自适应所有屏幕？

Question

这是PC上。
但是在手机上，就会有滚动条。
因为我设置height=600px;

但是我希望在手机上也不需要滑动，感觉很不爽。
请问这个怎么解决呢？

---

有朋友说用body fixed,测了下，貌似没用。

---

最后还是用js，设置高度为window.innerHeight解决了，谢谢大家。

Answer 1

html {height: 100%;}
body {height: 100%;}
//去滚动条
::-webkit-scrollbar {
width: 0;
height: 0;
}

Answer 2

可以试试用 CSS3 的长度单位 vh 设置高度。
相对于视口的高度。视口被均分为100单位的vh。高度占满整个窗口就是height: 100vh。

Answer 3

CSS：

body {
    position: fixed;
}

题主又说：

我想达到的是某元素高度=任何屏幕的高度，也就是说动态变化

这就是问题没描述清楚嘛，这种需求用 js 解决最简单。

Answer 4

body{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
}

Answer 5

我一般是在css开始的部分添加
body,html{
height:100%;
}
然后在接下来的部分中，你就可以通过百分比来控制页面中其他部件的高度了，如果没有设置这个高度100%的话，在后面用百分比来设置页面内部高度的话是不行的好像。

Answer 6

使用media queries,例如：

/* for 480px or less*/
@media screen and (max-width:480px) {
    body {height:auto;}
}

Answer 7

怎么用js 控制啊， 请楼主赐教。。。。怎样设置高度，自适应 手机端、平板等~