Відповіді:
Хитрість у цьому полягає у визначенні 100% висоти на html та елементах тіла. Деякі браузери звертаються до батьківських елементів (html, body) для обчислення висоти.
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>
html, body
{
height: 100%;
}
#Header
{
width: 960px;
height: 150px;
}
#Content
{
height: 100%;
width: 960px;
}забудьте всі відповіді, цей рядок CSS працював для мене за 2 секунди:
height:100vh;1vh = 1% висоти екрана браузера
Для адаптивного масштабування макета ви можете використовувати:
min-height: 100vh[оновлення листопада 2018] Як згадується в коментарях, використання мінімальної висоти може уникнути виникнення проблем з дорогими конструкціями
[оновлення квітня 2018] Як згадувалося в коментарях, ще в 2011 році, коли було задано питання, не всі браузери підтримували одиниці перегляду. Інші відповіді тоді були рішеннями - vmaxвсе ще не підтримується в IE, тому це, можливо, ще не найкраще рішення для всіх.
min-height: 100vhбуло б набагато краще. Це може бути масштабним і для чуйних дизайнів.
Насправді найкращий підхід такий:
html {
height:100%;
}
body {
min-height:100%;
}Це вирішує все для мене, і це допомагає мені контролювати колонтитул, і він може мати фіксований нижній колонтитул незалежно від того, чи прокручується сторінка вниз.
Технічне рішення - ЗДОРОВАНО
Історично "висота" - це складна річ, порівняно з "шириною", найлегша. Оскільки css зосереджується на <body>створенні стилів для роботи. Код вище - ми дали <html>і <body>висоту. Тут виникає магія - оскільки у нас на ігровому столі "мінімальна висота", ми кажемо, що браузер <body>перевершує, <html>оскільки він <body>тримає мінімальну висоту. Це, в свою чергу, дозволяє <body>переосмислити, <html>оскільки <html>мав висоту вже раніше. Іншими словами, ми обманюємо браузер, щоб "зіткнутися" <html>зі столу, щоб ми могли самостійно стилюватися.
min-heightі height?
<body>створенні стилів для роботи. Цей код: ми дали <html>і <body>висоту. Тут виникає магія - оскільки у нас на ігровому столі "мінімальний зріст", ми говоримо сервера, який <body>перевершує<html> оскільки він <body>тримає мінімальну висоту. Це, в свою чергу, дозволяє <body>переосмислити, <html>оскільки <html>мав висоту вже раніше. Іншими словами, ми обманюємо сервер, щоб "зіткнутися" <html>зі столу, щоб ми могли стилізувати самостійно.
Ви можете використовувати vh для властивості мінімальної висоти.
min-height: 100vh;Ви можете зробити так, залежно від того, як ви використовуєте поля ...
min-height: calc(100vh - 10px) //Considering you're using some 10px margin top on an outside elementПрийняте рішення насправді не спрацює. Ви помітите , що зміст divбуде дорівнює висоті свого батька body. Отже, встановивши bodyвисоту 100%, встановіть її рівну висоті вікна браузера. Скажімо, вікно браузера було 768pxу висоту, встановивши divвисоту вмісту до 100%, divвисота буде, у свою чергу 768px. Таким чином, ви отримаєте заголовки div 150pxта істоти, що містять div 768px. Зрештою, у вас буде вміст 150pxвнизу сторінки. Для іншого рішення перегляньте це посилання.
За допомогою HTML5 ви можете зробити це:
CSS:
body, html{ width:100%; height:100%; padding: 0; margin: 0;}
header{ width:100%; height: 70px; }
section{ width: 100%; height: calc(100% - 70px);}HTML:
<header>blabablalba </header>
<section> Content </section>Для мене наступний працював добре:
Я загорнув заголовок та вміст у діві
<div class="main-wrapper">
<div class="header">
</div>
<div class="content">
</div>
</div>Я використовував цю посилання, щоб заповнити висоту флексбоком. CSS працює так:
.main-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.header {
flex: 1;
}
.content {
flex: 1;
}Для отримання додаткової інформації про техніку flexbox відвідайте посилання
Ви також можете встановити батьківське значення display: inline. Побачити http://codepen.io/tommymarshall/pen/cECyH
Не забудьте також встановити висоту html та тіло на 100%.
Прийнята відповідь не працює. І найвища відповідь не відповідає на власне запитання. Маючи заголовок із фіксованою висотою пікселя та наповнювачем у вікні браузера, що залишився, та прокрутіть для протікання. Ось рішення, яке фактично працює, використовуючи абсолютне позиціонування. Я також припускаю, що висота заголовка відома за звучанням "фіксованого заголовка" у питанні. Я використовую тут 150px як приклад:
HTML:
<html>
<body>
<div id="Header">
</div>
<div id="Content">
</div>
</body>
</html>CSS: (додавання кольору фону лише для візуального ефекту)
#Header
{
height: 150px;
width: 100%;
background-color: #ddd;
}
#Content
{
position: absolute;
width: 100%;
top: 150px;
bottom: 0;
background-color: #aaa;
overflow-y: scroll;
}Для більш детального ознайомлення з тим, як це працює, з фактичним вмістом всередині #Content, перегляньте цю jsfiddle , використовуючи рядки та стовпці завантажувальної програми.
bottomВластивість переконалися , що #Contentзалишається застряг в кінці сторінки. Я вдячний, що ви знайшли час, щоб пояснити це.
У цьому випадку я хочу, щоб мій основний вміст div був високою рідиною, щоб вся сторінка займала 100% висоти браузера.
height: 100vh;
Дозвольте мені додати сюди свої 5 копійок і запропонувати класичне рішення:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:0;">Content section</div>
</div>Це буде працювати у всіх браузерах, без сценарію, без гнучкості. Відкрийте фрагмент у повному режимі сторінки та змініть розмір веб-переглядача: бажані пропорції зберігаються навіть у повноекранному режимі.
idHeader.heightі idContent.topкоригуються для включення кордону, і вони повинні мати однакове значення, якщо межа не використовується. В іншому випадку елементи витягнуться з вікна перегляду, оскільки обчислена ширина не включає межу, поле та / або прокладку.left:0; right:0; можна замінити на width:100% тієї ж причини, якщо не використовується межа.padding-topта / або
padding-bottomатрибути до #idOuterелемента.Щоб завершити свою відповідь, ось макет нижнього колонтитула:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idContent" style="bottom:36px; top:0;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>Ось макет із заголовком та колонтитулом:
html {height:100%;}
body {height:100%; margin:0;}
#idOuter {position:relative; width:100%; height:100%;}
#idHeader {position:absolute; left:0; right:0; border:solid 3px red;}
#idContent {position:absolute; overflow-y:scroll; left:0; right:0; border:solid 3px green;}
#idFooter {position:absolute; left:0; right:0; border:solid 3px blue;}<div id="idOuter">
<div id="idHeader" style="height:30px; top:0;">Header section</div>
<div id="idContent" style="top:36px; bottom:36px;">Content section</div>
<div id="idFooter" style="height:30px; bottom:0;">Footer section</div>
</div>Якщо вам не потрібно підтримувати IE 9 і нижче, я б використовував flexbox
body { display: flex; flex-direction: column; }
.header { height: 70px; }
.content { flex: 1 1 0 }Вам також потрібно отримати тіло, щоб заповнити всю сторінку
body, html{ width:100%; height:100%; padding: 0; margin: 0;}CSS PLaY | хрестоподібний фіксований заголовок / колонтитул / централізований макет одного стовпця
CSS Frames, версія 2: Приклад 2, вказана ширина | 456, вулиця Берея
Важливо те, що, хоча це звучить легко, у вашому CSS-файлі буде дуже мало негарного коду, щоб отримати такий ефект. На жаль, це дійсно єдиний варіант.
#Header
{
width: 960px;
height: 150px;
}
#Content
{
min-height:100vh;
height: 100%;
width: 960px;
}Найкраще рішення, яке я знайшов до цього часу, - це встановлення нижнього колонтитула в нижній частині сторінки, а потім оцінити різницю зміщення нижнього колонтитула та елемента, який нам потрібно розгорнути. напр
<div id="contents"></div>
<div id="footer"></div>#footer {
position: fixed;
bottom: 0;
width: 100%;
}var contents = $('#contents');
var footer = $('#footer');
contents.css('height', (footer.offset().top - contents.offset().top) + 'px');Ви також можете оновити висоту елемента вмісту на кожному розмірі вікна, так що ...
$(window).on('resize', function() {
contents.css('height', (footer.offset().top -contents.offset().top) + 'px');
});Ви пробували щось подібне?
CSS:
.content {
height: 100%;
display: block;
}HTML:
<div class=".content">
<!-- Content goes here -->
</div>