我在父容器内有一个 div，希望它的宽度为 300px，高度与父容器相同，但每边的边距为 10。我发现一些答案说，这可以通过将 height: 100%; margin: 10px; 和 margin-bottom 设置为负值来实现像 -20px (补偿顶部和底部的 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 与父容器具有相同的高度，因此它重叠在底部...
最佳答案
<!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;position:relative">
<div style="border:1px solid black;width:300px;position:absolute;left:10px;top:10px;bottom:10px;">
Hello world!
</div>
</div>
</body>
</html>
也由 JAVASCRIPT 编写
<div style="height:100%">
<div class="child"></div>
</div>
JS
docHeight = document.body.clientHeight;
childHeight = docHeight-22; //2px due to borders
document.getElementsByClassName('child').style.height = childHeight;
CSS
.child {padding:10px}
关于html - CSS:将div高度设置为容器的高度，但留10px空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10481826/