Question

大家好，我正在尝试在外部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>

正如你所看到的，类.plugin的div延伸以容纳内部.plugin_title和canvas div，但是“增长”高度为5 px。

在这个例子中，根据我的计算，css标题高度是20px + 1px底部边框= 21px。画布高度为348px + 1px顶部边框+ 1px底部边框= 350px。根据Developer Tools，两者之和为350px + 21px = 371px，而父.plugin为376px。这一点尤其明显，因为底部阴影偏离我想要的位置5px。

为什么会这样？是否有解决此问题的CSS（无javascript）解决方案？

重要：容器（.plugin）div在内部div之前生成。所以我不能只在容器div中设置高度，因为在创建时，我不知道canvas div的高度。我可以在创建内部div之后进行计算并重新设置容器div的高度，是的，但我一直在寻找一种仅限css的解决方案。

Answer 1

您可以通过在line-height:0上设置.plugin，然后在.plugin_title上明确指定它来解决此问题。

Plunker

.plugin {
    line-height:0;
}

.plugin_title {
    line-height:20px;
}

Answer 2

将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

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

2 个答案: