Home/ Questions/Q 7562169
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T13:20:52+00:00

Try this showcase: <!doctype html> <html> <head> <style> html { min-height: 100%; overflow-y: scroll;

  • 0

Try this showcase:

<!doctype html>

<html>
    <head>
        <style>
            html {
                min-height: 100%;
                overflow-y: scroll;
            }
            body {              
                margin:     0;
                min-height: 100%;
                background: -o-linear-gradient(bottom right, rgb(230,0,230), rgb(150,0,250));
                background: -webkit-gradient(linear, left top, right bottom, from(#D0F), to(#50A));
                background: -moz-linear-gradient(to bottom right, indigo, violet);
                filter:     progid:DXImageTransform.Microsoft.gradient(startColorstr='#eb830c', endColorstr='#ffbe0d');
            }
            #container {
                background: #0B0;
                min-height: 100%;
                width:      400px;
                margin:     0 auto;
            }
            #content {
                background: #A00;
                height:     200px;
                width:      300px;
            }

        </style>
    </head>

    <body>
        <div id="container">
            <div id="content"></div>
        </div>
    </body>
</html>

You’ll reckon that #container won’t stretch, despite being set with min-height: 100%.

Setting html, body { height: 100%; } instead of min-height: 100% will solve this problem, BUT then the gradient in the body background won’t stretch anymore, and it will repeat instead. You can verify this by setting #content higher than your current window height. say #content { height: 3000px; }

I could fix it setting body { background-attachment: fixed; } but I’d like it to scroll, and this does NOT solve the problem with IE.
So I need to use min-height on body and html.

Why doesn’t #container stretch when I use min-height?

EDIT: it’s not a solution, but adding a background-color (the same color in which the linear gradient fades) makes the height:100% workaround acceptable for IE too. so in IE the background is scrolling and in the others is not, the gradient is linear and in the others’ radial.. but it really isn’t much of a problem.

EDIT: note that Opera browser correctly interprets the code.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    edit

    maybe this helps?
    http://jsfiddle.net/HerrSerker/XnjRp/3/

    I decoupled the gradient and the scrolling by don’t scrolling the body but a new scrolling wrapper

    original post

    min-height does only work correctly, if every parent element has a set height, so you need

    html, body {
  height: 100%;
}

    Cave: check if mobile browsers have a problem with scrolling and or zooming with this

    http://jsfiddle.net/HerrSerker/XnjRp

    • 0