Encabezado de página fijo

Question

Nov 30, 2011, 02:25 PM

Encabezado de página fijo

Nunca he tratado con CSS, pero ahora tengo que hacerlo. Estoy desarrollando un código HTML, un boceto de un sitio web y tengo un problema con CSS. Me gustaría tener mi encabezado en una posición fija, quiero decir que siempre debe estar en la parte superior del sitio, incluso si hay tanto contenido que el sitio tiene que desplazarse para verlo todo. He intentado algo, pero no funciona correctamente.

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>

si aún no entiendes lo que quiero decir, aquí proporciono enlacescon fijo, witout fixed

Por supuesto, lo que estoy buscando es una buena solución, sin código innecesario (incluso CSS y JS). ¡Es importante tener en cuenta que ningún elemento, especialmente el encabezado, no tiene una altura fija!