minimum height of div and contents at least 100%

Question

I’m designing my first non-table based website and running into problems since DIVs do not behave like table rows and cells. The page has 3 DIVs (header, article, footer) inside a wrapper upon which I have a drop shadow. The header has a height of 115px. The footer: 25px. The article’s height is: calc(100% - 135px); The article correctly calculates its height and pushes the footer to the bottom of the wrapper.

The problem is that:

If I make the wrapper have a fixed height of 100%, the article correctly calculates its height and pushes the footer to the bottom of the screen (height of wrapper). The article can even grow to hold its entire contents. The problem is that the wrapper does not expand beyond 100% (height of screen) and the shadow only extends one screen length down even if its contents extend further down the screen.
If I make the wrapper’s height not absolute by setting min-height: 100%, to encompass its contents as they grow and shrink , the article DIV extends correctly to the height of the wrapper but both the article and wrapper only extend far enough to encompass the article contents. This can leave a lot of blank space in the browser window. How do I tell the wrapper to have a minimum height of the screen and extend beyond to wrap the entire contents while allowing the article div to correctly calculate its height such that the 3 divs extend to the height of the wrapper?

HTML:

    <!DOCTYPE HTML >
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="/stylesheet.css">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
     <body>
    <page >
    <wrapper class="shadow" style="width:75%; margin:0 auto; min-width:300px; min-height:100%; height:100%; margin-bottom:10px;" >
    <header >    </header>
    <article > </article>
    <footer ></footer>
    </wrapper>
    </page>
    </body>
    </html>

CSS:

    header{
    display:block;
    background-image: url('http://10.5.0.43:89/images/bg.jpg');
    height:115px;
    width:100%;
    margin:auto;
    text-align:left;
    background-color:#ffffff;
    vertical-align:bottom;
    }
    article{
    width:100%;
    margin:0 auto;
    vertical-align:top;
    background-color:#ffffff;
    padding:0; 
    height: calc(100% - 135px) !important;
    }

    footer{
    background-color:#4E70AF;
    width:100%;
    margin:auto;
    height:25px;
    font-size:8pt; 
    color:white; 
    font-face:arial;
    text-align:center;
    line-height:25px;

    }
    html, body{
    height:99%;
    background-color:#CCC;
    in-width:300px;
    }
    .shadow{
    box-shadow: 0px 0px 18px rgba(0, 0, 0, .7);
    }

You might find Chris Coyier's article informative: [Sticky Footer, Five Ways](https://css-tricks.com/couple-takes-sticky-footer/). It's worth considering [Flexbox](https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/), which has become a clean and [reasonably well-supported](http://caniuse.com/#feat=flexbox) solution. — showdev, Oct 19 '17 at 19:04
Possible duplicate of [How do you get the footer to stay at the bottom of a Web page?](https://stackoverflow.com/questions/42294/how-do-you-get-the-footer-to-stay-at-the-bottom-of-a-web-page) — showdev, Oct 19 '17 at 19:11

score 0 · Accepted Answer · 2017-10-20T09:05:53.843

0

put this css to your wrapper .shadow {display: flex, flex-wrap: wrap; flex-flow: column, align-content: flex-start;} and you need to style <article> with flex: 1; and viola :).

here is example https://codepen.io/baagii95/pen/mBoRQX

edited Oct 20 '17 at 09:05

answered Oct 20 '17 at 08:54

Thanks much. I will definitely read up on flex box as it is what I needed. – RCDAWebmaster Oct 20 '17 at 13:29
Can you tell me why [test page](http://216.73.18.74:3461/pages/home2.asp) looks great in firefox but not in IE11? I know it has to do with a flexbox bug in IE, but for the life of me, I can't find a workaround. – RCDAWebmaster Oct 20 '17 at 20:28
if you using IE maybe `display: flexbox` or older version of IE you need to use `display: box` – Oct 23 '17 at 01:57
and here is https://css-tricks.com/snippets/css/a-guide-to-flexbox/ you need to visit this – Oct 23 '17 at 02:00
I looked at that site on Friday and it did not help me get IE to play nice. – RCDAWebmaster Oct 23 '17 at 13:08
I tried using flexbox instead of flex, as suggested, but then the drop shadow disappeared and is not the latest version of the spec. I even found a site that supposedly had a list of flexbox declarations that should fix the problem for all browsers, but sadly did not. I am at a loss. – RCDAWebmaster Oct 23 '17 at 13:58
I tried the solution from: https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ which works in all browsers except safari where the contents of the article DIV extend past the footer. the problem with this solution is that in order to get IE to display correctly, wrapper has to have a set height. This causes my drop shadow to appear only on the first screen length of my page regardless of the total page length. If I make the wrapper not fixed, then the footer is not reaching the bottom of the window on pages without much content. – RCDAWebmaster Oct 23 '17 at 14:35
I'm really beginning to hate flex layout and browsers that don't display the layout correctly. Safari won't render the width: 85% on the wrapper, IE is forcing the footer to be forever 1 screen below the top of the page even if the page is longer. It won't display the footer background but the contents move below the article DIV, a margin at the bottom of the page works sometimes... Grrr. At lease I was able to get around the problem with the drop shadow only extending one screen by putting the shadow on the header, article and footer rather than the wrapper. – RCDAWebmaster Oct 23 '17 at 19:53
Okay, let me see your problem i will check it – Oct 24 '17 at 02:30
i found your error and resolved it on wrapper inline style you set height as `height: 98% auto;` that is the your problem. Replace it with `height: 100%;` and its looks good cross browsers. If it doesn't work anywhere leave comment – Oct 24 '17 at 02:41
That doesn't work when the page is longer than one screen. The background of the footer is stuck at one screen height from the top of the page and the article extends past it and now the footer is left without it's background. [see my other test page](http://216.73.18.74:3461/test.html) This problem only happens in IE, BTW. I also moved the width 85%: margin: 0 auto; from the wrapper to the 3 inner DIVs because safari was not playing nicely. – RCDAWebmaster Oct 24 '17 at 12:49
Funny thing... I checked the site from another PC outside my company's network and the page looked fine in IE 11. Maybe it's my PC. I don't know. But it did look ok. I just wish everything was better supported and we didn't need hacks to make things work as expected. – RCDAWebmaster Oct 24 '17 at 12:53
After installing a bunch of windows updates, IE is playing nice. Thanks for the assistance everyone. – RCDAWebmaster Oct 24 '17 at 18:22
and you don't need flexbox i just put some example here https://codepen.io/baagii95/pen/oGrmVP – Oct 25 '17 at 08:14

minimum height of div and contents at least 100%

1 Answers1