I have a HTML page that has a border on the outside, but the content inside the page is breaking through the height of the border at the bottom.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8" />
<style>
html, body {
height: 100%;
}
body {
min-height: 100%;
border: 10px solid #0026ff;
}
.container {
margin: auto;
}
.section-one {
font-size: 40px;
}
.section-two {
font-size: 40px;
}
</style>
</head>
<body>
<div class="container">
<span class="section-one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus pharetra orci, sed ornare erat varius nec. Integer consequat volutpat lectus, sit amet fringilla lectus eleifend et. Aenean eget accumsan arcu. In hac habitasse platea dictumst. Sed at erat ut erat varius consectetur sed sed ex. Vivamus lacinia, mi at tristique fringilla, orci quam molestie ipsum, ac tempus erat felis vitae sapien. Donec pharetra quis eros in finibus. Aliquam erat urna, aliquet in eros sit amet, consectetur consectetur risus. Duis odio leo, aliquam et commodo sit amet, semper at dolor. In tempor tortor non purus cursus, sit amet aliquet nulla pretium. In eu vehicula odio. Nulla facilisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span>
<span class="section-two">Nulla nec mauris nisi. Mauris ac vestibulum nisl. Curabitur tincidunt rutrum bibendum. Vivamus lobortis sit amet felis et placerat. Nullam lacus nisl, egestas vel erat et, luctus fringilla nisl. In pulvinar, nisi at lacinia elementum, lorem tortor gravida elit, sed tempus eros eros vel elit. Morbi ut dignissim tortor. Sed rhoncus vehicula massa, pharetra laoreet nibh. Integer odio felis, molestie ut sollicitudin ac, convallis vitae ante. Sed eu enim dolor. Curabitur et facilisis velit. Aliquam varius, enim ut suscipit fermentum, tellus arcu vulputate quam, in tristique nisl quam ac turpis. Proin tempor lobortis ex, nec suscipit risus commodo eu.</span>
</div>
</body>
</html>
First, by pressing the F12 in the browser, you can find that the body tag has a "margin = 8px" attribute by default. Please set it to 0, and set the border to the inner border with the box-sizing attribute, so that the border can automatically fill the full
screen.
Second, add the "over-flow: auto;" attribute to the container, so that when there is too much content, the scrollbar is automatically generated to browse the extra parts.
Member
5 Points
7 Posts
CSS 100% Height issue
Jun 13, 2019 03:25 PM|DevGuyUk|LINK
Hi,
I have a HTML page that has a border on the outside, but the content inside the page is breaking through the height of the border at the bottom.
<!DOCTYPE html> <html> <head> <title>Example</title> <meta charset="utf-8" /> <style> html, body { height: 100%; } body { min-height: 100%; border: 10px solid #0026ff; } .container { margin: auto; } .section-one { font-size: 40px; } .section-two { font-size: 40px; } </style> </head> <body> <div class="container"> <span class="section-one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus pharetra orci, sed ornare erat varius nec. Integer consequat volutpat lectus, sit amet fringilla lectus eleifend et. Aenean eget accumsan arcu. In hac habitasse platea dictumst. Sed at erat ut erat varius consectetur sed sed ex. Vivamus lacinia, mi at tristique fringilla, orci quam molestie ipsum, ac tempus erat felis vitae sapien. Donec pharetra quis eros in finibus. Aliquam erat urna, aliquet in eros sit amet, consectetur consectetur risus. Duis odio leo, aliquam et commodo sit amet, semper at dolor. In tempor tortor non purus cursus, sit amet aliquet nulla pretium. In eu vehicula odio. Nulla facilisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</span> <span class="section-two">Nulla nec mauris nisi. Mauris ac vestibulum nisl. Curabitur tincidunt rutrum bibendum. Vivamus lobortis sit amet felis et placerat. Nullam lacus nisl, egestas vel erat et, luctus fringilla nisl. In pulvinar, nisi at lacinia elementum, lorem tortor gravida elit, sed tempus eros eros vel elit. Morbi ut dignissim tortor. Sed rhoncus vehicula massa, pharetra laoreet nibh. Integer odio felis, molestie ut sollicitudin ac, convallis vitae ante. Sed eu enim dolor. Curabitur et facilisis velit. Aliquam varius, enim ut suscipit fermentum, tellus arcu vulputate quam, in tristique nisl quam ac turpis. Proin tempor lobortis ex, nec suscipit risus commodo eu.</span> </div> </body> </html>How can I stop this happening?
Thank you
Contributor
5961 Points
2468 Posts
Re: CSS 100% Height issue
Jun 13, 2019 05:55 PM|KathyW|LINK
Change it to
html{ height: 100%; } body{ min-height: 100%; border: 10px solid #0026ff; }Contributor
3140 Points
983 Posts
Re: CSS 100% Height issue
Jun 14, 2019 07:09 AM|Yang Shen|LINK
Hi DevGuyUk,
First, by pressing the F12 in the browser, you can find that the body tag has a "margin = 8px" attribute by default. Please set it to 0, and set the border to the inner border with the box-sizing attribute, so that the border can automatically fill the full screen.
Second, add the "over-flow: auto;" attribute to the container, so that when there is too much content, the scrollbar is automatically generated to browse the extra parts.
Please refer to below codes:
<style type="text/css"> html, body { height: 100%; } body { margin:0; border: 10px solid #0026ff; box-sizing: border-box; } .container { height:100%; overflow:auto; margin: auto; } .section-one { font-size: 40px; } .section-two { font-size: 40px; } </style>Here is result of my work demo:
Hope these will help you.
Best Regard,
Yang Shen
Member
5 Points
7 Posts
Re: CSS 100% Height issue
Jun 14, 2019 08:38 AM|DevGuyUk|LINK
Thank you both, I used the solution from KathyW in the end.