1. casa
  2. Domanda e risposta
  3. Creazione di un "div sandwich" con div di fetta di pane ad altezza fissa ed un div di carne espandibile

Creazione di un "div sandwich" con div di fetta di pane ad altezza fissa ed un div di carne espandibile

2010-11-03 7 views
7

Quindi ho un sandwich div: tre div uno sopra l'altro. Le fette di pane sono entrambe a altezza fissa a causa delle immagini di sfondo. La carne è un'immagine ripetitrice verticale alta 1px. Ho bisogno di un modo per espandere la carne quando il contenuto di trabocco dal breadslice superiore colpisce il fondo del breadslice inferiore. Ho pensato che sarebbe stato necessario un involucro per la carne e il pane di fondo, ma non sono sicuro di come realizzarlo.Creazione di un "div sandwich" con div di fetta di pane ad altezza fissa ed un div di carne espandibile

Ecco quello che ho finora.

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

Ho bisogno di un modo per fare colpo contenuti di alto contro il "chiaro" nella confezione in basso e spostare l'involucro verso il basso.

fonte

2010-11-03 Amalgovinus

+1

+1 per il titolo - mi ha aiutato troppo. "Expandable Meat Div" = D – Jason

risposta

7

È questo l'effetto che cerchi?

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

fonte

2010-11-03 22:23:00 david

+0

Questo è esattamente quello che stavo cercando. L'unico altro necessario per il funzionamento di questo modello è che l'involucro abbia un'altezza minima impostata sull'altezza combinata del pane. Buon lavoro a tutti, non ci avrei pensato. – Amalgovinus

1

Penso che quando il contenuto trabocca da un elemento di altezza fissa, il contenuto in eccesso non influirà sul layout di altri elementi.

Potresti spostare il contenuto dalla fetta superiore del pane e nella carne? Ciò renderà possibile l'espansione.

Se il contenuto deve comparire davanti al top fetta di pane sfondo, allora si potrebbe utilizzare position: relative e un margine inferiore negativo per raggiungere questo:

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

Mi piace questa domanda perché è abbastanza difficile, e perché contiene la frase "div di carne espandibile".

fonte

2010-11-03 22:11:26

+0

Si tratta di un approccio legittimo, ma l'utilizzo dei margini ha a che fare con altri elementi presenti nella pagina. Ho optato invece per mettere il contenuto in un involucro sandwich al di fuori del flusso del sandwich, come nel suggerimento di david. Grazie per l'aiuto, sono contento che ti sia piaciuto il mio div di carne. – Amalgovinus

1

(Se volete codice di esempio che posso venire con lui, ma mi prendo più tempo per rispondere)

Che cosa si può desiderare di fare è inserire il vostro 3 fette in un div, e mettere la vostra " top "contenuto nel nuovo div al posto della fetta superiore. In questo modo l'altezza del tuo nuovo div sarà determinata dal contenuto.

Per le 3 sezioni, posizione assoluta tutte. Metti le fette superiore e inferiore nella parte superiore e inferiore del tuo nuovo div usando top:0 e bottom:0, rispettivamente. Per la fetta di carne media, non dargli un'altezza, ma invece rendi le dichiarazioni top e bottom all'altezza delle sezioni superiore e inferiore. In questo modo, la parte superiore/inferiore della carne sarà sempre mantenuta a X pixel di distanza dalla parte superiore/inferiore del nuovo div, dove X è l'altezza della parte superiore/inferiore.

fonte

2010-11-03 22:22:49 JustcallmeDrago

+0

Sì, è esattamente quello che ho fatto nel codice che ho postato. Fa miracoli. – david

+0

(15 caratteri) o/ – JustcallmeDrago

Problemi correlati

 Problemi correlati