内容从 100% 高度 DIV 溢出

Question

我想创建一个div：

1. 拉伸到浏览器窗口的 100% width 和 height，
2. 使里面的所有内容垂直和水平居中，
3. 拥有min-height = 所有内容+ 10% 的top&bottom padding。

我已经编写了一些代码：

html {
  height: 100%;
}
body {
  height: 100%;
}
.blah {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: center;
  text-align: center;
  padding: 10% 0 10% 0;
  background: #ffb3b3;
}

<div class="blah">
  <p>Here goes some content</p>
</div>

jsfiddle也一样

如您所见，它工作正常，除了 第 3 点 - 当缩小时，内容会溢出它周围的 div： screen

我尝试设置为.blah：

height: auto;
min-height: 100% !important;
position: relative;

但它不适用于更大的分辨率 - div 大于浏览器 height。

这个solution 不起作用。

我将非常感谢任何想法。

Answer 1

你只需要使用box-sizing:border-box

html,
body {
  height: 100%;
  margin: 0
}
.blah {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  background: #ffb3b3;
  min-height: 100%;
  padding: 10% 0;
  box-sizing: border-box;
}

<div class="blah">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed maximus rhoncus erat sit amet ullamcorper. Cras quis vulputate ex, ut sollicitudin massa. Vivamus vitae ipsum posuere, eleifend quam quis, pulvinar tellus. Cras semper, lectus sit amet molestie
  
</div>