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

This topic created in 3513 days ago, the information mentioned may be changed or developed.

请问 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 replies • 2016-11-07 13:44:59 +08:00

Newyorkcity

Nov 6, 2016

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

suinia

Nov 6, 2016

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

SourceMan

Nov 6, 2016 via iPhone

html,body 都 100%写起来

ByZHkc3

Nov 6, 2016

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

ByZHkc3

Nov 6, 2016

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

Newyorkcity

Nov 6, 2016

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

suinia

Nov 7, 2016 via iPhone

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

yoa1q7y

Nov 7, 2016

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

honk

Nov 7, 2016 via Android

vw, vh

Quaintjade

Nov 7, 2016

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

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

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

scyuns

Nov 7, 2016 via Android

楼上的你们让开吧我来上代码保证兼容绝对等于浏览器宽高
body{display:fiexd;top:0;right:0;left;0;bottom:0}
兄弟们你们觉得这段 css 如何

lslqtz

Nov 7, 2016

用 js ，然后写进 css 。

le720

Nov 7, 2016

vh ， vw 适合你的需求

Newyorkcity

Nov 7, 2016

@yoa1q7y
设置之后浏览器页面上出现可以上下滚动和左右滚动的功能..应该是成功了,可是为什么会存在滚动功能呢..
另外 body height:100%我也用过但没有效果,是一定要加上 html height:100%么?
谢谢

yoa1q7y

Nov 7, 2016

其实这些 100%都是相对数字，是要相对于父级才会有效的
html 写 100%是为了和窗口相对
body 写 100%是为了和 html 相对

如果有滚动条出现，那显然是你 body 内的内容尺寸超过了窗口的显示区域