Css 容纳内部div的外部div太大了几个像素_Css_Html_Web

Css 容纳内部div的外部div太大了几个像素

css html web

Css 容纳内部div的外部div太大了几个像素,css,html,web,Css,Html,Web,大家好，我正在尝试在外部div中容纳两个内部div（一个标题栏和一个画布）。内部div是动态生成的，具有固定的宽度和高度下面是一个（静态）示例代码，而下面是一个工作代码示例： <!DOCTYPE html> <html> <head> <style> .plugin { position: absolute; z-index: 800; border-bottom-right-r

大家好，我正在尝试在外部div中容纳两个内部div（一个标题栏和一个画布）。内部div是动态生成的，具有固定的宽度和高度

下面是一个（静态）示例代码，而下面是一个工作代码示例：

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


.插件{
位置：绝对位置；
z指数：800；
边框右下半径：5px；
-网络工具包盒阴影：5px 5px 12px 1px rgba（0,0,0,0.6）；
盒影：5px 5px 12px 1px rgba（0,0,0,0.6）；
}
.插件名称{
字体大小：13px；
颜色：rgba（255，255，255，0.9）；
字体系列：arial；
背景色：#300；
z指数：150；
高度：20px；
边框底部：1px实心白烟；
}
.plugin_画布{
位置：相对位置；
背景色：黑色；
边框：1px实心#300；
边框右下半径：5px；
z指数：800；
}
插件标题

如您所见，类

.plugin

的div延伸以容纳内部

.plugin\u title

和canvas div，但高度“增加”了5 px

在这个例子中，根据我的计算，css标题高度是20px+1px底部边框=21px。画布高度为348px+1px上边框+1px下边框=350px。根据开发者工具，两者之和为350px+21px=371px，而父插件为376px。这一点尤其明显，因为底部阴影在我希望的位置下方偏移5px

为什么会发生这种情况？这个问题有没有CSS（无javascript）解决方案

重要：容器（

.plugin

）div在内部div之前生成。所以我不能只设置容器div的高度，因为在创建时，我不知道画布div的高度。我可以在创建内部div后进行计算并重新设置容器div的高度，是的，但是我一直在寻找一个只有css的解决方案。

将

显示：表格单元格

添加到

.plugin

和

画布

.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;         
    }

将

显示：表格单元格

添加到

.plugin

和

画布

.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;         
    }

您可以通过在

.plugin

上设置

行高：0

，然后在

.plugin\u title

上明确指定它来解决此问题

您可以通过在

.plugin

上设置

行高：0

，然后在

上明确指定它