Как сделать резиновый высоту блока браузера?
snippet
Подскажите, есть 3 блока, нужно чтоб картинка посередине была резиновая по высоте, чтоб сайт был без скролла и всё влазило в один экран, думаю резиновый сделать за счет высоты картинки, ширина ее не обязательно должна быть 100%.
Сделал общий блок 100vh, по сути он по высоте как надо, тогда футер и хедер не видно тогда.
Дополнительно:
Ответы:
snippet
- В том то и дело что блок должен быть с img а не с бекграудом.
с background понимаю как сделать. - .
- Артем Колчин, snippet
<style>.wrapper { min-height: 100%; display: block; height:100vh; }</style> |
<style>.wrapper { min-height: 100%; display: block; height:100vh; }</style>
Уберите из .wrapper overflow: hidden; и замените display: flex; на display: block; . Ну и заодно уберите flex-direction: column;, он уже никчему. display: flex; очень коварная штука. С одной стороны он делает что-то хоршее. а с лругой это что-то хорошее почи невозможно изменить. Так что лучше избегать flex и не использовать. И задайте всем блокам свойсво display, лучше block.
- Пробовал так, не работает.
-
<html> <title>site</title> <style>.wrapper { min-height: 100%; display: block; height:auto; } /* если .wrapper должно быть мин. высоты 100%, тогда да, min-height: 100%;. Но если задаться целью сделать резиновый wrapper, тогда просто, height:auto;, без min-height. Если фотка меньше чем высота экрана, тогда всё влезет. Если больше, тогда падо для неё ставить ограничение по высоте. И зачем ставить vh, height:100vh;, оно ни к чему, в % или px, vh в конечном результате никакой роли не сыграет. Вернее сыграет, но можно обходится и % px. vh мало где используется. А если используется то так надо. А просто лепить где прийдётся vh не надо. Для этого есть % и px. Что не так? Почему не получается? Если это надо вставить на сайт, тогда смотрите другие блоки и стили. Что мешает. Если же просто без сайта, тогда не понятно почему не выходит. Если просто, то не должно не выходить.*/ .header { width:100%; height:100px; background:red;display: block; } .content { display: block; height:auto; } .content img{ width:auto; max-width: 100%; height:auto; display: block; } .footer { width:100%; height:100px;display: block; background:green; }</style> <div class="wrapper"> <div class="header"></div> <div class="content"> <img src="https://w.forfun.com/fetch/71/71f0c755f4b257fb9987c25743d16388.jpeg"> </div> <div class="footer"></div> </div>
<html> <title>site</title> <style>.wrapper { min-height: 100%; display: block; height:auto; } /* если .wrapper должно быть мин. высоты 100%, тогда да, min-height: 100%;. Но если задаться целью сделать резиновый wrapper, тогда просто, height:auto;, без min-height. Если фотка меньше чем высота экрана, тогда всё влезет. Если больше, тогда падо для неё ставить ограничение по высоте. И зачем ставить vh, height:100vh;, оно ни к чему, в % или px, vh в конечном результате никакой роли не сыграет. Вернее сыграет, но можно обходится и % px. vh мало где используется. А если используется то так надо. А просто лепить где прийдётся vh не надо. Для этого есть % и px. Что не так? Почему не получается? Если это надо вставить на сайт, тогда смотрите другие блоки и стили. Что мешает. Если же просто без сайта, тогда не понятно почему не выходит. Если просто, то не должно не выходить.*/ .header { width:100%; height:100px; background:red;display: block; } .content { display: block; height:auto; } .content img{ width:auto; max-width: 100%; height:auto; display: block; } .footer { width:100%; height:100px;display: block; background:green; }</style> <div class="wrapper"> <div class="header"></div> <div class="content"> <img src="https://w.forfun.com/fetch/71/71f0c755f4b257fb9987c25743d16388.jpeg"> </div> <div class="footer"></div> </div>
А такой вопрос. Как вы делаете блок "Посмотреть результат", отдельео css,отдельно html, js. Я пробывал по всякому, не пойму как вы это делаете.
- UthvfyV, просто вставляю через frame codepen
вот ваше решение, оно не работает.
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы сделать блок с резиновой высотой, следует использовать относительные единицы измерения, такие как проценты или vh (viewport height).
Пример использования процентов для высоты блока:
html, body { height: 100%; } .block { height: 50%; /* блок будет занимать 50% высоты окна браузера */ }
Пример использования vh для высоты блока:
.block { height: 50vh; /* блок будет занимать 50% высоты видимой области окна браузера */ }
Таким образом, установив высоту блока в процентах или vh, вы сможете создать резиновый блок, который будет автоматически подстраиваться под высоту окна браузера. Помните также о том, что содержимое блока может влиять на его размер, поэтому при использовании этого метода убедитесь, что ваш контент также адаптивен к изменениям размеров блока.