请问 HTML5 中如何让 body 元素高度、宽度自动等于页面高度宽度?

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

这是一个创建于 2727 天前的主题，其中的信息可能已经有所发展或是发生改变。

请问 HTML 中如何让 body 元素高度、宽度自动等于页面高度宽度? 很初级的一个问题....麻烦各位大佬了..谢谢


.aclass{
width: 100%;
height: 100%;
border: 5px solid red;
}
<body class="aclass">
...
</body>

最后显示的还是只有已经有内容的元素们一起占用的高度（不过宽度的话貌似不设置 height:100%也会自动化的 100%...我不知道为什么）
另外如果在 body 元素的子元素中 width:30%,是不是取 body 宽度的 30%?
谢谢

body

宽度

aclass

元素

15 条回复 • 2016-11-07 13:44:59 +08:00

Newyorkcity

2016-11-06 22:48:26 +08:00

另外请问如何获取一个页面的宽度和高度呢?（通过数字的形式展示给我看）
谢谢

suinia

2016-11-06 22:50:06 +08:00

给 html 设置高度 html{height:100%}

SourceMan

2016-11-06 22:50:33 +08:00 via iPhone

html,body 都 100%写起来

ByZHkc3

2016-11-06 22:53:19 +08:00

每一个块级元素都会根据子元素占用的空间来调节宽高。
第二个问题，是的。

ByZHkc3

2016-11-06 22:54:17 +08:00

@Newyorkcity css 无法获取页面宽高，得用 js

Newyorkcity

2016-11-06 23:33:53 +08:00

@suinia
<pre>
<code>
<html {height:100%}>
...
</html>
</code>
</pre>
是这样吗?可是没有什么效果...
@ByZHkc3
感谢你的回答.
那请问应该怎么只通过 HTML 和 CSS 实现让一个图片〈位于 main 元素内部,要考虑 header 和 footer 元素〉可以总显示在页面正中央呢?
谢谢

suinia

2016-11-07 00:00:23 +08:00 via iPhone

看来你没有一点基础？这样咯. <html style="height:100%">...</html
>

yoa1q7y

2016-11-07 00:03:20 +08:00

html, body {
height: 100%;
width: 100%;
}

honk

2016-11-07 00:05:57 +08:00 via Android

vw, vh

Quaintjade

2016-11-07 00:19:45 +08:00

先看一下 HTML 和 CSS 的基础语法。
“通过数字的形式展示给我看”，单 CSS 做不到。如果你只是自己看的话，可以按 F12 看。

垂直居中是一个经常困扰初学者的问题，因为会牵涉到 display, position 等属性。

顺带一提，现在 css 里面有新的单位： vw, vh, vmin, vmax