Giving the html/body a min height prevents elements from having a percentages as height-CodePudding

Problem
I've given a child element (id=main) of the body a height percentage, but it doesn't seem to do anything.

I have labelled the problematic CSS code.

Code

*{
    margin:0;
    padding:0;
    background-color: black;
    color: white;
    border-radius: 10px;
}

/* Problematic Code!------------------------------------------------------------- */

html, body {
   min-height: 100%;

  }
/* ---------------------------------------------------*/

/* Header */
header{
    height: 80px;
    display: flex;
    align-items: center;
}

/* Main section */
#main{
    width: 100%;
    height: 80%;
    background-color: rgb(12, 12, 12);
    display: flex;
    justify-content: center;
}
#main #center_piece{
    background-color: rgb(12, 12, 12);
    height: 80%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forum</title>

    <link rel="stylesheet" href="index.css">
</head>
<body>
    <header>
        <h1>Forum (v0.3)</h1>
    </header>

    <section id="main">

        <section id="center_piece">

            <div id="middle_column">

                <div id="title">Posts</div>
                <div id="posts_section">

                    <div >
                        <span>Username</span>
                        <p>Comment body</p>
                    </div>

                </div>
                <div id="input_area">
                    <form>
                        <textarea cols="" rows=""></textarea>
                        <span>Submit</span>
                        <span>Refresh</span>
                    </form>
                </div>

            </div>

        </section>

    </section>
    
</body>
</html>

Solutions that don't work

When I remove the min-height and give both the html and the body a height of 100%, the problem goes away, but then I won't get the layout I need.
Changing the display of the body to grid also solves the problem but the layout changes, so I'd prefer if I didn't have to do that.
I removed the min-height from the html and gave it a height of 100%; this didn't do anything.

Thank you in advance.

CodePudding user response：

you can use viewport height vh instead of percentage.

*{
    margin:0;
    padding:0;
    background-color: black;
    color: white;
    border-radius: 10px;
}

/* Problematic Code!------------------------------------------------------------- */

html, body {
   min-height: 100%;

  }
/* ---------------------------------------------------*/

/* Header */
header{
    height: 80px;
    display: flex;
    align-items: center;
}

/* Main section */
#main{
    width: 100%;
    height: 80vh;
    background-color: rgb(12, 12, 12);
    display: flex;
    justify-content: center;
}
#main #center_piece{
    background-color: rgb(12, 12, 12);
    height: 80%;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Forum</title>

    <link rel="stylesheet" href="index.css">
</head>
<body>
    <header>
        <h1>Forum (v0.3)</h1>
    </header>

    <section id="main">

        <section id="center_piece">

            <div id="middle_column">

                <div id="title">Posts</div>
                <div id="posts_section">

                    <div >
                        <span>Username</span>
                        <p>Comment body</p>
                    </div>

                </div>
                <div id="input_area">
                    <form>
                        <textarea cols="" rows=""></textarea>
                        <span>Submit</span>
                        <span>Refresh</span>
                    </form>
                </div>

            </div>

        </section>

    </section>
    
</body>
</html>