Фиксированный заголовок страницы - PullRequest
Новая
       2

Фиксированный заголовок страницы

6 голосов
/ 30 ноября 2011

Я никогда не имел дело с 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;
    }
 <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>

если вы все еще не понимаете, о чем я, здесь я предоставляю ссылки с фиксированными, без фиксированных

Конечно, я ищу хорошее решение без лишнего кода (даже CSS и JS). Важно отметить, что ни один элемент, особенно заголовок, не имеет фиксированной высоты!

Ответы [ 3 ]

15 голосов
/ 30 ноября 2011

Если я правильно понимаю вашу проблему, вы хотите добавить следующий CSS в ваш заголовок, чтобы он оставался в верхней части страницы: 

top: 0px;

Затем, с помощью div#content, дайте емуверхнее поле, чтобы вытолкнуть его из заголовка: 

margin-top: 200px;

Таким образом, ваш CSS в конечном итоге будет выглядеть так: 

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

#content {
    border: 2px solid black;
    margin-top: 200px;
}
1 голос
/ 30 ноября 2011

Добавьте фиксированную высоту к заголовку и используйте то же значение для отступа содержимого.

См. http://jsfiddle.net/DmLkQ/

Если вы не хотите фиксированной высоты, используйте jQuery:

http://jsfiddle.net/DmLkQ/5/

0 голосов
/ 30 ноября 2011

Это должно работать для вас: 

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