我有一个关于height: 100%
的问题
如何在窗口高度之后以及在内容之后的同时缩放div(如果不是这样,那么一个会覆盖另一个)?
standard height 100% css
How dose one scale the div after 100% or full height of it's content
请问,如果有什么不清楚我会提供更多信息
答案 0 :(得分:1)
我建议在代码段中使用Flexbox,但视口高度然后展开的关键是min-height: 100vh
; vh
属性(视口高度的缩写)得到了很好的支持。
请参阅演示文稿的片段。
$(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>