Foros del Web - Ver Mensaje Individual

Numon · #2 (**permalink**) 28/05/2015, 07:19

Hola, he estado probando un poco y no me ha dado problemas, lo único es, como la positon de la barra es fixed en vez de separarla con margin-top lo he hecho con top. El contenedor principal tendría un margin-top de (3em + height de la barra), ej: 5em si la barra fuese de 2em, el problema es que si la altura de la barra la tienes en px no puedes calcularlo correctamente.

Este es el código que he probado. Para probarlo he usado la web de codepen por ello no tiene ni el Doctype ni el link al css.

El HTML:

Código HTML:

Ver original<head>
  <meta charset="UTF-8" />
  <title>Document</title>
</head>
<body>
  <div class="menu">Menu</div>
  
  <div class="cuerpo">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam rerum vel, excepturi animi corporis aut repellendus expedita, ex hic praesentium illum at, nihil sed adipisci nobis in placeat voluptatibus odio!</p>
    <p>Unde nemo, reprehenderit ullam similique facilis dicta fugiat non consectetur saepe, quia aut labore! Tempore, libero, quaerat! Aperiam eligendi ullam nobis, sapiente laborum, aspernatur recusandae aliquid sint laudantium, praesentium autem?</p>
    <p>Repellat animi a expedita, consequatur aliquam molestias fugit suscipit laborum sint numquam maiores molestiae in dolor officiis. Quasi consectetur minus rem odio illum sed libero velit modi odit quae! In.</p>
    <p>Sunt adipisci exercitationem aperiam eveniet, hic culpa et est molestiae itaque eos corrupti voluptas eaque facere animi harum vitae perferendis quam, dolorem nihil pariatur repellendus sapiente optio, accusamus quod? Ipsum!</p>
    <p>Quos distinctio dolorem quaerat, aut. Numquam fugiat itaque consequatur, labore quae eum doloribus magni facilis nobis repudiandae vero ratione ut reprehenderit minus nostrum, earum soluta dicta. Quasi repellendus delectus, molestiae.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo ipsum quisquam optio ab non corporis nemo perferendis dolor, tempora consequatur rem temporibus doloremque laborum dolorum vel distinctio nostrum perspiciatis alias.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis minus corporis aperiam velit sed et magnam eos hic esse voluptatem optio molestias, quas doloribus labore fugit quo odio reprehenderit explicabo.</p>
</div>
</body>
</html>

El CSS:

Código CSS:

Ver originalbody{
  padding: 0;
  margin: 0;
}
 
.menu{
  
  width: 100%;
  position: fixed;
  top: 3em;
  height: 2em;
  background-color: #ddd;
  z-index: 1000;
  
}
 
.cuerpo{
  
  width: 100%;
  margin-top: 5em;
  height: 3000px;
  background-color: #256;
  
}

Espero que sea esto a lo que referías.