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

前言

有时需要让一个盒子容器的高度始终保持100%，无论怎么缩放浏览器高度始终不变。就像一些网站的侧边栏，但直接设置盒子容器的高度为100%是不起作用的。

demo

如果想让一个元素的百分比高度h ei ght: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。拿下面的demo谈，div的父元素有body、ht ML 这两个，那么只要把父元素与自身元素都设置为100%高度即可。

<!DOCTY PE  html>
<html>
<head>
<t IT le>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%内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是为你收集整理的 CSS设置盒子容器(div)高度(height)始终为100% 全部内容，希望文章能够帮你解决 CSS设置盒子容器(div)高度(height)始终为100% 所遇到的问题。

如果觉得网站内容还不错，推荐好友。

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did201298

更新时间：2023-04-27 阅读：30次