[英]scale a div after children or 100% of window height
I have a question regarding height: 100%
我有一个关于
height: 100%
的问题height: 100%
how do you scale a div after the height of the window and at the same time after it's content你如何在窗口高度之后并同时在其内容之后缩放 div
(So one overrides the other if it's not true)? (所以如果不是真的,一个会覆盖另一个)?
standard height 100% css标准高度 100% css
How dose one scale the div after 100% or full height of it's content如何在 100% 或内容的全高后缩放 div
just ask and i will provide more info if something was unclear问问吧,如果有什么不清楚的,我会提供更多信息
I would recommend using Flexbox as I do in the snippet, but the key to viewport height and then expanding is min-height: 100vh
;我建议像在代码段中那样使用 Flexbox,但视口高度然后扩展的关键是
min-height: 100vh
; The vh
property (short for viewport height) is pretty well-supported. vh
属性(视口高度的缩写)得到了很好的支持。
Please see the snippet for a demonstration.请参阅片段以进行演示。
$(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.