2013-01-02 9 views
6

ओवरलैप को रोकने के लिए मेरे पास दो डिवी तत्व हैं। पहला स्क्रीन की 100% ऊंचाई और चौड़ाई होना चाहिए। मैं चाहता हूं कि दूसरा div 100% चौड़ाई हो लेकिन सामग्री के आधार पर परिवर्तनीय ऊंचाई और इनलाइन शुरू करने के लिए (पहले के नीचे)। तो पूर्ण स्क्रीन Div 1 है और आपको Div 2 देखने के लिए नीचे स्क्रॉल करना होगा। लेकिन मैंने जो भी कोशिश की है, वे ओवरलैप करते हैं। 100%:फोर्स डिव दूसरे के नीचे और

<div style="background-color:red;height:100%;width:100%;left:0px;top:0px"></div> 
<br/> 
<div style="width:100%;position:relative;background-color:yellow"> 
     <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>.. 
</div> 

http://jsfiddle.net/FBJ8h/

उत्तर

9

क्योंकि

position:absolute 

div को गैर-कब्जा कर देता है, जिसका अर्थ यह है कि अन्य तत्व संरेखित और स्थितिबद्ध होने पर उन्हें "देख" नहीं देते हैं।

उपयोग करें:

html,body { 
    height:100%; 
} 
div.div2 { 
    top:100%; 
} 

JSFiddle

1

सबसे पहले आप html- और शरीर टैग ऊंचाई को स्थापित करने के लिए

html, body { 
    height:100%; 
} 

और दूसरी बात, आप बदलना है पहले div की स्थिति को "रिश्तेदार" पर सेट करें और "पूर्ण" नहीं है (जैसा कि यह jsfiddle-file में है):

position: relative; 

मुझे आशा है कि यह मदद करता है ...

संपादित करें: और दो divs के बीच <br> -Tag निकालें - यदि नहीं, उन दोनों के बीच एक सफेद खाई हो जाएगा ...

+0

बहुत बढ़िया बीच निम्न धन्यवाद इस काम करता है – user759885

-1

उपयोग का उपयोग करना चाहिए "clear: both" ... जोड़ने div टैग

<style> 
.clearfix{ 
clear:both; 
} 
</style> 
<body> 
<div class="clearfix"></div> 
<body> 
+0

यह काम नहीं करता समस्या स्थिति है: पूर्ण विशेषता। – FrenkyB