CSS怎么設(shè)置盒子容器div高度始終為100%

發(fā)布時間：2021-03-17 14:27:44 來源：億速云閱讀：473 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)CSS怎么設(shè)置盒子容器div高度始終為100%的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

前言

有時需要讓一個盒子容器的高度始終保持100%，無論怎么縮放瀏覽器高度始終不變。就像一些網(wǎng)站的側(cè)邊欄，但直接設(shè)置盒子容器的高度為100%是不起作用的。

demo

如果想讓一個元素的百分比高度height: 100%;起作用，你需要給這個元素的所有父元素的高度設(shè)定一個有效值。拿下面的demo談，div的父元素有body、html這兩個，那么只要把父元素與自身元素都設(shè)置為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怎么設(shè)置盒子容器div高度始終為100%

感謝各位的閱讀！關(guān)于“CSS怎么設(shè)置盒子容器div高度始終為100%”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

猜你喜歡