使用多个样式表时的浮动标头

Question

I have a question or two about floating headers. 我对浮动标头有一个或两个问题。

Currently, I'm working with two CSS files, bootstrap.min.css and main.css , the latter being a custom file, containing the following 目前，我正在使用两个CSS文件bootstrap.min.css和main.css ，后者是一个自定义文件，包含以下内容

* {
    margin: 0;
    padding: 0;
}

#heading {
    padding: 0;
    margin: 0;
    border: 0; 
    background-color: #acc7dc; 
    height: 10%;
    width: 100%;
    z-index: 10;
    position: fixed; 
    font-family: 'Merriweather', serif;
    text-align: center;
}

which to the best of my understanding should start the heading block at the very top of the screen. 据我所知，应该在屏幕的最上方开始标题栏。 However, sometimes when testing the HTML, there is a whitespace between the top of the screen and the header. 但是，有时在测试HTML时，屏幕顶部和标题之间会有一个空格。

The HTML is structured like so: HTML的结构如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" href="../static/main.css" >
        <link href='https://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>
        <title>Trial</title>
    </head>
    <body>
        <div id="heading">
            <header>
                <h1>Trial</h1>
            </header>
        </div>
    </body>
</html>

I don't modify this behaviour anywhere else. 我不会在其他任何地方修改此行为。 Any ideas what the problem might be? 任何想法可能是什么问题？

Answer 1

Since you are using Bootstrap you could utilize the .navbar-fixed-top class, that should correct for the gap . 由于您使用的是Bootstrap，因此您可以利用.navbar-fixed-top类，该类应该可以纠正gap。 If you want to apply your own custom styes to the header, you would just need to apply both the class and the id styling: 如果要将自己的自定义样式应用于标头，则只需要同时应用类和id样式：

<div class='navbar-fixed-top' id="heading">
    <header>
        <h1>Trial</h1>
    </header>
</div>

使用多个样式表时的浮动标头

问题描述

1 个解决方案

解决方案1
0 已采纳 2016-03-07 02:39:25

使用多个样式表时的浮动标头

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-03-07 02:39:25

解决方案1
0 已采纳 2016-03-07 02:39:25