html - 即使使用 100perc html 和正文，以百分比表示的 div 高度也不起作用-6ren

html - 即使使用 100perc html 和正文，以百分比表示的 div 高度也不起作用

转载作者：搜寻专家更新时间：2023-10-31 08:24:57

我想使用不依赖于其中元素的百分比设置 div 高度。我在屏幕顶部有一个固定的标题和一个居中的 div。但是以百分比设置高度不起作用。只有当我在其中添加一些元素时它才会放大。

请帮忙。

我有这个代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lol</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="conteiner">
    <header>
        <p>header</p>
    </header>
    <div id="main">
        <p>main info</p>
    </div>
</div>
</body>
</html>

还有这个 CSS。

html{
    width: 100%;
    height: 100%;
}
body{
    overflow: hidden;
    margin: 0;
    width: 100%;
    height: 100%;
}

header{
    position: fixed;
    top: 0px;
    width: 100%;
    height: 10%;
    border: solid red 1px;
}

#main{
    display: block;
    width: 65%;
    height: 80%;
    border: solid green 1px;
    margin: 8% auto 0 auto;
}