Sabit yükseklikteki ekmek dilimi ve genişletilebilir bir et bölmesi olan "div sandwich" oluşturma

Bu yüzden div sandviçim var: birbiri üstüne üç div. Ekmek dilimleri, arka plan görüntüleri nedeniyle sabit yüksekliktedir. Et 1px boyunda dikey tekrarlayıcı görüntüsüdür. Üst breadslice'dan gelen taşma içeriği alt breadslice'ın tabanına ulaştığında eti genişletmenin bir yoluna ihtiyacım var. Et ve alt ekmek için bir sarıcı gerekli olacağını düşündüm, ama nasıl uygulanacağından emin değilim.Sabit yükseklikteki ekmek dilimi ve genişletilebilir bir et bölmesi olan "div sandwich" oluşturma

Şimdiye dek sahip olduğum şeyler.

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

ben alt ambalajında "net" karşı tavanın içerik hit yapmak ve aşağı sarıcı taşımak için bir yol gerekir.

kaynak

2010-11-03 Amalgovinus

1 - beni de yardımcı oldu. "Genişletilebilir Meat Div" = D – Jason

Bu, şu anki etkiniz mi?

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

Ben daima bu örneği takip

kaynak

2010-11-03 22:23:00 david

Bu tam olarak aradığım şey. Bu modelin çalışması için ihtiyaç duyulan tek şey, sargının, ekmeklerin kombine yüksekliğine ayarlanan bir min-yüksekliğe sahip olmasıdır. İyi iş herkese, bunu düşünmezdim. – Amalgovinus

Sabit bir yükseklik öğesinden taşan içeriğe sahip olduğunuzda, taşan içeriğin diğer öğelerin düzenini etkilemeyeceğini düşünüyorum.

İçeriğinizi üst ekmek dilimi ve etin içine taşıyabilir misiniz? Bu genişlemenin gerçekleşmesini sağlayacaktır.

içerik üst ekmek dilim arka planın önünde görünmesi gerekir, o zaman bunu başarmak için position: relative ve negatif alt kenar kullanabilirsiniz: bu oldukça zor çünkü

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

Bu soruyu ister ve çünkü “genişleyebilir et div” ifadesini içerir.

kaynak

2010-11-03 22:11:26

Bu yasal bir yaklaşımdır, ancak marjların kullanımı sayfada sahip olduğum diğer öğelerle karıştırılır. Bunun yerine, David'in önerisinde olduğu gibi, içeriği sandviç akışının dışındaki bir sandviç ambalajına koymayı tercih ettim. Yardım ettiğin için teşekkürler, et tabağımı sevdiğine sevindim. – Amalgovinus

(eğer örnek kod istiyorsanız onunla gelebilir, ama bu cevap beni daha uzun süre alacağım) Eğer yapmak isteyebilirsiniz ne

bir div içinde 3 dilimleri yerleştirin ve koyun senin " Üstteki "içeriği" en üst dilim yerine yeni div. Bu sayede yeni divunuzun yüksekliği içerik tarafından belirlenir.

3 dilim için tümünü mutlak konumlandırın. Üst ve alt dilimlerini sırasıyla top:0 ve bottom:0 kullanarak yeni divunuzun üst ve alt kısmına yerleştirin. Orta et dilimi için bir yükseklik vermeyin, bunun yerine üst ve alt dilimlerinizin yüksekliğine eşit olan top ve bottom bildirimlerini yapın. Bu şekilde, etin üst/alt kısmı her zaman X'in üstteki/alt diliminin yüksekliğinden, yeni divunuzun üst/alt kısmından X piksel uzakta tutulacaktır.

kaynak

2010-11-03 22:22:49 JustcallmeDrago

Evet, tam olarak gönderdiğim kodda yaptım. Harikalar yaratır. – david

(15 karakter) o/ – JustcallmeDrago

: Başlık için http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

kaynak

2011-02-16 13:13:18 Mordi

Sabit yükseklikteki ekmek dilimi ve genişletilebilir bir et bölmesi olan "div sandwich" oluşturma

cevap

İlgili konular