CSS：將div高度設置爲容器的高度，但保留10px空間

我在父容器內部有一個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有相同的高度父容器，所以它重疊在底部...

來源

2012-05-07 Hinek

<!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>

docHeight = document.body.clientHeight; 
childHeight = docHeight-22; //2px due to borders 
document.getElementsByClassName('child').style.height = childHeight;

CSS

的邊緣

.child {padding:10px}

來源

2012-05-07 12:42:39 jumancy

我不得不在內部div中刪除'height：100％;'現在你的解決方案有效，謝謝！ – Hinek

我也加了JS解決方案，如果你想 – jumancy

<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:10; background-color:#FF0000;"> 
     <div style="border:1px solid black;height:100%;width:300px; background:#0000FF;"> 
      Hello world! 
     </div> 
    </div> 
</body>

只是刪除背景顏色。

我添加填充到父和刪除子

來源

2012-05-07 12:14:49 fesh

我只是想你的代碼，但它不工作。現在內部div沒有空間容器。 – Hinek

CSS：將div高度設置爲容器的高度，但保留10px空間

回答

相關問題