100% Высота на Div влияет на нижний колонтитул

-1

У меня есть простая проблема, что я уверен, что вы все решите в кратчайшие сроки.100% Высота на Div влияет на нижний колонтитул

Я пытаюсь использовать процентные высоты на моих дочерних div, но для этого требуется, чтобы я использовал высоту 100% для родительского div. Однако нижний колонтитул учитывает только высоту родительского div и, следовательно, отображается в середине страницы. Каков правильный способ сделать это?

Мой код в основном:

<body style="height: 100%"> 
<div style="height: 100%"> 
    <div id="child" style="height: 50%"> 
    </div> 
    <div id="child" style="height: 50%"> 
    </div> 
    <div id="child" style="height: 50%"> 
    </div> 
    <div id="child" style="height: 50%"> 
    </div> 
</div> 
<footer> </footer> 
</body>

источник

2015-02-23 user3089457

Вы только разрешено использовать идентификатор на уникальный элемент, поэтому, пожалуйста, используйте класс вместо этого.

<body> 
 
<div> 
 
    <div class="child" style="height: 50vh"> child </div> 
 
    <div class="child" style="height: 50vh"> child </div> 
 
    <div class="child" style="height: 50vh"> child </div> 
 
    <div class="child" style="height: 50vh"> child </div> 
 
</div> 
 
<footer> Footer </footer> 
 
</body>

источник

2015-02-23 18:45:24

Не то, что я хотел знать. И это даже не мой код, это просто случайная вещь, которую я написал, чтобы показать вам ВЫСОТУ. Меня не интересует идентификатор и класс. НО ... Является ли теперь общепринятым? – user3089457

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

#footer { 
width:100%; 
height:80px; 
position:absolute; 
bottom:0; 
left:0; 
background:#ee5; 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
\t <style type="text/css"> 
 

 
\t #footer { 
 
\t width:100%; 
 
\t height:80px; 
 
\t position:absolute; 
 
\t bottom:0; 
 
\t left:0; 
 
\t background:#ee5; 
 
}</style> 
 
</head> 
 
<body style="height: 100%"> 
 
<div style="height: 100%"> 
 
    <div id="child" style="height: 50%"> 
 
    <h1>first div</h1> 
 
    </div> 
 
    <div id="child" style="height: 50%"> 
 
    <h1>div again</h1> 
 
    </div> 
 
    <div id="child" style="height: 50%"> 
 
    <h1>Just another div</h1> 
 
    </div> 
 
    <div id="child" style="height: 50%"> 
 
    <h1>Another Div</h1> 
 
    </div> 
 
    <footer style="background-color:green" id="footer"><h1>Footer</h1> </footer> 
 
</div> 
 

 
</body> 
 
</html>

источник

2015-02-23 18:50:24 julekgwa

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

Это работает так, как вы ожидаете, если вы используете минимальную высоту в своем первом div.

Код:

<body style="height: 100%"> 
    <div style="min-height: 100%"> 
    <div class="child" style="height: 50%">a</div> 
    <div class="child" style="height: 50%">b</div> 
    <div class="child" style="height: 50%">c</div> 
    <div class="child" style="height: 50%">d</div> 
    </div> 
    <footer> FOOTER</footer> 
</body>

Nitpicky сноска: это действительно плохая идея использовать тот же идентификатор для нескольких элементов.

источник

2015-02-23 21:39:48 skrawler

100% Высота на Div влияет на нижний колонтитул

ответ

Смежные вопросы