All geek questions in one place

CSS - Multiple 100% div height?

as I understand it, in order for the div to actually be 100% high, should the parent div be set correctly?

So imagine a div structure that looks like this:

    <title>A CSS Sticky Footer</title>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />

</head>
<body>

    <div class="wrapper">
        <div class="header">Header</div>
        <div class="gallery">gallery</div>
        <div class="push">This is inside the push</div>
    </div>
    <div class="footer">Footer</div>

</body>

This is supposed to be essentially a sticky footer layout based on the Ryan Faiths sticky footer layout.

How in this case the gallery has a height of 100%, as well as a shell? I can’t figure it out.

My CSS looks like this: Just like Ryan CSS, with only a gallery class added.

* {
         margin: 0;
}

html, body {
         height: 100%;
}

.gallery {
         background-color:blue;
         height: 100%;
}

.wrapper {
         min-height: 100%;
         height: auto !important;
         height: 100%
         margin-left: auto;
         margin-right: auto;
         width:830px;
         margin-bottom: -142px; /* the bottom margin is the negative value of the footer height */
}

.footer, .push {
         height: 142px;
         margin-left: auto;
         margin-right: auto;
         width: 830px;
}
+3
source share
2 answers

(Removed all old stuff)

Here is the new HTML with 100% gallery, hope it works :-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>   
    <title>A CSS Sticky Footer</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
     <style type="text/css">
     * {
         margin: 0;
        }

        html, body {
            height: 100%;
        }

        .header{background-color: green;position: fixed; top:0;width: 830px;height: 80px; z-index:1;}

        .gallery {background-color:blue;height: 100%;}

        .wrapper {
            height: 100%;
            margin: 0 auto;
            width:830px;
        }

        .footer, .push {
            height: 80px;
            width: 830px;
            background-color: #CCFF00;
            position: fixed;
            bottom:0;
        }

     </style>
</head>
<body>
    <div class="wrapper">
        <div class="header">Header</div>
        <div class="content gallery">gallery</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>
+3
source

, , , , :

" " , , : http://www.digital-web.com/extras/positioning_101/css_positioning_example.php. . 100%, .

2cents...

+1

Source: https://habr.com/ru/post/1732506/

More articles:


All Articles