Html CSS中80%的高度有问题，目前还没有找到解决方案。_Html_Css

Html CSS中80%的高度有问题，目前还没有找到解决方案。

html css

Html CSS中80%的高度有问题，目前还没有找到解决方案。,html,css,Html,Css,我正在尝试为一个游戏社区创建一个网站。该网站应该是非常简约的，标题/导航覆盖100%x20%的页面，主要内容覆盖100%x80%。我让跳水运动员出场，但我似乎无法让他们正确定位。由于我必须使用“position:absolute”，我真的不知道如何让这些东西正常工作。请记住，我对HTML/CSS非常陌生 <!DOCTYPE html> <html style="height:100%;"> <head> <title>ESI | Missione

我正在尝试为一个游戏社区创建一个网站。该网站应该是非常简约的，标题/导航覆盖100%x20%的页面，主要内容覆盖100%x80%。我让跳水运动员出场，但我似乎无法让他们正确定位。由于我必须使用“position:absolute”，我真的不知道如何让这些东西正常工作。请记住，我对HTML/CSS非常陌生

<!DOCTYPE html>

<html style="height:100%;">
<head>
<title>ESI | Missioners and Miners Haven</title>
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
</head>

<body style="height:100%;">
<div id="contianer">

<div id="navbar">

<div id="logobox">
<p>ESI Official Site</p>
</div>

<ul>
    <li><a href="#">Sign Up!</a></li>
    <li><a href="#">ESI Blog</a></li>
    <li><a href="#">Corp Op's</a></li>
    <li><a href="#">Home</a></li>
</ul>

</div>

<div id="content">

</div>

</div>

</body>
</html>

我知道这个问题已经被问过很多次了，但我在这个网站上找到的解决方案都不管用

感谢您的帮助，谢谢。

您不能用我知道的

来指定高度。您可能需要为此使用

px

。你应该问自己，什么是100%对你来说？因为窗户的高度和它的宽度一样可变。在CSS中指定百分比时，这些元素包含其父容器的百分比。你不会绝对想要定位这些元素。您也不需要指定

body

或

html

元素的高度。如果看不到你想要在视觉上完成什么，很难告诉你你的价值观应该是什么，但是从那里开始。

如果你想使用绝对定位，你需要适当地设置

top

以向下移动

#content

还有两件事：

不要内联设置样式（html和正文标记）。使用你的样式表

为什么

导航栏上的浮动
？该元素已定位为绝对值


#content
上的边距
适用于所有方向（顶部和底部）


这是你想要的吗
#content
{
    margin-top:20%;
    width:100%;
    height:80%;
    /* ... */
}


全屏模式：
margin:10%
将为所有人提供10%（右上下左）
给出页边距顶部

如果位置是绝对的，则不需要浮动。不幸的是，这根本没有解决问题；事实上，这让我回到了无法让div出现的最初问题。感谢您的尝试，但即使我在jsfiddle.net中运行此代码，它也无法正常工作。将高度指定给节点（以百分比表示）的关键在于，确保其父节点具有固定的高度。您不能以百分比定义高度。。使用像素定义高度。
#content
{
    margin-top:20%;
    width:100%;
    height:80%;
    /* ... */
}

html, body, #container {
    height:100%;
}
#navbar {
    height:20%;

    background:#35291F;
    list-style:none;
}
#content {
    height:80%;

    background:grey;
}