Question

我对水平导航栏有疑问。我想创建一个页面，图像为标题（高度：100px），水平导航栏，最后是内容区域（高度：768px）。我想知道导航栏为什么要放在内容区域（这意味着内容区域小于768px）。我该如何避免这种行为？相反，我想将内容区域向下移动到导航栏的大小。

这是我的css代码：

* {
         margin:0;
         padding:0;
}

body {
         background:#FFFFFF;
}

#frame {
         margin: auto;
         width: 1024px;
         height: 768px;
}

#header {
         width:100%;
         height:100px;
         background-image:url(image.jpg);
}

#navigation {
         width: 100%;
         float: left;
         list-style: none;
         background: #f2f2f2;
}

#navigation li {
         list-style: none;
         display: inline;
         float: left;
}

#navigation a {
         display: block;
         padding: 8px 15px;
         text-decoration: none;
         font-weight: bold;
         color: #069;
         border-right: 1px solid #ccc;
}

#navigation a:hover {
         color: #c00;
         background-color: #fff;
}

#content {
    background: #EBF7FF;
    width: 1024px;
    height:768px;       
    text-align: justify;
}

这是html代码：

<html>
<head>
<title>test</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="frame">

<div id="header">

</div>

 <ul id="navigation">
          <li><a href="main.html" target="_self">text1</a></li>
          <li><a href="text2.html">text2</a>
          <li><a href="text3.html">text3</a></li>
          <li><a href="text4.html">text4</a></li>          
 </ul>


<div id="content">

<font size="+3">Title</font>

<br>
<br>

Content...

<br>
<br>

</div>

</div>

</body>
</html>

Answer 1

如果你想让#navigation显示为float，你可以在你的#content中添加clear：both。

#content {
   background: #EBF7FF;
   width: 1024px;
   height:768px;       
   text-align: justify;
   clear:both;
}

但是在我看来，更好的解决方案是将其显示为块和li作为内联块或将其显示为表格和li作为表格单元格

Answer 2

为#navigation指定宽度为100％，它包含在包含内容的容器#frame中。因此#navigation获取其容器的宽度，因此宽度与容器内的其余内容相同，因为容器正好采用内部内容所需的宽度。

您将导航放在内容容器中，所以很明显它必须占用空间。如果您想避免这种情况，只需将导航放在内容容器上方：

<html>
<head>
<title>test</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<div id="header">
    <ul id="navigation">
          <li><a href="main.html" target="_self">text1</a></li>
          <li><a href="text2.html">text2</a>
          <li><a href="text3.html">text3</a></li>
          <li><a href="text4.html">text4</a></li>          
    </ul>
</div>

<div id="frame">
  <div id="content">
  <font size="+3">Title</font>
    <br>
    Content...
  </div>
</div>

</body>
</html>

比较fiddler。

Answer 3

你的导航必须占用整个可用的空间并将高度设置为value.set display:table以便导航，这样它的高度就会增长到它的内容：

#navigation{
   display:table;
}

检查DEMO

Answer 4

那是因为#navigation它漂浮在#content之上。

尝试添加此内容以强制#content在导航下方渲染：

#content {
    clear:both;
}

Answer 5

当您执行此操作时，您不必打扰导航后的内容。

#navigation:after {
   clear:both;
}

为什么我的水平导航栏会占用内容区域的空间？

5 个答案: