Création d'un "sandwich div" avec des divs de tranche de pain de hauteur fixe et un div de viande extensible

J'ai donc un sandwich div: trois divs les uns sur les autres. Les tranches de pain sont toutes deux à hauteur fixe en raison des images de fond. La viande est une image haute répéteur verticale 1px. J'ai besoin d'un moyen d'étendre la viande lorsque le contenu de débordement du pain supérieur touche le fond de la louche inférieure. J'ai pensé qu'un emballage serait nécessaire pour la viande et le pain, mais je ne suis pas sûr de savoir comment l'appliquer.Création d'un "sandwich div" avec des divs de tranche de pain de hauteur fixe et un div de viande extensible

Voici ce que j'ai jusqu'ici.

<!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>

je besoin d'un moyen de rendre le contenu de TopHit contre le « clair » dans l'enveloppe inférieure et déplacer l'emballage vers le bas.

Source

2010-11-03 Amalgovinus

+1 pour le titre - m'a aidé aussi. "Expandable Meat Div" = D – Jason

Est-ce l'effet que vous recherchez?

<!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>

Source

2010-11-03 22:23:00 david

C'est exactement ce que je cherchais. Le seul autre élément requis pour que ce modèle fonctionne est que l'emballage ait une hauteur minimale réglée sur la hauteur combinée des tranches de pain. Bon travail tout le monde, je n'aurais pas pensé à ça. – Amalgovinus

Je pense que lorsque le contenu déborde d'un élément de hauteur fixe, le contenu qui déborde n'affecte pas la disposition des autres éléments. Pourriez-vous déplacer votre contenu hors de la tranche de pain supérieure, et dans la viande? Cela rendra l'expansion possible.

Si le contenu doit apparaître devant l'arrière-plan de la tranche de pain haut, vous pouvez utiliser position: relative et une marge inférieure négative pour y parvenir:

<!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>

J'aime cette question, car il est assez délicat, et parce qu'il contient l'expression "div de viande extensible".

Source

2010-11-03 22:11:26

Ceci est une approche légitime, mais l'utilisation des marges est en désordre avec d'autres éléments que j'ai sur la page. J'ai opté pour plutôt mettre le contenu dans un emballage sandwich à l'extérieur du flux sandwich, comme dans la suggestion de David. Merci d'avoir aidé, je suis content que vous ayez aimé ma viande div. – Amalgovinus

(Si vous voulez un exemple de code que je peux venir avec elle, mais ça va me prendre plus de temps pour répondre)

Ce que vous pouvez faire est de placer vos 3 tranches dans une div, et de mettre votre " top "contenu dans le nouveau div au lieu de la tranche supérieure. De cette façon, la hauteur de votre nouvelle div sera déterminée par le contenu.

Pour les 3 tranches, position absolue toutes. Placez les tranches supérieure et inférieure en haut et en bas de votre nouvelle div en utilisant top:0 et bottom:0, respectivement. Pour la tranche de viande moyenne, ne lui donnez pas une hauteur, mais faites plutôt des déclarations top et bottom égales à la hauteur de vos tranches supérieure et inférieure. De cette façon, le haut/bas de la viande sera toujours maintenu à X pixels du haut/bas de votre nouveau div, où X est la hauteur de la tranche supérieure/inférieure.

Source

2010-11-03 22:22:49 JustcallmeDrago

Oui, c'est exactement ce que j'ai fait dans le code que j'ai posté. Fonctionne des merveilles. – david

(15 caractères) o/ – JustcallmeDrago

Je suis AllWays cet exemple: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

Source

2011-02-16 13:13:18 Mordi

Création d'un "sandwich div" avec des divs de tranche de pain de hauteur fixe et un div de viande extensible

Répondre

Questions connexes