CSS Div растянуть на 100% высоты страницы

196

У меня есть панель навигации в левой части моей страницы, и я хочу, чтобы она растягивалась до 100% высоты страницы. Не только высота области просмотра, но и области, скрытые до прокрутки. Я не хочу использовать JavaScript для достижения этой цели.

Это можно сделать в HTML / CSS?

css  height  max  stretch 
— Том
источник

Ответы:

171

Вот решение, которое я наконец-то придумал, когда использовал div в качестве контейнера для динамического фона.

  • Удалить z-indexдля не фонового использования.
  • Удалить leftили rightдля столбца полной высоты.
  • Удалить topили bottomдля полной ширины строки.

РЕДАКТИРОВАТЬ 1: CSS ниже был отредактирован, потому что он не отображался правильно в FF и Chrome. переместился position:relativeв HTML и установил тело height:100%вместо min-height:100%.

РЕДАКТИРОВАТЬ 2: Добавлены дополнительные комментарии к CSS. Добавил еще несколько инструкций выше.

CSS:

html{
    min-height:100%;/* make sure it is at least as tall as the viewport */
    position:relative;
}
body{
    height:100%; /* force the BODY element to match the height of the HTML element */
}
#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
    z-index:-1; /* Remove this line if it's not going to be a background! */
}

HTML:

<!doctype html>
<html>
<body>
    <div id="cloud-container"></div>
</body>
</html>

Зачем?

html{min-height:100%;position:relative;}

Без этого облачный контейнер DIV удаляется из контекста макета HTML. position: relativeгарантирует, что DIV остается внутри блока HTML, когда он рисуется так, что bottom:0ссылается на нижнюю часть блока HTML. Вы также можете использовать height:100%облачный контейнер, так как он теперь ссылается на высоту тега HTML, а не на область просмотра.

— Knyri
источник
это здорово, но не в центре. какое-нибудь решение для этого? поле: 0 авто; не работает
— крем
Потрясающий ответ. Я заметил, что вы должны использовать минимальную высоту (а не только высоту) для htmlэлемента. Это почему?
— HartleySan
Использование heightговорит «ты такой высокий; не больше и не меньше. Это означает, что это будет высота области просмотра. Мы хотим, чтобы он был по крайней мере таким же высоким, как окно просмотра или выше. min-heightделает это красиво.
— Книри,
1
Там есть z-index, потому что это фрагмент движущегося фона, который я сделал, и я хотел убедиться, что div остался на заднем плане. Это не нужно для нормальных элементов.
— Knyri
5
Это отлично. Я занимаюсь CSS уже 15 лет, и мне никогда не приходило в голову, что позиционирование в <html>и позиционирование в окне просмотра - это две разные вещи. Спасибо!
— Бен Халл,
82

С HTML5 проще всего сделать height: 100vh. Где «vh» обозначает высоту окна просмотра окна браузера. Реагирует на изменение размеров браузера и мобильных устройств.

— alchuang
источник
40
Пропал без вести полностью. ОП запрашивает высоту страницы, а не высоту окна / окна просмотра.
— Грег
9
Высота документа, а не высота области просмотра.
— панкбит
7
тот же комментарий, что и выше
— ericn
11
Я поспешно неправильно понял вопрос и нашел этот ответ полезным. Спасибо за то, что вы совершили ту же ошибку, что и я, но теперь я хотел бы предложить, чтобы в этот ответ были внесены поправки, чтобы включить это предостережение.
— durette
Кстати, я посмотрел, есть также vw.
— Аарон Франке
14

У меня была похожая проблема, и решение было сделать это:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
}

Я хотел, чтобы страница-центрировал div с высотой 100% от высоты страницы, поэтому мое общее решение было:

#cloud-container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0; 
    width: XXXpx; /*otherwise div defaults to page width*/
    margin: 0 auto; /*horizontally centers div*/
}

Вам может понадобиться сделать родительский элемент (или просто «тело») position: relative;

— Нейт Барр
источник
17
Почему все называют это cloud-container?
— Уилф
Это хороший! Игнорирование исправления высоты - блестящая идея на самом деле, и я не заметил никакой ошибки с ней. Любить это. ПОЦЕЛУЙ! Спасибо за отзыв человек!
— daneczech
13

Вы можете обмануть, используя Faux Columns Или вы можете использовать некоторые хитрости CSS

— Райан Доэрти
источник
1
Обратите внимание, что хитрость css даст вам столбцы одинаковой высоты, но не столбцы высоты 100%.
— Thedz
Если панель навигации расширяется до высоты содержимого, которая определяет высоту страницы, она даст вам 100% высоты.
— Райан Доэрти
1
-1 за то, что не обеспечивает 100% безопасный способ убедиться, что панель навигации всегда достаточно высока.
— Аарон Дигулла
неработающая ссылка: ((((
— JBis
9

Это просто с помощью таблицы:

<html>

<head>
    <title>100% Height test</title>
</head>

<body>
    <table style="float: left; height: 100%; width: 200px; border: 1px solid red">
        <tbody>
            <tr>
                <td>Nav area</td>
            </tr>
        </tbody>
    </table>
    <div style="border: 1px solid green;">Content blabla... text
        <br /> text
        <br /> text
        <br /> text
        <br />
    </div>
</body>

</html>

Когда был представлен DIV, люди так боялись столов, что бедный DIV стал метафорическим молотом.

— Аарон Дигулла
источник
6
Хотя DIVs и плавные стили великолепны, я думаю, что CSS все еще не в состоянии охватить суть макета экрана так же, как TABLE достигает сути макета таблицы. ... И накрытие столов все еще приемлемый способ делать вещи.
— Джефф Фрикадель Ян
9
Таблицы предназначены для табличных данных, а не для макета страницы. Тем не менее, CSS имеет некоторые серьезные недостатки, когда речь идет о вековом вопросе о 100% росте. Я должен признать, что использовал это решение в сжатые сроки, но мне всегда казалось, что я сдаюсь.
— Скотт Гринфилд
6
@ Скотт: Однажды я потратил впустую три недели, пытаясь получить дизайн 100% высоты прямо в трех основных браузерах. Я действительно больше не могу слышать чушь "таблицы - зло" :-( Даже с моими знаниями, использование DIV слишком сложно.
— Аарон Дигулла
1
Правильное планирование гарантирует, что нет необходимости полагаться на таблицы. Сейчас, в 2012 году, когда индустрия в целом выходит за рамки IE6 / 7, я настоятельно рекомендую не использовать таблицы на 100% высоты!
— Ваэль Виктус
4
Вам не нужно использовать <table>, вы можете использовать <div style = "display: table;" : D
— Уилф
8

Используйте абсолютную позицию. Обратите внимание, что это не то, как мы обычно используем абсолютную позицию, которая требует ручной раскладки или наличия плавающих диалогов. Это автоматически растянется при изменении размера окна или содержимого. Я считаю, что это требует режима стандартов, но будет работать в IE6 и выше.

Просто замените div на id 'thecontent' на ваш контент (указанная высота приведена только для иллюстрации, вам не нужно указывать высоту для реального контента).

<div style="position: relative; width: 100%;">
      <div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
      <div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
         <div style="height: 10000px;" id="thecontent"></div>
      </div>
</div>

Способ, которым это работает, заключается в том, что внешний div действует как контрольная точка для навигационной панели. Внешний div растягивается содержимым div «content». Панель навигации использует абсолютное позиционирование, чтобы растянуть себя до высоты своего родителя. Для горизонтального выравнивания мы делаем смещение содержимого div на ту же ширину панели навигации.

Это стало намного проще с моделью CSS3 flex box, но она пока недоступна в IE и имеет свои особенности.

— tstanis
источник
Привет tstanis, я тестировал на IE6, а навигационная панель не растягивалась . На FireFox, Chrome он работает очень хорошо.
— Лукас Поттерский
В IE6 используйте таблицу, JavaScript или переключатель браузера, если вы не делали этого раньше десятки раз.
— Аарон Дигулла
7

Я столкнулся с той же проблемой, что и вы. Я хотел сделать в DIVкачестве фона, почему, потому что его легко манипулировать div с помощью JavaScript. В любом случае три вещи, которые я сделал в CSS для этого div.

CSS:

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}
— Talha
источник
6

Если вы ориентируетесь на более современные браузеры, жизнь может быть очень простой. пытаться:

.elem{    
    height: 100vh;
 }

если вам это нужно на 50% страницы, замените 100 на 50.

— Адам Бустани
источник
4
Это предполагает, что высота страницы равна высоте экрана. Страница часто может быть намного длиннее, чем высота экрана, поэтому мы прокручиваем вниз.
— TidyDev
5

Я хочу охватить всю веб-страницу, прежде чем предлагать модальное всплывающее окно. Я перепробовал много методов с использованием CSS и Javascript, но ни один из них не помог, пока я не нашел следующее решение. Это работает для меня, я надеюсь, что это поможет вам тоже.

<!DOCTYPE html>
<html>
	<head>
		<style>
			html, body {
			    margin: 0px 0px;
			    height 100%;
			}
          
            div.full-page {
                position: fixed;
                top: 0;
                bottom: 0;
                width: 100%;
                height: 100%;
                background-color: #000;
                opacity:0.8;
                overflow-y: hidden;
                overflow-x: hidden;
            }
          
            div.full-page div.avoid-content-highlight {
                position: relative;
                width: 100%;
                height: 100%;
            }
          
            div.modal-popup {
                position: fixed;
                top: 20%;
                bottom: 20%;
                left: 30%;
                right: 30%;
                background-color: #FFF;
                border: 1px solid #000;
            }
		</style>
		<script>
		
			// Polling for the sake of my intern tests
			var interval = setInterval(function() {
				if(document.readyState === 'complete') {
					clearInterval(interval);
					isReady();
				}    
			}, 1000);
			
			function isReady() {
				document.getElementById('btn1').disabled = false;
				document.getElementById('btn2').disabled = false;
				
				// disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
			}
			
			function promptModalPopup() {
                document.getElementById("div1").style.visibility = 'visible';
                document.getElementById("div2").style.visibility = 'visible';
				
				// disable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'hidden';
            }
          
            function closeModalPopup() {
                document.getElementById("div2").style.visibility = 'hidden';  
                document.getElementById("div1").style.visibility = 'hidden';
				
				// enable scrolling
                document.getElementsByTagName('body')[0].style.overflow = 'scroll';
            }
		</script>
		
	</head>
	<body id="body">
		<div id="div1" class="full-page">
			<div class="avoid-content-highlight">
                
            </div>
		</div>
        <button id="btn1" onclick="promptModalPopup()" disabled>Prompt Modal Popup</button>
		<div id="demo">
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
			<h2>Original content</h2>
		</div>
        <div id="div2" class="modal-popup">
            I am on top of all other containers
            <button id="btn2" onclick="closeModalPopup()" disabled>Close</button>
        <div>
	</body>
</html>
Развернуть фрагмент

Удачи ;-)

— Чонг Черн Донг
источник
1 

 
           document.body.onload = function () {
                var textcontrol = document.getElementById("page");
                textcontrol.style.height = (window.innerHeight) + 'px';
            }
<html>
<head><title></title></head>
<body>

<div id="page" style="background:green;">
</div>
</body>
</html>
Развернуть фрагмент

— reaw_ni
источник
пожалуйста, добавьте некоторое объяснение к вашему ответу, показывая, что он делает и как он решает проблему
— Наш человек в бананах
div "page" 100% высота любой платформы. просто скопируйте скрипт js в тег <script> </ script> и вставьте его в код HTML.
— reaw_ni
0

Просто, просто заверните это в таблицу div ...

HTML:

<div class="fake-table">
   <div class="left-side">
     some text
   </div>
   <div class="right-side">
     My Navigation or something
   </div>
</div>

CSS:

<style>

 .fake-table{display:table;width:100%;height:100%;}
 .left-size{width:30%;height:100%;}
 .left-size{width:70%;height:100%;}

</style>
— Штеффан Перри
источник
0

Ответ здесь ... ВЫ НЕ МОЖЕТЕ. Тем не менее, вы все еще можете решить исходную проблему, думая немного по-другому.

Просто используйте position: fixed. Тогда, независимо от того, где пользователь прокручивает, он охватит всю высоту:

.full-screen-height {
    position: fixed;
    width: 25vw;
    height: 100vh;
    z-index: 10000;
}

Разве это не то, что вы хотите?

— Гофорт
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.