CSS: Задайте височина на Div на 100% - Пиксели

Имам заглавка на моята страница, която е малко над 100px (111px, за да бъдем точни). Div под него трябва да се простира до дъното на прозореца за изглед, сякаш бях задал дъното на 0px. Проблемът се крие във факта, че не мога да посоча отгоре и отдолу в ie6 (бъг).

Мога да посоча top: 111px или bottom: 0px, но все пак трябва височината да е правилна, т.е. 100% -111px, според размера на прозореца за изглед.

Изглежда не мога да накарам изразите да работят, защото това изглежда е решението

Ето моят 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
{ позиция: абсолютна; ширина: 200px; отгоре: 111px; отдолу: 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