DIVs {height: 100%; } inheriting grandparent's height and overflowing parent's height

StackOverflow https://stackoverflow.com/questions/23504904

  •  16-07-2023
  •  | 
  •  

Pergunta

I am encountering some problems with div.images when trying to set {height: 100%; }: computed height does not equal the parent div#placeholder's height, but the grandparent div#home-screen's.

<!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>

Page style is as follows: 

* {
    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; }

Also, {min-height: 200px; } doesn't seem to work.

Any ideas? Thank you in advance.

UPDATE 1: min-height does work, but it does not prevent the parent DIV from collapsing.

Foi útil?

Solução 2

The code should be rewritten as: 

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

The div#wrapper needs the following styles: 

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

Outras dicas

I edited the following id's - is this the effect you were after?

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;
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top