css怎样自适配屏幕高度?

css怎样自适配屏幕高度?下面本篇文章给大家介绍一下css实现自适应屏幕高度的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

css实现自适应屏幕高度

在CSS中,可以通过设置height属性的值为100%(相对长度)来让自适应屏幕高度。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body,html{
margin:0px;
height:100%;
}
.div1{
width:100px;
height:100%;
background:red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>

说明:

百分比是一个相对长度单位,相对于包含块(containing block)的高宽或字体大小来取值。

关于包含块(containing block)的概念,不能简单地理解成是父元素。

如果是静态定位和相对定位,包含块一般就是其父元素。

如果是绝对定位的元素,包含块应该是离它最近的 position为非static属性的祖先元素。

如果是固定定位的元素,它的包含块是视口(viewport)。

具体可以参考 W3Help

更多web前端自学知识,请查阅 HTML中文网 !!

以上就是css怎样自适配屏幕高度?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏