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

2016-11-06 22:46:11 +08:00
 Newyorkcity

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


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

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

15769 次点击
所在节点    问与答
15 条回复
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
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
看来你没有一点基础？这样咯. <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
vw, vh
Quaintjade
2016-11-07 00:19:45 +08:00
先看一下 HTML 和 CSS 的基础语法。
“通过数字的形式展示给我看”，单 CSS 做不到。如果你只是自己看的话，可以按 F12 看。

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

顺带一提，现在 css 里面有新的单位： vw, vh, vmin, vmax
scyuns
2016-11-07 01:27:38 +08:00
楼上的你们让开吧 我来上代码 保证兼容绝对等于浏览器宽高
body{display:fiexd;top:0;right:0;left;0;bottom:0}
兄弟们你们觉得这段 css 如何
lslqtz
2016-11-07 01:34:44 +08:00
用 js ，然后写进 css 。
le720
2016-11-07 09:28:17 +08:00
vh ， vw 适合你的需求
Newyorkcity
2016-11-07 13:31:02 +08:00
@yoa1q7y
设置之后浏览器页面上出现可以上下滚动和左右滚动的功能..应该是成功了,可是为什么会存在滚动功能呢..
另外 body height:100%我也用过但没有效果,是一定要加上 html height:100%么?
谢谢
yoa1q7y
2016-11-07 13:44:59 +08:00
其实这些 100%都是相对数字，是要相对于父级才会有效的
html 写 100%是为了和窗口相对
body 写 100%是为了和 html 相对

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

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/318560

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX