如何解决html、body元的高度问题

PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者云罗郡主，侵删。

本篇文章给大家带来的内容是关于如何解决html、body元素的高度问题，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

微信截图_20181123154452.png

首先：html元素和body元素均为块级元素。

简述：有时我们会发现未设置height: 100%，html、body元素的高度却为当前窗口的高度，看上去像是设置了height: 100%。

看下面两个例子：

例1：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<html>

<head>

<title>demo</title>

<style type="text/css">

* {

margin: 0;

padding: 0;

}

.container {

height: 30%;

}

</style>

</head>

<body>

<div class="container"></div>

</body>

</html>

此时的container的高度为窗口高度的30%，html、body元素的高度均为窗口的高度。

例2：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!DOCTYPE html>

<html>

  <head>

    <title>demo</title>

    <style type="text/css">

    * {

      margin: 0;

      padding: 0;

    }

    .container {

      height: 30%;

    }

    </style>

  </head>

  <body>

    <div class="container"></div>

  </body>

</html>

此时container的高度为0，设置的height: 30%并未生效，html、body元素的高度均为0。

原因：例1未设置当前文档类型，默认启用兼容模式，兼容模式下的html、body元素的高度即为窗口的高度，而例2设置了<!DOCTYPE html>，启用标准模式，而标准模式下的html、body元素的高度均为0。

以上就是对如何解决html、body元素的高度问题的全部介绍，如果您想了解更多有关Html5教程，请关注PHP中文网。

以上就是如何解决html、body元的高度问题的详细内容，更多文章请关注木庄网络博客！

相关阅读 >>

怎么解决Html <a>标签中文乱码问题

Html怎么导入图片

Html怎么让元素隐藏

latex的文件如何转Html

javascript与Html的结合方法详解

关于Html colgroup标签的用法你知道哪些？colgroup用法和col的详细介绍

Html中怎么删除节点

Html cite标签的用法你知道吗？Html cite属性的具体用法介绍

Html的块元素有哪些

Html如何设置禁止选中

更多相关阅读请进入《Html》频道 >>




标签：

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，您说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

分享从这里开始，精彩与您同在

相关推荐

评论

管理员已关闭评论功能...