制作标题的完美方法答案

【问题标题】：Perfect way to make a header制作标题的完美方法
【发布时间】：2018-11-12 13:23:29
【问题描述】：

我正在 Laravel 中创建一个 Web 应用程序，并且我有一个标题元素的模板。我想要做的是将标题固定在顶部。我有以下代码：

    .header{
    background-color: #ffffff;
    width: 100%;
    height: 10%;
    display: flex;
    padding: 0.2em 0.2em 0.2em 0.2em;
    font-family: "Viga";
    border: none;
    position: fixed;
   }

但是，标题出现在页面下方的某个位置，并且我的 margin-top 到其他元素也不能正常工作。那么，如何使标题固定在顶部并且仍然让所有其他样式正常工作？谢谢

【问题讨论】：

你试过top: 0; left: 0;
@Ali 这确实隐藏了那个恼人的差距，但边距不起作用，一切都粘在标题上。我该如何避免呢？
将padding-top 添加到您的body 与标题高度的大小
@Ali 这一切都搞砸了。如何避免在整个页面中滚动。当我在正文中提到padding-top 时，我正在滚动。
@PHPCoder 为标题设置基于百分比的高度可能不是一个好主意。高度将根据屏幕大小而不是内容而变化，这可能会在某些屏幕上产生意想不到的结果。将高度留空（或设置为自动）以适应其内容，或使用固定单位（例如 px）进行设置，以便在所有屏幕上保持一致的行为。

标签： html css css-position fixed

【解决方案1】：

当您为固定元素指定高度时，可能会出现重叠问题，因为这种情况会排斥标题中的其余内容。

也就是说，这里标题的高度是50px，因此通过将margin-top:50px; 赋予内容来将其与内容相排斥。

当您使用position:absolute; 或position:fixed; 时，请使用top、left、right、bottom 来提及它的位置

试试这个

    .header{
        background-color: #ffffff;
        width: 100%;
        min-height: 50px;
        display: flex;
        /*padding: 0.2em 0.2em 0.2em 0.2em;*/
        font-family: "Viga";
        border: none;
        position: fixed;
        top:0;
        left:0;
       }
       
    body{background:red; height:7000px;}
    .content{color:#fff; margin-top:50px;}

 <header class="header">
 <p>Header lays here!</p>
 </header>
 <div class="content">
 <h1>Content heading</h1>
 <p>content content content content content content contentcontentcontentcontent contentcontent content content content content content content content</p>
 </div>

【讨论】：

一切正常，但标题与我的其他一些内容重叠，我该如何处理？
能否添加问题截图
谢谢！而且我没有找到插入图片的方法！
当我在另一个 div 中设置边距时，页眉的宽度会自行增加，并且页面中会出现滚动。我做错了什么？
让我们continue this discussion in chat.

【解决方案2】：

body{
    background-color: #7e797b;
    }
.header{
    background-color: #ffffff;
    width: 100%;
    display: flex;
    padding: 0.2em 0.2em 0.2em 0.2em;
    font-family: "Viga";
    border: none;
    position: fixed;
    left:0;
    top:0
   }

<html>
<head>
<body>
	<header class="header">		
    <h1>Header</h1>
	</header>
</body>
</head>
</html>

【讨论】：

只需添加 left:0 和 top:0。不需要给出header的高度，因为高度会根据屏幕高度而变化。