HTML Div is not full height when overflow occurs-CodePudding

I have a problem. I created the following simplecode:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height:100%;
    min-height:100%;
}


.page-content {
    width: 100%;
    border-radius: 10px;
    margin: 10px auto auto;
    padding: 5px;
    height: 100%;
    background-color: blue;
}

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EWA</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<div class="page-content">
    <div style="background-color: red; width: 400px; height: 2500px;"></div>
</div>
</body>
</html>

As you can see the class .page-content has a height of 100%, but the div inside the page-content overlaps it. Why does the .page-content not go to the bottom of the page?

CodePudding user response：

This happen cause you define height of page-content as 100%, not more and not less, you can define also height as auto or fit-content and this solve your problem.

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height:100%;
    min-height:100%;
}


.page-content {
    width: 100%;
    border-radius: 10px;
    margin: 10px auto auto;
    padding: 5px;
    height: auto;
    background-color: blue;
}

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EWA</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<div class="page-content">
    <div style="background-color: red; width: 400px; height: 2500px;"></div>
</div>
</body>
</html>

CodePudding user response：

Either use overflow:auto property or height: fit-content or not giving height value at all

The first method will create a scroll inside the inside the .page-content and the red element will remain inside the blue element .

Second is helpful when don't want scroll in .page-content or don't want to specify some absolute value of height . This way whole element height will be equal to content height.

Third is because as it didn't matter to define in this scenario

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height:100%;
    min-height:100%;
}


.page-content {
    width: 100%;
    border-radius: 10px;
    margin: 10px auto auto;
    padding: 5px;
    height: fit-content;
    background-color: blue;
}

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>EWA</title>
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
</head>
<body>
<div class="page-content">
    <div style="background-color: red; width: 400px; height: 2500px;"></div>
</div>
</body>
</html>