Question

我正在开发一个显示统计数据的简单工具。我们想要显示2个面板，内部相同的高度宽小盒子，所有相同的高度。

我的结果非常接近我们想要制作的内容，但这些方框有奇怪的填充。

<div class="col-md-6 greybox">
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-12">
        <h2>Title of the box</h2>
      </div>
    </div>
  </div>
  <div class="col-md-12 flex">
    <div class="row flex">
      <div class="col-md-6">
        <div class="statbox">
          <div class="absolute-center">
            <h3>Revelant</h3>
            <p>lorem</p>
          </div>
        </div>
      </div>
      <div class="col-md-6">
        <div class="statbox">
          <div class="absolute-center">
            <h3>Revelant data</h3>
            <p>Lorem ipsum</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

完整脚本可在Integer protocol
我们正在使用Bootstrap 3.7。
我们正在使用Scss。
我不感兴趣使用Jquery来解决问题（我们使用Angular2）
数据将是动态的。我无法使用固定高度来解决问题。
提供的codepen是一个原型，带有占位符颜色，我保证结果会有更漂亮的颜色:)。
奇怪的填充可能是由盒子的标题引起的，但我不知道如何解决它。
删除标题，然后修改.greybox的CSS修复问题
我们需要在最终结果中保留标题。

感谢您帮助我，我的想法！

（对不起，英语不是我的第一语言）

Answer 1

我已经更新了你的css（scss），它没有任何你在你的图像中指向的填充或空格，请参阅codepen here

h2{
      margin: 0;
    }

html,
body {
  padding: 10px;
  .greybox {
    background-color: #c7c7c7;
    padding-bottom: 20px;
    margin: 0 10px 300px;
    border-radius: 10px;
  }
  .statbox {
    background-color: #f1f1f1;
    padding: 10px;
    border-radius: 10px;
    height: 100%;
    width: 100%;
    text-align: center;
    display: table;
    bottom: 0px;
    h3 {
      font-weight: bold;
      color: #1155cc;
      margin: 0;
    }

  }
  .flex {
    display: flex;
    //flex-direction: row;
    //justify-content: space-around;
    height: 100%;
    width: 100%;
    margin: 0;
  }
  .absolute-center {
    display: table-cell;
    vertical-align: top;
    text-align: center;
    height: 100%;
    padding: 0;
    margin: 0;
  }
}

我的Flexbox有一些奇怪的不必要的填充

1 个答案: