我在父容器内部有一个div,并且希望它的宽度和高度均为300px,并且父级的高度相同,但每边的边距均为10 。我发现一些答案说,通过将height: 100%;
margin: 10px;
和margin-bottom
设置为负值,如-20px
(以补偿顶部和底部的10像素空间),可以做到这一点。我试过这样:CSS:将div高度设置为容器的高度,但保留10px空间
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height:100%;width:100%;margin:0;padding:0;">
<head></head>
<body style="height:100%;width:100%;margin:0;padding:0;">
<div style="height:100%;width:100%;margin:0;padding:0;">
<div style="border:1px solid black;height:100%;width:300px;margin-top:10px;margin-left:10px;margin-bottom:-20px;">
Hello world!
</div>
</div>
</body>
</html>
但它不起作用。该div有相同的高度父容器,所以它重叠在底部...
我不得不在内部div中删除'height:100%;'现在你的解决方案有效,谢谢! – Hinek
我也加了JS解决方案,如果你想 – jumancy