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

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

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

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

Вот мой код css:

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

Какие-либо предложения?


html css height
person moonblade    schedule 02.09.2009    source источник
comment
Я не понимаю, чего вы хотите достичь, не могли бы вы вставить код? :)   -  person IProblemFactory    schedule 02.09.2009
comment
{позиция: абсолютная; ширина: 200 пикселей; верх: 111 пикселей; внизу: 0px; } это работает в ie8, это то, что я хочу. однако ie6 принимает только ваше первое выравнивание (в данном случае верхнее). Поэтому браузер не устанавливает автоматически требуемую высоту. Мое решение заключалось в том, чтобы установить либо top: 111px, либо bottom: opx, а затем назначить требуемую высоту. если есть какая-то разница, это должно работать только для Internet Explorer 6 и выше (не для Firefox, Opera и т. д.)   -  person moonblade    schedule 02.09.2009
comment
мои извинения, не знаю, как правильно показать код   -  person moonblade    schedule 02.09.2009
comment
Встроенный код, введите `. Для блочного кода (не комментариев) каждая строка должна делаться четырьмя пробелами.   -  person Eric    schedule 02.09.2009
comment
хм, думаю, я просто воспользуюсь javascript. разве у кого-нибудь есть идея получше?   -  person moonblade    schedule 23.02.2011
comment
использовал javascript для решения моей проблемы, спасибо всем, кто внес   -  person moonblade    schedule 23.02.2011
comment
Я думаю, что мое решение CSS исправлено. Применения z-index было достаточно, чтобы разобраться.   -  person Eric    schedule 23.02.2011
comment
Ответьте на свой вопрос, чтобы следующий человек увидел, что вы сделали.   -  person Peter J    schedule 23.02.2011
comment
Я думаю, что мое решение CSS работает. Все, что ему не хватало, было z-index.   -  person Eric    schedule 23.02.2011
comment
возможный дубликат Сделайте div 100% высоты окна браузера   -  person Liam    schedule 19.02.2014

Ответы (8)


arrow_upward
24
arrow_downward

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

Код:

div{
  height:100vh;
}
<div></div>

person Blaise M.    schedule 14.02.2015
comment
Как обычно, при использовании в IE требуется небольшое предостережение. caniuse.com/#feat=viewport-units - person user3526; 02.08.2015

arrow_upward
22
arrow_downward

Я добавил свойство 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;
}
person ranonE    schedule 04.09.2009

arrow_upward
6
arrow_downward

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

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

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

person Eric    schedule 04.09.2009
comment
это именно то, что у меня было, и, как вы упомянули, IE6 не любит использовать оба одновременно. Я согласен с вами, но так хочет клиент. пришлось написать javascript, чтобы все было правильно - person moonblade; 09.09.2009
comment
top и bottom объявления нескольких позиций не работают в любом браузере - person Kyle; 28.10.2010
comment
много извинений! Ты прав. И я сделал быстрый тест без position: absolute. Мой голос заблокирован, черт. Кто-то проголосует за этого парня и поправит мои злые пути :) - person Kyle; 28.10.2010
comment
хахахахахахахахахахахахаахах. ЛУЧШИЙ КОММЕНТАРИЙ: IE6 не любит объявления сверху и снизу. Но веб-разработчикам не нравится IE6. чувак. Спасибо за то, что сделали мой день. - person Martin Andersson; 30.11.2013

arrow_upward
5
arrow_downward

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

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

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

person RaphKomjat    schedule 27.09.2013

arrow_upward
1
arrow_downward

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

person n1313    schedule 02.09.2009
comment
хм, не совсем так, но вроде как в этом роде. У меня есть заголовок, поэтому я соответствующим образом скорректировал CSS, но div слишком велик, все еще устанавливается на 100% - person moonblade; 02.09.2009

arrow_upward
0
arrow_downward

Конечно, отрицательная наценка!

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;
}
person Eric    schedule 02.09.2009

arrow_upward
0
arrow_downward

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.

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

person Chiwda    schedule 29.12.2015

arrow_upward

arrow_downward

person    schedule
comment
Это решение применимо не ко всем браузерам. - person Golinmarq; 07.03.2017