CSS: установите высоту div до 100% - пиксели

У меня есть заголовок на моей странице, который составляет чуть более 100 пикселей (точнее, 111 пикселей) Под ним под ним нужно дойти до нижней части окна просмотра, как если бы я установил дно на 0px. Проблема заключается в том, что я не могу указать верх и низ в ie6 (ошибка).

Я могу либо указать top: 111px или bottom: 0px, но мне все еще нужна высота, чтобы быть правильной, т.е. 100% -111px, в зависимости от размера окна просмотра.

Кажется, что не получается работать с выражениями coz, которые, кажется, являются решением

Вот мой код css:

position: absolute; 
width: 200px; 
top: 111px; 
bottom: 0px;

Любые предложения?

Ответ 1

Я добавил свойство height в теги body и html.

HTML:

<body>
<div id="wrapper">
 <div id="header">header</div>
 <div id="content">content</div>
</div>

CSS

html, body
{
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper
{
    height: 100%;
    min-height: 100%;
}
#header
{
    height: 111px;
}

Ответ 2

Лучший способ сделать это - использовать стили порта представления. Это просто делает работу и никакие другие методы не нужны.

код:

div{
  height:100vh;
}

<div></div>

Ответ 3

В качестве альтернативы вы можете просто использовать position:absolute:

#content
{
    position:absolute;
    top: 111px;
    bottom: 0px;
}

Однако IE6 не любит объявления верхнего и нижнего уровня. Но веб-разработчикам не нравится IE6.

Ответ 4

Теперь с помощью css3 вы можете попробовать использовать calc()

.main{
  height: calc(100% - 111px);
}

взгляните на этот ответ: Div ширина 100% минус фиксированное количество пикселей

Ответ 5

div{
  height:100vh;
  background-color:gray;
}

<div></div>

Ответ 6

div{
  height:100vh;
}

<div></div>

Ответ 7

Я предполагаю, что вы пытаетесь получить липкий нижний колонтитул

Ответ 8

Отрицательные поля, конечно!

HTML

<div id="header">
    <h1>Header Text</h1>
</div>
<div id="wrapper">
    <div id="content">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur 
        ullamcorper velit aliquam dolor dapibus interdum sed in dolor. Phasellus 
        vel quam et quam congue sodales.
    </div>
</div>

CSS

#header
{
    height: 111px;
    margin-top: 0px;
}
#wrapper
{
    margin-bottom: 0px;
    margin-top: -111px;
    height: 100%;
    position:relative;
    z-index:-1;
}
#content
{
    margin-top: 111px;
    padding: 0.5em;
}

Ответ 9

100vh работает для меня, но сначала я использовал javascript (на самом деле jQuery, но вы можете его адаптировать), чтобы решить аналогичную проблему.

HTML

<body>
  <div id="wrapper">
    <div id="header">header</div>
    <div id="content">content</div>
  </div>
</body>

JS/JQuery

var innerWindowHeight = $(window).height();
var headerHeight = $("#header").height();
var contentHeight = innerWindowHeight - headerHeight;
$(".content").height(contentHeight + "px");

В качестве альтернативы вы можете просто использовать 111px, если вы не хотите вычислять headerHeight.

Кроме того, вы можете поместить это в событие изменения размера окна, чтобы повторно запустить script, если высота окна увеличивается, например.