DIVs {высота: 100%; } наследование высоты бабушки и дедушки и переполнение высоты родителей

Question

DIVs {высота: 100%; } наследование высоты бабушки и дедушки и переполнение высоты родителей

0

Я сталкиваюсь с некоторыми проблемами с div.images при попытке установить {height: 100%; } {height: 100%; }: вычисленная высота не равна высоте div#placeholder родительского div#placeholder, но div#home-screen grandparent div#home-screen.

<!DOCTYPE html>
<html>
<body>
    <div id="page-wrapper">
        <div id="home-screen">
            <header>
                <div></div>
            </header>
            <div id="placeholder">
                <div class="images"></div>
                <div class="images"></div>
                <div class="images"></div>
                <div class="images"></div>
            </div>
            <div id="cross-screen-content">
                <div></div>
            </div>
        </div>
        <main role="main">
            <p>This is a test page. </p>

        </main>
        <footer>
            <div></div>
        </footer>
    </div>
</body>
</html>

Стиль страницы выглядит следующим образом:

* {
    margin: 0; 
    border: 0; 
    padding: 0; }

html, body {
    height: 100%; }

div#page-wrapper {
    height: 100%; }

div#home-screen {
    display: table; 
    margin-bottom: 25px; 
    width: 100%; 
    height: 100%; }

header, 
div#placeholder, 
div#cross-screen-content {
    display: table-row; }

header {
    height: 85px; 
    background-color: #f00; }

div#placeholder {
    height: 100%; 
    background-color: #0f0; }

div#placeholder div.images {
    position: absolute; 
    left: 5%; 
    margin: 5px 0; 
    width: 90%; 
    height: 100%; 
    min-height: 200px; 
    background-color: #ccc; }

 div#cross-screen-content {
    height: 50px; 
    background-color: #00f; }

 footer {
    height: 80px; }

Кроме того, {min-height: 200px; } {min-height: 200px; }, похоже, не работает.

Есть идеи? Заранее спасибо.

UPDATE 1: min-height работает, но это не мешает разворачиванию родительского DIV.

user2949795 07 май 2014, в 00:14

Источник

0

Это потому, что он получает высоту от ближайшего родителя с позицией: относительный
Jon Snow 06 май 2014, в 21:35
0

Нет разницы с относительным расположением родительского div.
user2949795 06 май 2014, в 21:38

Теги:

html

css

height

2 ответа

0

Я отредактировал следующий идентификатор - это тот эффект, которым вы были?

div#placeholder {
    height: 100%;
    background-color: #0f0;
}
div#placeholder div.images {
    left: 5%;
    margin: 5px 0;
    width: 90%;
    height: 100%;
    min-height: 200px;
    background-color: #ccc;
}

Will Thresher 06 май 2014, в 22:12

0

Боюсь, что нет. Я действительно нашел решение, и это довольно легко. Я опубликую это через минуту. В любом случае, спасибо!
user2949795 07 май 2014, в 06:54

Ещё вопросы

Это потому, что он получает высоту от ближайшего родителя с позицией: относительный
Нет разницы с относительным расположением родительского div.
Боюсь, что нет. Я действительно нашел решение, и это довольно легко. Я опубликую это через минуту. В любом случае, спасибо!

user2949795 · Accepted Answer · 2014-05-07T05-51-00.000Z

Код должен быть переписан как:

<div id="placeholder">
    <div id="wrapper">
        <div class="images"></div>
        <div class="images"></div>
        <div class="images"></div>
    </div>
</div>

div#wrapper нуждается в следующих стилях:

div#wrapper {
    display: table-cell; 
    position: relative; }