在浏览器中打开时如何将内容放在固定标题或导航下？答案

【问题标题】：How to put content under fixed header or nav when opened in browser?在浏览器中打开时如何将内容放在固定标题或导航下？
【发布时间】：2020-02-21 20:30:30
【问题描述】：

您好，我在使用 html 和 css 制作标题时遇到问题。我的标题在固定位置，但内容被我的标题遮住了。当我运行它时，我希望我的内容位置在标题下。另外，我将标题宽度设置为 100%，但它向右移动，因此它不会覆盖屏幕上的整个宽度。 [更新]

<style>
@media(min-width: 468px) {
    body{
        background-color: aqua;
    }
    .container-1{
           display: flex; 
           /*
           align-items: flex-start;  -->box 1 lebih sempit ke atas
           align-items: flex-end;  -->box 1 lebih sempit ke bawah
           align-items: center;  -->box 1 lebih sempit ke tengah (atas bawah)
           flex-direction: column; -->flex box menjadi kolom
           */
        }
        .container-2{
            display: flex;
            /*
            justify-content: flex-end;
            justify-content: flex-start;
            */
            justify-content: space-between; /*ada spasi diantara kotak*/
        }
}
       .container-3{
           display: flex;
           flex-wrap: wrap;
       }
        
        .container-1 div, .container-2 div, .container-3 div{
            border:1px #000000 solid;
            padding:10px;
        }
        
        .box-1{
        flex:2;
        order:2;
        
        }
        .box-2{
            flex:1;
            order:1;
        }
        .box-3{
            flex: 1;
            order:3;
        }

        .container-2-box{
            flex-basis:20%;
        }

        .container-3-box{
            flex-basis: 10%;
            
        }
        header{
            padding: 0.5rem;
            text-align: center;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: beige;
           position: fixed;
            width: 100%;
            margin:0;
			
        }
        .whole-container{
            margin-top:2.0rem;
            
        }
        </style>

<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Flexbox</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    
</head>

<body>
    <header>
        <h1> Flexbox</h1>
    </header>
    <div class="whole-container">
    <div class="container-1"> 
        <div class="box-1">
            <h3>Box 1</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="box-2">
            <h3>Box 2</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="box-3">
            <h3>Box 3</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>

    <div class="container-2"> 
        <div class="container-2-box">
            <h3>Box 4</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-2-box">
            <h3>Box 5</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-2-box">
            <h3>Box 6</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
    <div class="container-3"> 
        <div class="container-3-box">
            <h3>Box 7</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 8</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">

            <h3>Box 9</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 10</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 11</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
        <div class="container-3-box">
            <h3>Box 12</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        </div>
    </div>
</div>
</body>
</html>

【问题讨论】：

请在您的 sn-p 中添加一些 HTML 以重现该问题。
您好，请添加html以帮助您
我已经添加了html源码

标签： javascript html css

【解决方案1】：

没有看到您的 HTML 代码，这有点猜测，但我会试一试。

向元素添加position: fixed 将使其在其他内容之上流动。该元素从文档流中取出。所以重叠是自然行为。

为防止内容被隐藏，您应该为框的父级添加一个填充。我猜当您添加以下代码时，它可以解决问题

body {
   padding-top: 3rem; /* should be at least the height of the header*/
}

第二个关于表头位置的问题可以用下面的代码解决：

/* option 1, add a left position:*/
header {
   ... 
   left: 0;
}

/* option 2, remove the width, use left and right position instead: */
header {
   ... 
   /* width: 100%; remove this line */
   left: 0;
   right: 0;
}

【讨论】：

我已按照您的指示进行了一些编辑。我给 .whole-container padding-top: 5.0 rem 和 header top:0;。结果，标题变成 100% 宽，上面没有空间。内容不再被标题覆盖。非常感谢
是的，我不得不猜。这就是为什么我写了“盒子的父母”，在你的情况下是.whole-container。很高兴听到你成功了。祝你项目的其余部分好运。

【解决方案2】：

body { margin: 0; }

body {
  margin: 0;
}

header {
  padding: 0.5rem;
  text-align: center;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: beige;
  position: fixed;
  width: 100%;
  /*not cover whole width*/
  margin: 0;
}

.whole-container {
  margin-top: 2.0rem;
}

<body>
  <header>
    0000
  </header>

</body>

【讨论】：