0

我正在尝试为游戏社区创建一个网站。该网站应该是非常简约的，标题/导航覆盖页面的 100%x20%，主要内容覆盖 100%x80%。我让 div 显示出来，但我似乎无法让它们正确定位自己。由于我不得不使用“位置：绝对；” 我真的不知道如何使这些事情正常工作。请记住，我对 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>

这就是 HTML，这是 CSS 的重要部分：

#container
{
width:100%;
height:100%;
}

#navbar
{
width:100%;
height:20%;
background:#35291F;
list-style:none;
float:left;
position:absolute;
}

#content
{
margin:10%;
width:90%;
height:80%;
background:grey;
position:absolute;
}

我知道这个问题已经被问过很多次了，但我在这个网站上找到的解决方案都没有奏效。

感谢任何帮助，谢谢。

4

5 回答 5

1

margin:10%会给所有人10％（左上右下）。

给margin-top

如果位置是绝对的，则不需要浮动。

于 2013-02-12T07:03:02.493 回答
0

http://jsfiddle.net/rainthinks/t23bD/1/

全屏模式：http: //jsfiddle.net/rainthinks/t23bD/1/embedded/result/

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

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

    background:grey;
}
于 2013-02-12T06:59:42.557 回答
0

你不能用%我知道的 a 来指定高度。你可能会想用px这个。你应该问自己的是，100% 对你来说是什么？因为窗口的高度和它的高度一样可变。当您在 CSS 中指定百分比时，这些元素包含其父容器的该百分比。你不会想要绝对定位这些元素。您也不需要指定bodyorhtml元素的高度。如果不从视觉上看你到底想完成什么，很难告诉你你的价值观应该是什么，但从那里开始。

于 2013-02-12T06:52:59.247 回答
0

这是你想要的吗？

#content
{
    margin-top:20%;
    width:100%;
    height:80%;
    /* ... */
}

http://jsfiddle.net/WJrW3/

于 2013-02-12T06:55:45.413 回答
0

如果要为此使用绝对定位，则需要top适当设置以#content向下移动。

其他几件事：

  • 不要设置内联样式（你的 html 和 body 标签）。使用您的样式表。
  • 为什么float开#navbar？该元素已经定位absolute。
  • marginon#content适用于所有方向（也适用于顶部和底部）。

JS Bin 演示

于 2013-02-12T06:53:50.503 回答