Блок во всю высоту родителя с учетом высоты экрана
Добрый день. Столкнулся с такой задачей: есть макет: страница должна занимать всю высоту экрана, вертикальный скролл отсутствует.
Есть шапка, ее толщина может изменяться. Ниже блок main, внутри которого во всю высоту находится меню aside слева и страница вывода результата справа. Дак ват, это меню должно занимать 100% высоты блока main, и в нем при наличии большого количества пунктов есть горизонтальная прокрутка пунктов.
Для всей страницы я ставлю:
{ width: 100vh; overflow: hidden; }
— чтобы сделать его высоту равной высоте экрана и скрыть все что за него выходит. Внутри него шапка и блок main.
И не совсем понимаю как мне быть с блоком main, чтобы он занял всю высоту монитора оставшуюся от шапки до низа страницы? 100vh тут не пропишешь, так как он тогда не весь влазит. Писать например 80vh тоже не совсем правильно, так как шапка может измениться и 80vh потом тоже не будет хватать. Наверняка есть способ сказать блоку чтобы он занял все оставшееся место родителя?
Центральный блок должен растягиваться на всю высоту экрана, а не на высоту контента
Всем привет. Сразу к делу. Сайт делаю резиновым. Структура сайта по сути из трёх блоков. Шапка.
Блок не растягивается на всю высоту экрана
Внутри <div располагается таблица, которая растягивается на всю высоту.
растянуть блок на всю высоту экрана пользователя
почему когда я задаю элементу .first__element — display:flex; элемент перестает растягиваться на.
body> header>header/header> aside>aside/aside> article>article/article> /main> /body>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
body { display: grid; grid-template-rows: 50px 1fr; height: 100vh; margin: 0; } main { display: flex; } aside { flex-basis: 200px; } article { flex-grow: 1; }
Попробовал, но не сработало. Попробую чуть точнее описать, прилагаю картинку рукописную)) Как видно есть шапка, есть боковой блок. Он должен занять всю высоту оставшуюся на странице после шапки. Внутри этого блока есть два элемента: заголовок и меню. Дак вот, меню надо растянуть на всю высоту этого блока оставшуюся после заголовка. И так как меню может содержать много пунктов, там должен появляться скролл для его прокрутки. Ну а прокрутка само собой должна прокручивать только меню, не трогая шапку и не выходя за пределы экрана.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
body> header> header /header> aside> p>menu header/p> ul> li>item1/li> li>item2/li> li>item3/li> li>item4/li> li>item5/li> li>item6/li> li>item7/li> li>item8/li> li>item9/li> li>item10/li> li>item11/li> li>item12/li> li>item13/li> li>item14/li> li>item15/li> li>item16/li> li>item17/li> li>item18/li> li>item19/li> li>item20/li> li>item21/li> li>item22/li> li>item23/li> li>item24/li> li>item25/li> li>item26/li> li>item27/li> li>item28/li> li>item29/li> li>item30/li> li>item31/li> li>item32/li> li>item33/li> li>item34/li> li>item35/li> li>item36/li> li>item37/li> li>item38/li> li>item39/li> li>item40/li> li>item41/li> li>item42/li> li>item43/li> li>item44/li> li>item45/li> li>item46/li> li>item47/li> li>item48/li> li>item49/li> li>item50/li> /ul> /aside> /main> /body>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
body { margin: 0; height: 100vh; } header { height: 20%; } main { height: 80%; } aside { width: 30%; display: flex; flex-direction: column; height: 100%; } ul { overflow-y: scroll; }
CSS aside height 100% when using sticky footer
The following tutorial shows you how to use CSS to do «CSS aside height 100% when using sticky footer».
CSS Style
The CSS style to do «CSS aside height 100% when using sticky footer» is
html !-- w w w . d e m o 2 s . c om --> box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; height:100%; > body < color:white; font-family:'Century Gothic', 'Arial', Helvetica, Sans-Serif; padding-top:40px; padding-bottom:40px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; height:100%; > header < background-color:rgb(0, 162, 232); height:40px; width:100%; position:absolute; top:0px; > footer < background-color:rgb(0, 162, 232); height:40px; width:100%; position:fixed; bottom:0px; > aside < box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; height:100%; overflow:auto; color:rgb(0, 162, 232); >
HTML Body
body> header> I'm a header! aside> Lots and lots and lots of content! Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> Glee is awesome! br> !-- w w w . d e m o 2 s . c om --> footer> I'm a footer! The following iframe shows the result. You can view the full source code and open it in another tab.
html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> html !-- w w w . d em o 2 s . c o m--> box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height: 100%; > body < color: white; font-family: 'Century Gothic', 'Arial', Helvetica, Sans-Serif; padding-top: 40px; padding-bottom: 40px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height: 100%; > header < background-color: rgb(0, 162, 232); height: 40px; width: 100%; position: absolute; top: 0px; > footer < background-color: rgb(0, 162, 232); height: 40px; width: 100%; position: fixed; bottom: 0px; > aside < box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; height: 100%; overflow: auto; color: rgb(0, 162, 232); > body> header> I'm a header! aside> Lots and lots and lots of content! Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> Glee is awesome!br/> footer> I'm a footer! Related
- CSS creating a JavaScript sticky footer (Demo 2)
- CSS Creating a sticky bottom footer with internal wrapper which stretches from header to footer
- CSS and Flexbox: Getting a Footer to Stick
- CSS aside height 100% when using sticky footer
- CSS auto height and sticky footer
- CSS Flexbox or CSS Grid for Header, Sticky Footer and Vertically Aligned Middle Content all together
- CSS Flexbox or CSS Grid for Header, Sticky Footer and Vertically Aligned Middle Content all together (Demo 2)
demo2s.com | Email: | Demo Source and Support. All rights reserved.
Верстка: main и aside во всю высоту страницы
У тегов header , nav и footer фиксированная высота (из-за этого не получается нормально использовать height: 100% ). Высота aside и main подстраивается под контент. Как сделать, чтобы высота обоих блоков была одинаковой? Не хочется использовать JavaScript и всякие обманки (например, лишний div с background-color как у aside ). Возможно сделать это средствами HTML+CSS?
1 ответ 1
Нашёл решение. Это flexbox ( display: flex ). Работает во всех браузерах, кроме IE8-.
Мой исправленный и рабочий пример:
* < padding: 0; margin: 0; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; >html, body < width: 100%; height: 100%; >p < padding: 10px 0; >h1 < font-weight: 600; font-size: 1.6em; >h2 < font-weight: 600; font-size: 1.4em; >strong < font-weight: 600; font-size: 16px; >/**********************************/ #wrapper < max-width: 1400px; margin: 0 auto; >header, nav, main, footer < width: 100%; position: relative; background-color: #333; height: 100px; >nav < background-color: #262626; border-top: 1px solid rgba(255, 255, 255, 0.1); height: 70px; >main < background-color: #fff; height: 100%; ; /**/ display: flex; >#Content < padding: 40px; column-count: 2; /**/ flex-grow: 1; >aside < background-color: #f7f7f7; padding: 40px 20px; width: 300px; /**/ flex-shrink: 0; >#aside < width: 300px; height: 100%; background-color: #f7f7f7; >footer
What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where can I get some?
There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.
Что нужно сделать написано здесь (вкратце): Скажите «Привет, flexbox»
На Хабре подробно расписано, что такое flexbox и как его использовать (2014 год):
Про баги кроссбраузерности flexbox (2015 год):
Ещё про использование flexbox и его кроссбраузерность (2014 год):