Emulación de CSS puro de un conjunto de marcos

He estado buscando durante más de 1 hora sin éxito. ¿Hay una forma pura de CSS de emular un conjunto de marcos? Quiero decir, realmente emularlo. He encontrado algunas cosas interesantes en las que habrás arreglado los bloques superior e inferior, pero la barra de desplazamiento para el contenido es la barra de desplazamiento del cuerpo del navegador normal. Lo que necesito es una barra de desplazamiento solo para el bloque de contenido, como lo haría un conjunto de marcos.Emulación de CSS puro de un conjunto de marcos

Puedo hacerlo funcionar asignando overflow: auto a mi área de contenido div y estableciendo una altura fija. Pero el problema es que no conozco el tamaño de la ventana del navegador del cliente sin usar javascript. Y no quiero usar javascript para esto. Tampoco puedo usar porcentajes para las alturas ya que mi bloque superior tiene una altura fija. El bloque inferior es el que debe expandirse o contraerse según la altura de la ventana del navegador. Cualquier ayuda apreciada. ¡Gracias!

Fuente

2010-08-08 Marcos Buarque

¿Qué tal algo así?

HTML

<div id="header"> 
    <img src="logo.gif" alt="logo" /> 
    <h1 class="tagline">Oh em gee</h1> 
</div> 
<div id="content"> 
    <div id="content-offset"> 
     <p>This will be 100% of the screen height, BUT the content offset will have a top pixel margin which allows for your header. Set this to the pixel value of your header height.</p> 
    </div> 
</div>

CSS

body, html { 
    margin: 0; padding: 0; 
    height: 100%; 
} 
#header { 
    height: 120px; 
    position: fixed; 
    top: 0; 
    background: red; 
    width: 100%; 
} 

#content { 
    height: 100%; 
    position: absolute; 
    top: 0; 
} 
#content-offset { 
    margin-top: 120px; 
    background: aqua; 
    height: 100%; 
    width: 100%; 
    position: fixed; 
    overflow: auto; 
}

Fuente

2010-08-08 05:06:41 Marko

+1 brilliant solution Marko, me gusta eso. – Gabriel

Hummm. Suena interesante ... Lo intentaré en este momento ... ¡Gracias! –

Déjame saber cómo vas, solo lo probé en mi cabeza :) – Marko

No. Creo que tendrá que usar javascript para obtener el tamaño de la ventana para esto, a menos que configure el bloque superior en un% de tamaño fijo, p. hacer el bloque superior 10% y el inferior 90%.

Fuente

2010-08-08 05:01:16

La respuesta de Makro está cerca, pero no funciona bien. El contenido se superpone al encabezado.

Hasta el punto, le gustaría usar position: fixed; para su encabezado, no para su contenido. Esto también hace que el envoltorio sea superfluo. Aquí hay un ejemplo básico de kickoff, puedes copiarlo y pegarlo.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <title>SO question 3433129</title> 
     <style> 
      body { 
       margin: 0; 
       background: aqua; 
      } 
      #header { 
       position: fixed; 
       height: 120px; 
       width: 100%; 
       background: pink; 
      } 
      #content { 
       padding-top: 120px; /* Should be the same as #header height */ 
      } 
     </style> 
    </head> 
    <body> 
     <div id="header"> 
      <h1>Header</h1> 
     </div> 
     <div id="content"> 
      <p>Start of content.</p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p> 
      <p>End of content.</p> 
     </div> 
    </body> 
</html>

Fuente

2010-08-08 05:22:12 BalusC

Se superpone al encabezado, pero observe el margen superior en el desplazamiento? por cierto, el relleno se AGREGA encima del ancho/alto, por lo que su contenido será 100% + 120px. – Marko

@Marko: la altura del 100% no debería haber estado allí en primer lugar (tampoco habría funcionado ya que html/body no tiene 100% de altura;)). Actualicé la respuesta. – BalusC

Gracias, pero la diferencia con lo que necesito es que la barra de desplazamiento para el bloque #content en su ejemplo sea en realidad la barra de desplazamiento del navegador. Necesito una barra de desplazamiento que se ejecute solo dentro del bloque #content, como un desbordamiento automático. –

Emulación de CSS puro de un conjunto de marcos

Respuesta

Cuestiones relacionadas