CSS Div розтягується на 100% висотою сторінки

196

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

Чи можна це зробити в HTML / CSS?

— Том
джерело

171

Ось таке рішення, яке я нарешті придумав, використовуючи div як контейнер для динамічного фону.

Видаліть z-indexдля не фонового використання.
Видаліть leftабо rightдля стовпця на повну висоту.
Видаліть topабо bottomдля рядка повної ширини.

EDIT 1: CSS нижче відредаговано, оскільки він не відображався правильно у FF та Chrome. перейшов position:relativeна HTML і встановив тіло height:100%замість min-height:100%.

EDIT 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, а не вікна перегляду.

— Книрі
джерело

це чудовий, але звичайний центр. якісь виправлення для цього? маржа: 0 авто; не працює.

— крем

Дивовижна відповідь. Я помітив, що вам потрібно використовувати міні-висоту (а не лише висоту) для htmlелемента. Чому так?

— HartleySan

Використовуючи height- говорити "ти такий високий; не більше і не менше ». Це означає, що це буде висота вікна перегляду. Ми хочемо, щоб він був принаймні таким же високим, як вікно перегляду або вище. min-heightробить це прекрасно.

— Knyri

1

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

— Knyri

5

Це чудово. Я займаюся CSS протягом 15 років, і ніколи не натискав, щоб позиціонування <html>та розміщення на вікні перегляду - це дві окремі речі. Дякую!

— Бен Халл

82

З HTML5 найпростіший спосіб - це просто зробити height: 100vh. Де "vh" означає висоту вікна перегляду вікна браузера. Чуйний до зміни розміру браузера та мобільних пристроїв.

— алчуанг
джерело

40

Пропустіть суть повністю. OP запитує висоту сторінки, а не висоту вікна / вікна перегляду.

— Грег

9

Висота документа, а не висота вікна перегляду.

— панкбіт

7

той же коментар, що і вище

— ericn

11

Я поспішно перечитав питання і вважав цю відповідь корисною. Дякую, що ви зробили ту саму помилку, яку я і зробив, але зараз я б запропонував цю відповідь внести до поправок, щоб включити цей застереження.

— дурет

До речі, я подивився, там теж є vw.

— Аарон Франке

14

У мене була подібна проблема, і рішенням було це зробити:

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

Я хотів, щоб сторінка, орієнтована на сторінку, була висотою 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*/
}

Вам може знадобитися зробити батьківський елемент (або просто 'body') position: relative;

— Нейт Барр
джерело

17

Чому всі називають це cloud-container?

— Вільф

Це приємне! Ігнорування фіксації висоти - це геніальна ідея, і я ще не помітив жодної помилки з нею. Любіть це. ПОЛЮЧИТИ! Дякую за підказку!

— danecECH

13

Ви можете обманювати, використовуючи стовпці Faux Або ви можете використовувати хитрість 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 став метафоричним молотком.

— Аарон Дігулла
джерело

6

Незважаючи на те, що стилі DIV і флюїд є чудовими, я думаю, що CSS все ще не в змозі захопити суть макета екрану таким же чином, як TABLE досягає суті компонування таблиці. ... І розкладка столу - це все-таки прийнятний спосіб робити речі.

— Jeff Meatball Ян

9

Таблиці призначені для табличних даних, а не макета сторінки. Незважаючи на це, CSS має деякі основні недоліки, коли мова йде про вікове 100-річне питання висоти. Я мушу визнати, що я використовував це рішення, коли дотримувався строгого терміну, але завжди відчував, що я здаюся.

— Скотт Грінфілд

6

@Scott: Я один раз витрачав три тижні, намагаючись отримати 100% висоту дизайну прямо в трьох основних браузерах. Я справді більше не можу чути

— глупство

1

Правильне планування забезпечує відсутність опори на таблиці. Зараз у 2012 році, коли індустрія в цілому підштовхує до IE6 / 7, я настійно не рекомендую використовувати таблиці на 100% висоти!

— Vael Victus

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>

Це працює таким чином, що зовнішній діва виступає орієнтиром для навігаційної смуги. Зовнішній поділ розтягується змістом діва "вміст". Навісна смуга використовує абсолютне позиціонування, щоб розтягнутись до висоти свого батьківського. Для горизонтального вирівнювання ми робимо, як розділ вмісту зміщується на ту саму ширину вказівної панелі.

Це значно полегшується з моделлю гнучких коробок CSS3, але це ще не доступно в IE і має деякі свої примхи.

— tstanis
джерело

Привіт tstanis, я тестував на IE6 і навибар не розтягувався . У FireFox, Chrome він працює дуже добре.

— Лукас Поттерський

У IE6 використовуйте таблицю або JavaScript або перемикач браузера, якщо ви цього не робили десяток разів раніше.

— Аарон Дігулла

7

Я зіткнувся з тією ж проблемою, що і ти. Я хотів зробити DIVяк фон, чому, тому що його легко маніпулювати дівом через JavaScript. У всякому разі, три речі я зробив у css для цього діва.

CSS:

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}

— Талха
джерело

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>

Розгорніть фрагмент

Удачі ;-)

— Чонг Черн Донг
джерело

2

* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}

— Свадеш Бехера
джерело

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 "сторінка" 100% висота будь-якої платформи. просто скопіюйте js-скрипт у тег <script> </script> та вставте у HTML-код.

— reaw_ni

0

Просто, просто загорніть його в таблицю, поділившись ...

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>

— Стефан Перрі
джерело