locked
CSS 100% Height issue RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User661555364 posted

    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

    Thursday, June 13, 2019 3:25 PM

Answers

  • Question
    Sign in to vote
    0
    Sign in to vote
    User409696431 posted

    Change it to

    html{
  height: 100%;
}
body{
  min-height: 100%;
  border: 10px solid #0026ff;
}

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 13, 2019 5:55 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-719153870 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 14, 2019 7:09 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User409696431 posted

    Change it to

    html{
  height: 100%;
}
body{
  min-height: 100%;
  border: 10px solid #0026ff;
}

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 13, 2019 5:55 PM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User-719153870 posted

    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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 14, 2019 7:09 AM
  • Question
    Sign in to vote
    0
    Sign in to vote
    User661555364 posted

    Thank you both, I used the solution from KathyW in the end.

    Friday, June 14, 2019 8:38 AM