Question

我有关于高度属性的问题。我正在建立一个网站，并希望这样做：有一个div元素崩溃其他人，这有一个子div，当我调整窗口高度，然后父div获得窗口高度。没关系，但是孩子div没有固定，所以有些子元素是没有显示的。那些留下来的孩子们......请帮助我...

我希望看到黄色区域的完整补丁，但是当我调整浏览器高度时，一些p标记保持不变...我该如何解决？无论浏览器高度黄色补丁必须显示...请帮助我...

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*, *:before, *:after{
		padding:0;
		margin:0;
    	box-sizing: border-box;
	}
	html,body{
		height:100%;
		overflow-y: hidden;
	}
	.d{
	}
	.d1{
		height:100%;
		overflow:hidden;
		position:relative;
	}
	.d2{
		display:block;
		position:relative;
		background:yellow;
		overflow-y: auto;
		height:90%;
	}
	.d3{
		height:90px;
		background:blue;
	}
	</style>
</head>
<body>
	<div class="d d1">
		<div class="d3">
			<p>dadsdsaasd</p>
			<p>dadsdsaasd</p>
			<p>dadsdsaasd</p>
			<p>dadsdsaasd</p>
			<p>dadsdsaasd</p>
		</div>
		<div class="d2">
			<p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>assaddsa</p><p>sonososososo</p>
		</div>
	</div>
</body>
</html>

Answer 1

尝试将position:inherit用于子div。希望这有效

Answer 2

您可以使用css calc。

Jsfiddle

.d2
{
    height: calc( 100% - 90px);
}

Answer 3

像素和百分比在一起的高度通常不会很好。溢出：隐藏隐藏了90％div，因为它超出了视口大小。删除溢出：隐藏为父div，body＆amp;用于查看隐藏内容的html标记。如果有任何特定的溢出原因：隐藏到顶层。通过提及两个子div的百分比值，您仍然可以实现相同的目标

根据你的代码 .D2 {高度：87％} .d3 {高度：13％}

css身高和溢出

3 个答案: