如何阻止标题与导航重叠？答案

【问题标题】：How to Stop Header from Overlapping with Navigation?如何阻止标题与导航重叠？
【发布时间】：2021-11-06 14:01:03
【问题描述】：

我有一个页面，其顶部有一个固定的水平标题，左侧有一个固定的垂直导航栏。页面右下角有一个区域，其中包含页面的“内容”。我的页眉占据了页面高度的 20%。我试图弄清楚如何调整内容和导航元素的大小/位置，以使它们不会相互重叠。截至目前，导航栏与标题重叠。当我将这两个元素的顶部设置为 20% 的边距时，它们会在它们和标题之间留下很大的空白。

Screenshot of the page

我的代码：

#header {
    background-color: #3265C9;
    position: fixed;
    height: 20%;
    width: 100%;
    overflow-y: hidden;   
}

#navigation {
    background: yellow;
    position: fixed;
    height: 100%;
    width: 20%;
    text-align: center;
    margin-top: 20%;
}

.navButton
{
    display: block;
    
}

#content {
    background-color: red;
    position: absolute;
    right: 0px;
    margin-left: 20%;
    margin-top: 20%;
    text-align: center;
    
}

body
{
    margin: 0px;
}

<!DOCTYPE html>
<html>
  
  <head>
    <meta charset="utf-8"/>
    <title>PriceCo</title>
    <link id="cssFile" rel="stylesheet" type="text/css" href="styleA.css">
  </head>
  
  <body>

    <div id="header">
      <div>
        <img id="pricecoLogo" src="./img/cart.png" alt="logo" >
        <h1>PriceCo</h1>
      </div>
      <div>This is a store.</div>
    </div>
    
    <div id="navigation">
      <a class="navButton" href="#">Departments</a>
      <a class="navButton" href="#">Shop</a>
      <a class="navButton" href="#">Cart</a>
      <a class="navButton" href="#">Account</a>
    </div>
      
    <div id="content">
    CONTENT
    </div>

  </body>

</html>

【问题讨论】：

标签： html css

【解决方案1】：

我敢肯定，这不会是你的最终解决方案，但我认为它回答了你的问题。

从标题和导航中删除 position: fixed;
从导航中删除 margin-top。

#header {
  background-color: #3265C9;
  height: 20%;
  width: 100%;
  overflow-y: hidden;
}

#navigation {
  background: yellow;
  height: 100%;
  width: 20%;
  text-align: center;
}

.navButton {
  display: block;
}

#content {
  background-color: red;
  position: absolute;
  right: 0px;
  margin-left: 20%;
  margin-top: 20%;
  text-align: center;
}

body {
  margin: 0px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>PriceCo</title>
  <link id="cssFile" rel="stylesheet" type="text/css" href="styleA.css">
</head>

<body>

  <div id="header">
    <div>
      <img id="pricecoLogo" src="./img/cart.png" alt="logo">
      <h1>PriceCo</h1>
    </div>
    <div>This is a store.</div>
  </div>

  <div id="navigation">
    <a class="navButton" href="#">Departments</a>
    <a class="navButton" href="#">Shop</a>
    <a class="navButton" href="#">Cart</a>
    <a class="navButton" href="#">Account</a>
  </div>

  <div id="content">
    CONTENT
  </div>

</body>

</html>

【讨论】：

【解决方案2】：

使用top 而不是margin-top

#header {
            background-color: #3265C9;
            position: fixed;
            height: 20%;
            width: 100%;
            overflow-y: hidden;   
        }

        #navigation {
            background: yellow;
            position: fixed;
            height: 80%;
            width: 20%;
            top: 20%;
            text-align: center;
        }

        .navButton
        {
            display: block;
            
        }

        #content {
            background-color: red;
            position: absolute;
            right: 0px;
            margin-left: 20%;
            top: 20%;
            width: 80%;
            height: 80%;
            text-align: center;
        }

        body
        {
            margin: 0px;
        }

<div id="header">
      <div>
        <img id="pricecoLogo" src="./img/cart.png" alt="logo" >
        <h1>PriceCo</h1>
      </div>
      <div>This is a store.</div>
    </div>
    
    <div id="navigation">
      <a class="navButton" href="#">Departments</a>
      <a class="navButton" href="#">Shop</a>
      <a class="navButton" href="#">Cart</a>
      <a class="navButton" href="#">Account</a>
    </div>
      
    <div id="content">
    CONTENT
    </div>

【讨论】：