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

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

176 голосов
/ 03 апреля 2009

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

Можно ли это сделать в HTML / CSS?

Ответы [ 12 ]

160 голосов
/ 17 мая 2012

Вот решение, которое я наконец-то придумал, когда использовал 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, а не к области просмотра.

69 голосов
/ 12 ноября 2014

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

13 голосов
/ 03 апреля 2009

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

12 голосов
/ 14 июня 2012

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

#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*/
}

Вам может потребоваться, чтобы родительский элемент (или просто 'тело') имел position: relative;

8 голосов
/ 03 апреля 2009

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

<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 стал метафорическим молотом.

7 голосов
/ 07 июня 2010

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

Просто замените div с идентификатором '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, но она пока недоступна в IE и имеет свои особенности.

5 голосов
/ 07 февраля 2017

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

.elem{    
    height: 100vh;
 }

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

5 голосов
/ 18 апреля 2012

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

CSS: 

{    
position:absolute; 
display:block; 
height:100%; 
width:100%; 
top:0px; 
left:0px; 
z-index:-1;    
}
1 голос
/ 20 октября 2016

Я хочу охватить всю веб-страницу, прежде чем предлагать модальное всплывающее окно. Я перепробовал много методов с использованием 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 голос
/ 11 декабря 2014

Просто, просто оберните это в таблицу 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>
Страница:
...