1. घर
  2. सवाल और जवाब
  3. निश्चित ऊंचाई रोटी टुकड़ा divs के साथ एक "div सैंडविच" और एक विस्तार योग्य मांस div

निश्चित ऊंचाई रोटी टुकड़ा divs के साथ एक "div सैंडविच" और एक विस्तार योग्य मांस div

2010-11-03 17 views
7

बनाना तो मैं एक div सैंडविच की है। पृष्ठभूमि छवियों के कारण रोटी के स्लाइस निश्चित ऊंचाई दोनों हैं। मांस एक 1 पीएक्स लंबा ऊर्ध्वाधर पुनरावर्तक छवि है। मुझे मांस का विस्तार करने का एक तरीका चाहिए जब शीर्ष ब्रेडस्लाइस से अतिप्रवाह सामग्री नीचे ब्रेडस्लाइस के नीचे हिट करती है। मुझे लगता है कि मांस और नीचे की रोटी के लिए एक रैपर आवश्यक होगा, लेकिन मुझे यकीन नहीं है कि इसे कैसे कार्यान्वित किया जाए।निश्चित ऊंचाई रोटी टुकड़ा divs के साथ एक "div सैंडविच" और एक विस्तार योग्य मांस div

यहाँ मैं अब तक राशि है।

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

मुझे शीर्ष रैपर में "स्पष्ट" के खिलाफ शीर्ष सामग्री को हिट करने और रैपर को नीचे ले जाने के लिए एक तरीका चाहिए।

स्रोत

2010-11-03 Amalgovinus

+1

+1 शीर्षक के लिए - मुझे बाहर भी मदद की। "विस्तारणीय मांस div" = डी – Jason

उत्तर

7

इस आशय आप के बाद कर रहे हैं है?

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

स्रोत

2010-11-03 22:23:00 david

+0

यह वही है जो मैं ढूंढ रहा था। इस मॉडल के लिए काम करने के लिए केवल एकमात्र अन्य है, रैपर के लिए ब्रेडस्लाइस की संयुक्त ऊंचाई पर एक न्यूनतम ऊंचाई निर्धारित करने के लिए है। सबको अच्छा काम है, मैंने इस बारे में सोचा नहीं होगा। – Amalgovinus

1

मुझे लगता है कि जब आप एक निश्चित ऊंचाई तत्व बह निकला सामग्री मिल गया है, तो उमड़ती सामग्री अन्य तत्वों के लेआउट को प्रभावित नहीं करेगा।

आप शीर्ष रोटी टुकड़ा से बाहर अपनी सामग्री को स्थानांतरित कर सकते हैं, और मांस में? इससे विस्तार बढ़ेगा।

सामग्री शीर्ष रोटी टुकड़ा पृष्ठभूमि के सामने प्रकट करने के लिए की जरूरत है, तो आप position: relative और एक नकारात्मक निचला हाशिया इस्तेमाल कर सकते हैं प्राप्त करने के लिए है कि:

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

मैं इस सवाल की तरह है क्योंकि यह काफी मुश्किल है, और क्योंकि इसमें "विस्तारणीय मांस div" वाक्यांश शामिल है।

स्रोत

2010-11-03 22:11:26

+0

यह एक वैध दृष्टिकोण है, लेकिन पेज पर मौजूद अन्य वस्तुओं के साथ गड़बड़ मार्जिन का उपयोग। मैंने बदले में सैंडविच प्रवाह के बाहर सैंडविच रैपर में सामग्री डाली, जैसे डेविड के सुझाव में। हालांकि मदद करने के लिए धन्यवाद, मुझे खुशी है कि आपको मेरा मांस div पसंद आया। – Amalgovinus

1

(आप उदाहरण कोड चाहते हैं मैं इसे साथ आने सकता है, लेकिन यह मुझे लंबा समय लग जाएगा जवाब देने के लिए)

आप क्या करना चाहते हो सकता है क्या एक div में अपने 3 स्लाइस जगह है, और डाल अपने " शीर्ष स्लाइस के बजाय नए div में शीर्ष "सामग्री। इस तरह आपकी नई div की ऊंचाई सामग्री द्वारा निर्धारित की जाएगी।

3 स्लाइस के लिए, निरपेक्ष स्थिति उन सभी को। क्रमश: top:0 और bottom:0 का उपयोग करके अपने नए div के ऊपर और नीचे शीर्ष और निचले स्लाइस रखें। मध्यम मांस टुकड़ा के लिए, इसे ऊंचाई न दें, लेकिन इसके बजाय इसे top और bottom घोषणाएं अपने शीर्ष और निचले स्लाइस की ऊंचाई के बराबर घोषित करें। इस तरह, मांस के ऊपर/नीचे हमेशा आपके नए div के शीर्ष/नीचे से एक्स पिक्सल दूर रखा जाएगा, जहां एक्स शीर्ष/नीचे टुकड़ा की ऊंचाई है।

स्रोत

2010-11-03 22:22:49 JustcallmeDrago

+0

हां, यह वही है जो मैंने पोस्ट किए गए कोड में किया था। अद्भुत काम करता है। – david

+0

(15 वर्ण) ओ/ – JustcallmeDrago

संबंधित मुद्दे

 संबंधित मुद्दे