HTML5中子div的height：100%失效

sinat_39487275 2017-08-30 09:48:03

这是一个html5的网页

<!DOCTYPE html>
<html >
<head>
<title>bsl.html</title>
</head>
<body>
<div class='title' style="background-color:yellow;height: 50px">
</div>
<div class='content' style="background-color:red;min-height: 600px;width: 100%">
<div class='menu' style="background-color:blue;height:100%;width:20%">
</div>
</div>
</body>
</html>
上面的div menu中height:100%完全失效，要怎么才能使它生效？本人初学，请指导一下，谢谢！

...全文

431 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2017-08-31

打赏
举报

子元素height设置百分比就要求父元素明确的设置height才行。不能只设置min-height

sinat_39487275 2017-08-31

打赏
举报

引用 8 楼 qq_26433213 的回复:

可以用相对定位来做


<!DOCTYPE html>
<html >
<head>
<title>bsl.html</title>
</head>
<body>
	<div  class='title' style="background-color:yellow;height: 50px"></div>
	<div class='content' style="background-color:red;min-height: 600px;width: 100%;position:relative;">
		<div class='menu' style="background-color:blue;position:absolute;left:0;top:0;bottom:0;width:20%;">
		</div>
	</div>
</body>
</html>

嗯，找到方法了，谢谢

sinat_39487275 2017-08-31

打赏
举报

终于找到了解决方法了，代码如下： <!DOCTYPE html> <html > <head> <title>bsl.html</title> </head> <body style=> <div class='title' style="background-color:yellow;height: 50px"> </div> <div class='content' style="background-color:red;min-height: 600px;width: 100%;position:relative"> <div class='searchBar' style="background-color:green;height:50px;width: 100%;position:absolute"> </div> <div class='menu' style="background-color:blue;height:100%-50px;width:20%;position:absolute;top:50px;bottom:0"> </div> </div> </body> </html> 最后感谢各位大神的指导，谢谢

花下泥 2017-08-31

打赏
举报

可以用相对定位来做


<!DOCTYPE html>
<html >
<head>
<title>bsl.html</title>
</head>
<body>
	<div  class='title' style="background-color:yellow;height: 50px"></div>
	<div class='content' style="background-color:red;min-height: 600px;width: 100%;position:relative;">
		<div class='menu' style="background-color:blue;position:absolute;left:0;top:0;bottom:0;width:20%;">
		</div>
	</div>
</body>
</html>

一念_天涯 2017-08-31

打赏
举报

引用 4 楼 sinat_39487275 的回复:

[quote=引用 1 楼 qq_39893923 的回复:] 由于 div content 没有显示的设置高度，所以 div menu height:100%;没有效果。。给div content 设置一个高度。子元素就能显示出来。最终显示的高度为 min-height 、height 中的较大者

可是div content 的高度是没有固定值，只有最小高度，它的高度是随内容变而改变的，而div menu则要求高度与div content相同，有没有方法实现呢？[/quote] 你 div content 没有设置高度， div menu 高度100%是没有作用的。。你给div menu 添加内容，div menu 的高度就是内容的高度,在不超过600px,之前。menu 的高度小于content 的高度。超过600px之后，menu 和content 高度相等且根据内容的高度自动调整。当然你可以给menu 添加一个子div 让其高度为600px, 这样menu 就和content高度相等了

sinat_39487275 2017-08-31