CODEWITHSUNDEEP
htmlcss
ThisClark
ThisClark

Reputation: 14823

Content overflows from div with 100% height

When I view this page in Chrome, Firefox, or IE11, I notice upon horizontally resizing the window to its minimum width causes an overflow of text out of the white background div at the bottom of the page. The div is set to a height of 100%, so should it not continue to match the height of the page? It may seem the 100% matches the height of the window only, but upon initially loading the page in Chrome I see the white div causes a scroll bar such that there is more white space extended beyond on the height of the window.

I tried putting overflow: auto; in the #main css and the div ended up with a scroll bar. I removed it as it's not a solution I can accept. How can I get the div to accommodate its content automatically?

<html>
<head>
<style>
    body, html {
        margin: 0;
        padding: 0;
    }
    html { 
        background: url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') no-repeat center center fixed; 
        background-size: cover;     
    }
    #main {
        margin-left: 20%;
        margin-right: 20%;
        background-color: white;
        height: 100%;
        padding: 10%;
    }
</style>
</head>
<body>
    <div id="main">
        <h1>The Road Not Taken</h1>
        Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference.
        <p>- Robert Frost</p>
    </div>
</body>
</html>

Upvotes: 2

Views: 1206

Answers (1)

mikelt21
mikelt21

Reputation: 2768

padding will mess up height: 100%. It seems to calculate the height and then add the padding so the resulting height is actually closer to 120%. I tried this code in a local html file and it seems to do the trick.

Try this instead:

<html>
<head>
<style>
    body, html {
        margin: 0;
        padding: 0;
    }
    html { 
        background: url('http://losingmedotorg.files.wordpress.com/2013/04/two-roads-in-a-wood.jpg') no-repeat center center fixed; 
        background-size: cover;     
    }
    #main {
        margin-left: 20%;
        margin-right: 20%;
        background-color: white;
        height: 100%;
    }
    #content {
        padding: 10%;
    }
</style>
</head>
<body>
    <div id="main">
        <div id="content">
            <h1>The Road Not Taken</h1>
            Two roads diverged in a yellow wood, And sorry I could not travel both And be one traveler, long I stood And looked down one as far as I could To where it bent in the undergrowth; Then took the other, as just as fair And having perhaps the better claim, Because it was grassy and wanted wear; Though as for that the passing there Had worn them really about the same, And both that morning equally lay In leaves no step had trodden black. Oh, I kept the first for another day! Yet knowing how way leads on to way, I doubted if I should ever come back. I shall be telling this with a sigh Somewhere ages and ages hence: Two roads diverged in a wood, and I - I took the one less traveled by, And that has made all the difference.
            <p>- Robert Frost</p>
        </div>
    </div>
</body>
</html>

Upvotes: 2

Related Questions