内容从 100% 高度溢出 DIV

Question

我想制作一个 div 其中：

扩展到浏览器 window、

width

height

使内部的所有内容垂直和水平居中，
有 min-height = top&bottom 的所有内容 + 10% 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.

大

这个不起作用。

如有任何想法，我将不胜感激。

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>

内容从 100% 高度溢出 DIV

Content overflows from 100% height DIV

html

css

overflow

flexbox