外部div容納內部divs太大了幾個像素

Example Plunk here。大家好，我試圖容納外部div內的兩個內部div（一個標題欄和一個畫布）。內部div是動態生成的，並具有固定的寬度和高度。外部div容納內部divs太大了幾個像素

A（靜態）示例代碼如下下方，而工作的代碼示例是在這裏：

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    .plugin { 
      position: absolute; 
      z-index: 800; 
      border-bottom-right-radius: 5px; 
      -webkit-box-shadow: 5px 5px 12px 1px rgba(0, 0, 0, 0.6); 
      box-shadow: 5px 5px 12px 1px rgba(0, 0, 0, 0.6); 

     } 

    .plugin_title { 
     font-size: 13px; 
     color: rgba(255, 255, 255, 0.9); 
     font-family: arial; 
     background-color: #300; 
     z-index: 150; 
     height: 20px; 
     border-bottom: 1px solid whitesmoke; 
    } 

    .plugin_canvas { 
     position: relative; 
     background-color: black; 
     border: 1px solid #300; 
     border-bottom-right-radius: 5px; 
     z-index: 800; 
    } 
    </style> 
</head> 
<body> 
<div class="plugin"> 
    <div class="plugin_title"> 
    <span>Plugin Title</span> 
    </div> 
    <canvas width="428" height="348" class="plugin_canvas"></canvas> 
</div> 
</body> 
</html>

正如你所看到的，類.plugin綿延的股利，以適應內.plugin_title和帆布DIV，而是「成長「5px的高度。

在這個例子中，根據我的計算，CSS標題高度是20px + 1px bottom border = 21px。畫布高度爲348px + 1px上邊框+ 1px下邊框= 350px。根據Developer Tools，兩者的總和爲350px + 21px = 371px，而父項.plugin爲376px。這是特別明顯的，因爲底部陰影偏移5px，低於我想要的位置。

爲什麼會發生這種情況？有沒有一個CSS（no-javascript）解決這個問題？

重要：容器（.plugin）div是在內部div之前生成的。所以我不能只在容器div中設置高度，因爲在創建時，我不知道canvas div的高度。我可以做計算，並在創建內部div後重新設置容器div的高度，是的，但是我一直在尋找一個只用css的解決方案。

來源

2013-04-10 janesconference

添加display:table-cell到.plugin和canvas

.plugin { 
      position: absolute; 
      z-index: 800; 
      border-bottom-right-radius: 5px; 
      -webkit-box-shadow: 5px 5px 12px 1px rgba(0, 0, 0, 0.6); 
      box-shadow: 5px 5px 12px 1px rgba(0, 0, 0, 0.6); width:auto; 
      display:table-cell;   
} 
    .plugin_canvas { 
     position: relative; 
     background-color: black; 
     border: 1px solid #300; 
     border-bottom-right-radius: 5px; 
     z-index: 800; 
     display:table-cell;   
    }

DEMO

來源

2013-04-10 09:43:25 Sowmya

關於「爲什麼」的一部分：爲什麼這個工作？關於「爲什麼」部分的 – janesconference 2013-04-10 09:59:59

您可以通過設置.pluginline-height:0，然後明確指定它.plugin_title解決這個問題。

Plunker

.plugin { 
    line-height:0; 
} 

.plugin_title { 
    line-height:20px; 
}

來源

2013-04-10 09:47:27

：爲什麼這有效？ – janesconference 2013-04-10 10:00:49

外部div容納內部divs太大了幾個像素

回答

相關問題