У меня есть панель навигации в левой части моей страницы, и я хочу, чтобы она растянулась до 100% высоты страницы. Не только высота окна просмотра, но и скрытые области, пока вы не прокрутите список. Я не хочу использовать javascript для выполнения этого.
Можно ли это сделать в HTML/CSS?
Вот решение, которое я наконец придумал при использовании 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 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, а не к окну просмотра.
С HTML5 проще всего сделать height: 100vh. Где "vh" обозначает высоту окна просмотра окна браузера. В ответ на изменение размера браузера и мобильных устройств.
Вы можете обмануть, используя Faux Columns Или вы можете использовать CSS-обман
У меня была аналогичная проблема, и решение должно было сделать это:
#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;
Это простое использование таблицы:
<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 стал метафорическим молотом.
Использовать положение абсолютное. Обратите внимание, что это не то, как мы обычно используем абсолютное положение позиции, которое требует ручной укладки вещей или наличия плавающих диалогов. Это будет автоматически растягиваться при изменении размера окна или содержимого. Я считаю, что для этого требуется режим стандартов, но он будет работать в 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 растягивается содержимым "content" div. Навигационная панель использует абсолютное позиционирование, чтобы растянуться до высоты своего родителя. Для горизонтального выравнивания мы делаем контент div смещенным по той же ширине навигационной панели.
Это упростилось с помощью модели Flex3 flex box, но это еще не доступно в IE и имеет некоторые из ее собственных причуд.
Если вы ориентируетесь на более современные браузеры, жизнь может быть очень простой. попробуйте:
.elem{
height: 100vh;
}
если вам это нужно на 50% страницы, замените 100 на 50.
Я столкнулся с той же проблемой, что и вы. Я хотел создать DIV в качестве фона, потому что его легко манипулировать div через javascript. В любом случае три вещи, которые я сделал в css для этого div.
CSS
{
position:absolute;
display:block;
height:100%;
width:100%;
top:0px;
left:0px;
z-index:-1;
}
* {
margin: 0;
}
html, body {
height: 90%;
}
.content {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto ;
}
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>Простой, просто заверните его в таблицу 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>
Я хочу покрыть всю веб-страницу, прежде чем вызывать модальное всплывающее окно. Я пробовал много методов с помощью 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>