CSS设置盒子容器(div)高度

CSS设置盒子容器(div)高度,第1张

CSS设置盒子容器(div)高度(height)始终为100%

前言

有时需要让一个盒子容器的 高度始终保持100%,无论怎么缩放浏览器高度始终不变。


就像一些网站的侧边栏,但直接设置盒子容器的高度为100%是不起作用的。


demo

如果想让一个元素的百分比高度height: 100%;起作用,你需要给这个元素的所有父元素的高度设定一个有效值。


拿下面的demo谈,div的父元素有body、html这两个,那么只要把父元素与自身元素都设置为100%高度即可。


<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div>我想拥有100%高度,我可以随意任浏览器缩放。


</div> </body> </html>

CSS:

html,body,div{
   height:100%;
}
/* 简单给div来点样式 */
div{
   background:red;
   width:200px;
}

效果:

到此这篇关于CSS设置盒子容器(div)高度(height)始终为100%的文章就介绍到这了,更多相关div高度始终为100%内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/616244.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-04-14
下一篇 2022-04-14

发表评论

登录后才能评论

评论列表(0条)

保存