html - 在 child 或窗口高度的 100% 之后缩放一个 div

Question

我有一个关于height: 100%
的问题 如何在窗口高度之后缩放 div 并同时在它的内容之后缩放
(所以如果不正确，一个会覆盖另一个)？

standard height 100% css
How dose one scale the div after 100% or full height of it's content

只要问，如果有什么不清楚我会提供更多信息

Answer 1

我建议像在代码片段中那样使用 Flexbox，但视口(viewport)高度然后扩展的关键是 min-height: 100vh； vh 属性(视口(viewport)高度的缩写)得到了很好的支持。

请查看代码片段进行演示。

$(function() {
  $(document).on('click', '.deck', function(evt) {
    
    $newEl = $('#copy-me').clone().text(HolderIpsum.words(~~(Math.random() * 20), true));

    $('.deck').append($newEl);
  });


});

body {
  background-color: gray;
}
.deck {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  background-color: white;
  padding: 1em;
  align-items: stretch;
}

.deck::after {
  content: 'CLICK ANYWHERE IN WHITE BOX TO ADD MORE CONTENT';
  order: 999;
  background-color: transparent !important;
  color: gray !important;
  border-color: gray !important;
}

.deck::after, .deck__card {
  flex: 33% 0 1;
  padding: 0.5em;
  margin: 1em;
  border: 2px solid orange;
  background-color: blue;
  color: orange;
  font-size: 2em;
  font-family: sans-serif;
  height: auto;
  min-height: 33vh;
  order: 1;
}

<script src="https://cdn.jsdelivr.net/holder-ipsum/0.1/holder-ipsum.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="deck">
  <div id="copy-me" class="deck__card" data-holder-ipsum-mode="words" data-holder-ipsum-words-count="3"></div>
</div>