固定页面标题

Question

固定页面标题

我从来没有处理过CSS,但现在我必须这样做.我正在开发一些HTML代码 - 一个网站的草图,并有CSS的问题.我想让我的标题处于固定位置,我的意思是它总是应该位于网站的顶部,即使有太多的内容,网站也必须滚动才能看到所有内容.我尝试了一些,但它无法正常工作.

HTML:

    body {
        margin: 0px 0px 0px 0px;
    }

    header {
        border: 2px solid red;
        position: fixed;
        width: 100%;
    }

    #top-menu-bar {
        border: 1px dashed red;
        padding: 15px;
        text-align: right;
    }

    #main-menu-bar {
        border: 1px dashed red;
        padding: 15px;
    }

    #logo-bar {
        border: 1px dashed red;
        padding: 35px;
    }

    #content {
        border: 2px solid black;
    }

    footer {
        border: 2px solid blue;
        padding: 15px;
    }

Run Code Online (Sandbox Code Playgroud)

 <html>
      <head>
        <link rel="stylesheet" type="text/css" href="./css/main.css"></link>
      </head>
      <body>
        <header>
          <div id="top-menu-bar">
        	Login &nbsp; | &nbsp; Registration
          </div>
          <div id="logo-bar">
        	LOGO
          </div>
          <div id="main-menu-bar">
                MenuItem1 &nbsp; | &nbsp; MenuItem3 &nbsp; | &nbsp; MenuItem3
          </div>
        </header>
        <div id="content">
          <h1>
            Content
          </h1>
          <p>
            Some content<br/>
          </p>
        </div>
        <footer>
	      Footer
        </footer>
      </body>
    </html>

Run Code Online (Sandbox Code Playgroud)

如果你仍然不明白我的意思,在这里我提供固定的链接,无法修复

当然,我正在寻找的是一个很好的解决方案,没有不必要的代码(甚至CSS和JS).重要的是要注意,没有一个元素,特别是标题没有固定的高度!

Answer 1

Boj*_*les 15

如果我正确理解您的问题,您需要将以下CSS添加到标题中,以使其保持在页面顶部:

top: 0px;

Run Code Online (Sandbox Code Playgroud)

然后,使用div#content,给它一个上边距将其从标题的方式推下:

margin-top: 200px;

Run Code Online (Sandbox Code Playgroud)

所以你的CSS看起来像这样:

header {
    border: 2px solid red;
    position: fixed;
    width: 100%;
    top: 0px;
}

#content {
    border: 2px solid black;
    margin-top: 200px;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，3 月前
查看次数：	21752 次
最近记录：	8 年，5 月前