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
Solution 1:
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><divid="main"><divid="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>
Post a Comment for "Content Overflows From Div With 100% Height"