स्थिति: रिश्तेदार एक खाली जगह छोड़ देता है

Question

कोड यहाँ है: http://lasers.org.ru/vs/example.html

मुख्य ब्लॉक (# पेज) के तहत खाली स्थान कैसे निकालें?

Comments

आप नीचे गद्दी का मतलब है, या पूरी बात खड़ी केंद्रित है?

— एलेक्स

क्या आपका मतलब है #page div और बॉर्डर में टेक्स्ट के बीच की जगह? अन्यथा मुझे यकीन नहीं है कि आप किस स्थान के बारे में बात कर रहे हैं।

— जेरेमी बैटल

@ जेरेमी लड़ाई मैं यह पता नहीं लगा सकता, हालांकि गुफ़ा को लगता है ।

— एलेक्स

इस समस्या को और कोई नहीं देख रहा है?

— मायल्स ग्रे

कृपया उत्तर देखें, जिसका उल्लेख [ stackoverflow.com/questions/13722095/… [1] पर किया गया है: stackoverflow.com/questions/13722095/…

— सोहेल पठान

Answer 1

फिर, सापेक्ष स्थिति का उपयोग न करें। तत्व अभी भी जगह लेता है जहां यह मूल रूप से सापेक्ष स्थिति का उपयोग करते समय था, और आप इससे छुटकारा नहीं पा सकते हैं। आप उदाहरण के लिए इसके बजाय पूर्ण स्थिति का उपयोग कर सकते हैं, या तत्वों को एक-दूसरे के बगल में फ्लोट कर सकते हैं।

मैंने लेआउट के साथ थोड़ा सा खेला, और मेरा सुझाव है कि आप इन तीन नियमों को बदल सकते हैं:

#layout { width: 636px; margin: 0 auto; }
#menu { position: absolute; width: 160px; margin-left: 160px; }
#page { width: 600px; padding: 8px 16px; border: 2px solid #404241; }

Comments

"और आप इससे छुटकारा नहीं पा सकते।" - आप ऐसा कर सकते हैं। बस नकारात्मक मार्जिन का उपयोग करें, जैसे कि प्लांग के उत्तर में।

— मीकल कश्मीर

@ मिशेल: नहीं, इसका मतलब केवल यह है कि आप खाली जगह को किसी अन्य तत्व के साथ ओवरलैप करते हैं, न कि आप खाली जगह से छुटकारा पाते हैं। आप केवल तत्व के आकार के साथ सापेक्ष स्थिति से खाली स्थान को ओवरलैप करने के लिए नकारात्मक मार्जिन का उपयोग कर सकते हैं।

— गुफ़ा

@ मिशेल: इस जवाब को नकारना और अन्य पूरी तरह से असंबंधित जवाब मदद नहीं करता है, आप अभी भी सापेक्ष स्थिति के कारण अंतरिक्ष से छुटकारा नहीं पा सकते हैं।

— गुफ़ा

@ मिशेल: जैसा कि आप केवल अंतरिक्ष को कवर कर सकते हैं और इससे छुटकारा नहीं पा सकते हैं, आपके पास अन्य तत्व हैं जो इसे कवर करने के लिए खाली स्थान जितना बड़ा है। यदि आप उदाहरण के लिए एक तत्व से खाली जगह है जो 200px उच्च है, और केवल एक तत्व है जो छेद को कवर करने के लिए 100px ऊँचाई है, तो आपके पास अभी भी 100px छेद शेष रहेगा।

— गुफा

क्यों होता है पतन? यदि आप यह नहीं समझाते हैं कि ऐसा क्या है जो आपको लगता है कि यह गलत है, तो इससे उत्तर में सुधार नहीं हो सकता है।

— गुफ़ा

Answer 2

एक और चाल जो मेरे लिए ठीक काम करती है, वह है आपके द्वारा स्थानांतरित किए गए सापेक्ष तत्व में एक नकारात्मक मार्जिन-तल का उपयोग करना। निरपेक्ष स्थिति के साथ जाने की जरूरत नहीं है।

कुछ इस तरह:

position: relative;
left: 100px
top: -200px;
margin-bottom: -200px;

इसी तरह (यदि समान नहीं है) मैं अब हरे रंग से देखता हूं।

Comments

एक महान, सरल जवाब। और सही प्रमाण है कि HTML / CSS एक फ्रीकश है।

— सियासियो

@plang, काम करने के लिए प्रतीत नहीं होता है। Jsfiddle.net/u7sq8rL7/1 देखें । हरे रंग की पृष्ठभूमि अंतिम तत्व से परे फैली हुई है।

— पेसियर

@ स्पेसर मार्जिन-बॉटम का उपयोग नहीं करते हैं। यह स्पष्ट रूप से काम नहीं करता है (इसके बारे में सोचो); आपको मार्जिन-टॉप चाहिए।

— विलियम

यह पूरी तरह से काम करता है। और हां आप margin-bottomएक माइनस नंबर के साथ उपयोग करते हैं क्योंकि आप नीचे के अतिरिक्त स्थान से छुटकारा चाहते हैं।

— फॉक्स

अच्छा है, अगर आपका लेआउट अच्छी सेहत में है तो यह ठीक काम करेगा

— विटाली टेरिएव

Answer 3

#page 
{ 
     overflow:hidden; 
}

Answer 4

इस नियम का प्रयास करें:

#page {
  border: 2px solid #404241;
  bottom: 0;
  padding: 8px 16px;
  position: absolute;
  top: 70px;
  width: 600px;
}

मैंने स्थिति को निरपेक्ष में बदल दिया, इससे आप bottom: 0संपत्ति का उपयोग कर सकते हैं।

Answer 5

#page {
  padding-bottom: 0;
}

Comments

यह सही उत्तर है, लेकिन मैं कहूंगा कि आप शायद पैडिंग के साथ बेहतर हैं क्योंकि यह पढ़ना आसान है और वेब पर कुछ पैडिंग के लिए अधिक मानक है।

— जेरेमी बैटल

@ जेरेमी लड़ाई निश्चित रूप से, गद्दी ज्यादा बेहतर लगती है।

— एलेक्स

@Kir आप वास्तव में अपनी वर्तमान शैली को पैडिंग में संशोधित कर सकते हैं: 8px 16px 0px; अपने सीएसएस में एक अतिरिक्त लाइन होने से बचने के लिए।

— जेरेमी बैटल

मेरा मानना ​​है कि यह कंटेंट कंटेनर के नीचे 300 पीएक्स की जगह है जो समस्या है, न कि कंटेनर के अंदर की जगह ...

— गुफ्फा

परिदृश्य div (#page) के अंदर एक अनाम बॉक्स बनाएगा और CSS विनिर्देशन के अनुसार अनाम बॉक्स को सीधे नियंत्रित करने का कोई अन्य तरीका नहीं है और यह अनाम बॉक्स अपने माता-पिता (इस मामले में # पृष्ठ) से संपत्ति का वारिस करेगा। तो @alex का कहना है कि अपनी संपत्ति को बदलकर पैरेंट डिव को बदलना बेहतर होगा। यदि उपरोक्त मानदंडों को पूरा नहीं करता है, तो नकारात्मक मार्जिन का उपयोग करना भी इस परिदृश्य में एक समाधान है।

— काटा

Answer 6

मुझे भी ऐसी ही समस्या का समाधान करना पड़ा था। सबसे आसान तरीका है पर शीर्ष को बदलने के लिए है margin-topके लिए #page।

Comments

नकारात्मक मूल्य के साथ मार्जिन-टॉप, टॉप-मार्जिन-बॉटम के बजाय, जाने का रास्ता है

— xtian

Answer 7

मेरी भी यही समस्या थी। नकारात्मक मार्जिन मेरे लिए काम नहीं करता था क्योंकि यह एक विशाल सफेद क्षेत्र को छोड़ देता था जहां यह हुआ करता था। मैंने अपने मामले में इस समस्या को मैन्युअल रूप से ऊंचाई दर्ज करके हल किया।

.maincontent {
    height: 675px;
}

Answer 8

मेरा उत्तर देर से आता है, लेकिन यह एक समान मुद्दे के साथ दूसरों की मदद कर सकता है जो मेरे पास था।

मैं एक था <div>के साथ position: relative;जहां सभी बच्चे तत्व position: absolute;शैली। इससे मेरे पृष्ठ पर लगभग 20px श्वेत स्थान दिखाई दिया।

इसके आसपास margin-top: -20px;जाने के लिए मैंने अगले सिबलिंग तत्व के <div>साथ जोड़ा position: relative;।

यदि आपके पास पहले एक भाई तत्व है, तो आप उपयोग कर सकते हैं margin-bottom: -20px;

section {
  height: 200px;
}

<h2>Extra Whitespace</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-top</h2>
<section>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div style="margin-top:-20px;">
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>


<h2>No Whitespace margin-bottom</h2>
<section>
  <div style="margin-bottom:-20px;">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  </div>
  <div style="position:relative;">
    <div style="position:relative; top: -20px; left:100px;">ABSOLUTE</div>
  </div>
  <div>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</section>

Answer 9

मैं निम्नलिखित रूपरेखा का उपयोग करके व्हाट्सएप से छुटकारा पाने में सक्षम था:

और यहाँ मार्कअप है

<div id="the-force-moved-element>I've been moved</div>
<div id="the-hack-part-1">
    <div id="the-hack-part-2>The quick brown fox jumps over the lazy dog</div>
</div>
<p>Lorem ipsum dolor sit amet...</p>

Answer 10

इस सवाल का अच्छी तरह से उत्तर दिया गया लगता है - हालांकि ऊपर दिए गए सभी उत्तरों का मेरे लेआउट में बुरा प्रभाव पड़ा। यह वही है जो वास्तव में मेरे लिए काम करता है:

.moveUp {
    position: relative;
}
.moveUp > * {
    position: absolute;
    width: 100%;
    top: -75px;
}

/** This part is just design - ignore it ... ****/
.box1, .box2, .box3 {
    height: 100px;
    color: white;
}
.box1 {
    background: red;
}
.box2 {
    background: blue;
    height: 50px;
}
.box3 {
    background: green;
}

<div class="box1">Box 1</div>
<div class="moveUp"><div class="box2">Box 2 - 75px up</div></div>
<div class="box3">Box 3</div>

Answer 11

सबसे अच्छा समाधान यदि आप रिक्त स्थान नहीं छोड़ना चाहते हैं (रिश्तेदार)

मार्जिन-टॉप और स्थिति का उपयोग करना है: चिपचिपा

#page {
     margin-top: -280px;
     position: sticky;
}