#html #css
#HTML #CSS
Вопрос:
поэтому у меня есть код, похожий на этот (я слишком упростил дизайн)
html { height: 100%; } body { min-height: 100%; } .register{ } .background_image{ background-image:url("https://www.freecodecamp.org/news/content/images/2021/06/w-qjCHPZbeXCQ-unsplash.jpg"); background-size:cover; } .col{ width:300px; height:200px; margin-top:10px; background-color:coral; text-align:center; } lt;div class="background_image"gt; lt;div class="register"gt; lt;div class="col"gt; Some content lt;/divgt;lt;div class="col"gt; lt;divgt; Some content lt;/divgt; lt;/divgt;lt;div class="col"gt; lt;divgt; Some content lt;/divgt; lt;/divgt;lt;div class="col"gt; lt;divgt; Some content lt;/divgt; lt;/divgt;lt;div class="col"gt; Some content lt;/divgt; lt;/divgt; lt;/divgt; Когда у меня div with class = register меньше содержимого, чем на видовом экране (например , 3 строки), я хочу, чтобы этот div был на видовом экране, но когда у него больше содержимого, чем на видовом экране, он должен распространяться, чтобы соответствовать содержимому. Я пытался с
@media screen and (min-width: 800px) { .register{ height: 100vh; } } но тогда, если есть контент вне области просмотра, но это делает мои register 100 вч независимо от того, насколько велик контент.
Ответ №1:
Вы можете установить минимальную высоту на div.
В этом фрагменте явно используется 100 вч.
Примечание. В этом фрагменте осталось только 2 внутренних раздела, поэтому вы можете увидеть эффект при запуске полной страницы фрагмента на экране рабочего стола/ноутбука.
html { height: 100%; } body { min-height: 100vh; background-color cyan; } .register{ min-height: 100vh; } .background_image{ background-image:url("https://www.freecodecamp.org/news/content/images/2021/06/w-qjCHPZbeXCQ-unsplash.jpg"); background-size:cover; } .col{ width:300px; height:200px; margin-top:10px; background-color:coral; text-align:center; } lt;div class="background_image"gt; lt;div class="register"gt; lt;div class="col"gt; Some content lt;/divgt;lt;div class="col"gt; lt;divgt; lt;/divgt; lt;/divgt; Комментарии:
1. Это решение так просто, и я так сильно задумался.