Question

我想制作一个div：

延伸至浏览器窗口的100％width和height
使所有内容垂直和水平居中，
min-height =所有内容+ 10% top＆amp; 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

＆＃13;

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

＆＃13;

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

＆＃13;

内容从100％高度DIV溢出

1 个答案: