Creando un "sándwich div" con divisiones de pan de altura fija y un divisor de carne expandible

Tengo un sándwich div: tres divisores uno encima del otro. Las rebanadas de pan son de altura fija debido a las imágenes de fondo. La carne es una imagen repetidora vertical de 1px de alto. Necesito una forma de expandir la carne cuando el contenido de desbordamiento de la parte superior del patrón de cocción golpea la parte inferior de la parte inferior del patrón. Pensé que sería necesario un envoltorio para la carne y el pan de fondo, pero no estoy seguro de cómo implementarlo.Creando un "sándwich div" con divisiones de pan de altura fija y un divisor de carne expandible

Esto es lo que tengo hasta ahora.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     #top { 
      position:relative; 
      height:100px; 
      background-color:pink; 
      width:460px; 
      word-wrap:break-word; 
     } 
     #wrapper { 
      position:relative; 
     } 
     #expand { 
      min-height:100%; 
      height:auto; 
      background-color:#EEEFFF; 
     } 
     #bottom { 
      height:100px; 
      background-color:#EEEEEE; 
     } 
     div.clear{ 
      position:absolute; 
      width:100%; 
      clear:both; 
      height:1px; 
      overflow:hidden; 
      border:solid orange; 
     } 
    </style> 
    <title></title> 
</head> 
<body> 

    <div id="top"> 
     a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a 
    </div> 
    <div id="wrapper"> 
     <div id="expand"></div> 
     <div id="bottom"></div> 
     <div class="clear"></div> 
    </div> 
</body> 
</html>

necesito una manera de hacer golpe contenido de la parte superior contra el "claro" en la envoltura inferior y mover el contenedor hacia abajo.

Fuente

2010-11-03 Amalgovinus

1 por el título - me ayudó también. "División de carne expansible" = D – Jason

¿Es este el efecto que buscas?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     #top { 
      position:absolute; 
      height:100px; 
      background-color:pink; 
      width:460px; 
      top:0px; 
     } 
     #wrapper { 
      position:relative; 
     } 
     #expand { 
      position:absolute; 
      top:100px; /*height of top div*/ 
      bottom:100px; /*height of bottom div*/ 
      width:100%; 
      background-color:#cccFFF; 
     } 
     #bottom { 
      position:absolute; 
      bottom:0px; 
      height:100px; 
      width:560px; 
      background-color:#EEEEEE; 
     } 
     #text 
     { 
     position:relative; 
     } 
    </style> 
    <title></title> 
</head> 
<body> 

    <div id="wrapper"> 
     <div id="expand"></div> 
     <div id="top"></div> 
     <div id="bottom"></div>   
     <div id="text"> 
     a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a 
     </div> 
    </div> 
</body> 
</html>

Fuente

2010-11-03 22:23:00 david

Esto es exactamente lo que estaba buscando. El único otro que se necesita para que funcione este modelo es que la envoltura tenga una altura mínima establecida en la altura combinada de las panes cortados. Buen trabajo a todos, no hubiera pensado en esto. – Amalgovinus

Creo que cuando tienes contenido desbordando un elemento de altura fija, entonces el contenido desbordado no afectará el diseño de otros elementos.

¿Podría mover su contenido fuera de la rebanada de pan superior, y en la carne? Eso hará que la expansión suceda.

Si el contenido tiene que aparecer en frente de la parte superior del fondo rebanada de pan, entonces se podría utilizar position: relative y un margen inferior negativo para lograr que:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     #breadtop, 
     #breadbottom { 
      height: 100px; 
      background-color: #977; 
     } 

     #breadtop { 
      overflow: visible; 
     } 

     #meat { 
      background-color: #fbd; 
     } 

     #content { 
      position: relative; 
      top: -100px; 
      margin-bottom: -100px; 
     } 
    </style> 
    <title></title> 
</head> 
<body> 

    <div id="breadtop"></div> 
    <div id="meat"> 
     <div id="content"> 
      a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/> 
      a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/> 
      a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a<br/>a 
     </div> 
    </div> 
    <div id="breadbottom"></div> 
</body> 
</html>

me gusta esta pregunta porque es bastante complicado, y porque contiene la frase "div de carne expandible".

Fuente

2010-11-03 22:11:26

Este es un enfoque legítimo, pero el uso de los márgenes se confundió con otros artículos que tengo en la página. Opté por poner el contenido en un envoltorio de sándwich fuera del sándwich, como en la sugerencia de David. Gracias por ayudarme, me alegra que te haya gustado mi div de carne. – Amalgovinus

(Si desea código de ejemplo que puedo llegar a ella, pero me voy a tomar más tiempo para responder)

Lo que es posible que desee hacer es colocar sus 3 rebanadas en un div, y poner su " arriba "contenido en el nuevo div en lugar de la porción superior. De esta forma, la altura de su nuevo div estará determinada por el contenido.

Para las 3 rebanadas, posición absoluta todas ellas. Coloque las partes superior e inferior en la parte superior e inferior de su nuevo div usando top:0 y bottom:0, respectivamente. Para la porción media de carne, no le dé altura, sino que haga las declaraciones top y bottom equivalentes a la altura de las rodajas superior e inferior. De esta forma, la parte superior/inferior de la carne siempre se mantendrá a X píxeles de la parte superior/inferior de su nuevo div, donde X es la altura de la parte superior/inferior del corte.

Fuente

2010-11-03 22:22:49 JustcallmeDrago

Sí, eso es exactamente lo que hice en el código que publiqué. Funciona de maravilla – david

(15 caracteres) o/ – JustcallmeDrago

Allways sigo a este ejemplo: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Fuente

2011-02-16 13:13:18 Mordi

Creando un "sándwich div" con divisiones de pan de altura fija y un divisor de carne expandible

Respuesta

Cuestiones relacionadas