亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

CSS讓子元素div的高度填滿父容器的剩余空間的方法

  發(fā)布時間：2021-02-23 17:03:40   作者：朽木自雕xmzd   我要評論
這篇文章主要介紹了CSS讓子元素div的高度填滿父容器的剩余空間的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.使用浮動的方式

效果圖：

代碼如下：(注意，此時.content的高度是500px，即父元素的高度，但是浮動元素在 .content 上方，蓋住了 .content，將 .nav背景樣式改為 background-color: rgba(0,0,0,0.1);可觀察到效果)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>高度充滿父容器</title>
	</head>
	<style>
		.parent {
			height: 500px;
			width: 300px;
			border: 1px solid red;/***/
			padding: 2px 2px;/***/
		}
		.nav {
			height: 100px;
			width: 100%;/*必須,沾滿寬度防止浮動 */
			float: left;/*必須 */
			background-color: red;
		}
		.content {
			height:100%;/*必須*/
			background-color: green;
		}
	</style>
	<body>
		<div class="parent">
			<div class="nav">
				固定高度
			</div>
			<div class="content">
				自適應(yīng)父容器, 充滿剩余的空間 
			</div>
		</div>
	</body>
</html>

2.使用定位

代碼如下：（推薦使用此種方法，沒有上面的那種方法的缺點）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>高度充滿父容器</title>
	</head>
	<style>
		.parent {
			position: relative;
			height: 500px;
			width: 300px;
			border: 1px solid red;/***/
			padding: 2px 2px;/***/
		}
		.nav {
			height: 100px;
			width: 100%;
			background-color: red;
		}
		.content {
			position:absolute;
			top: 100px;
			bottom: 0px;
			background-color: green;
			width: 100%;
		}
	</style>
	<body>
		<div class="parent">
			<div class="nav">
				固定高度
			</div>
			<div class="content">
				自適應(yīng)父容器, 充滿剩余的空間 
			</div>
		</div>
	</body>
</html>

到此這篇關(guān)于CSS讓子元素div的高度填滿父容器的剩余空間的方法的文章就介紹到這了,更多相關(guān)CSS子元素div高度填滿剩余空間內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • CSS實現(xiàn)子元素div水平垂直居中的示例

    這篇文章主要介紹了CSS實現(xiàn)子元素div水平垂直居中的示例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起
    2020-09-03

最新評論