माता-पिता को भरने के लिए div ऊँचाई कैसे बढ़ाएँ

107

मेरे पास नीचे की तरह divs के साथ एक पृष्ठ है

<div id="container">
    <div id="A">
    </div>
    <div id="B">
        <div id="B1"></div>
        <div id="B2">B2</div>
    </div>
    <div id="C"></div>
    <div id="D">
    </div>
</div>

स्टाइल के साथ;

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    margin-top: -35px;
    bottom: 0;
    background-color: #FFFFFF;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

मैं B2पूरे डिव B(हरे रंग की सीमा के साथ चिह्नित ) को भरने के लिए (या खिंचाव के लिए) डिव की ऊंचाई को समायोजित करना चाहता हूं और फुटर डी को पार नहीं करना चाहता हूं। यहां एक वर्किंग फिडल डेमो (अद्यतन) है। इसे कैसे हल किया जा सकता है??

css

— अल्फ्रेड
स्रोत

38

बस स्टाइल height: 100%;पर जोड़ें #B2। min-heightजरूरी नहीं होना चाहिए।

— Snorbuckle
स्रोत

4

यह होगा, अगर अंतर खाली है।

— x10

39

खराब उत्तर # बी 2 # के रूप में लंबा होगा लेकिन शेष स्थान को भरने के लिए खिंचाव नहीं होगा जैसा कि पूछा गया

— घोंसला

3

यह एक अलग के साथ एक div के लिए काम नहीं करता है floatतो यह माता पिता है?

— डॉन चीडल

यह B1 को कवर करता है और सभी जगह लेता है; /

— mikus

1

यह स्पष्ट रूप से काम नहीं करता है, ऊंचाई: 100% कंटेनर का 100% है (मुझे लगता है कि सबसे अधिक बार पूरे व्यूपोर्ट) - इसकी ऊंचाई वांछित से अधिक होगी।

— बीटी

25

मान लो तुम्हारे पास है

<body>
  <div id="root" />
</body>

सामान्य सीएसएस के साथ, आप निम्न कार्य कर सकते हैं। एक कार्यशील एप्लिकेशन https://github.com/onmyway133/Lric/blob/master/index.html देखें

#root {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

Flexbox के साथ, आप कर सकते हैं

html, body {
  height: 100%
}
body {
  display: flex;
  align-items: stretch;
}

#root {
  width: 100%
}

— onmyway133
स्रोत

10

http://jsfiddle.net/QWDxr/1/

"न्यूनतम ऊंचाई" संपत्ति का उपयोग करें
पैडिंग, मार्जिन और सीमाओं से सावधान रहें :)

html, body {
    margin: 0;
    padding: 0;
    border: 0;
}
#B, #C, #D {
    position: absolute;
}
#A{
    top: 0;
    width: 100%;
    height: 35px;
    background-color: #99CC00;
}
#B {
    top: 35px;
    width: 200px;
    bottom: 35px;
    background-color: #999999;
    z-index:100;
}
#B2 {
    min-height: 100%;
    height: 100%;
    margin-top: -35px;
    bottom: 0;
    background-color: red;
    width: 200px;
    overflow: scroll;
}
#B1 {
    height: 35px;
    width: 35px;
    margin-left: 200px;
    background-color: #CC0066;
}
#C {
    top: 35px;
    left: 200px;
    right: 0;
    bottom: 35px;
    background-color: #CCCCCC;
}
#D {
    bottom: 0;
    width: 100%;
    height: 35px;
    background-color: #3399FF;
}

— x10
स्रोत

1

नहीं .. यह एक शीर्ष मार्जिन के साथ पूरे पृष्ठ को भरता है। मैं सिर्फ विशिष्ट divB

— अल्फ्रेड

यह क्रोम और फायरफॉक्स में सही तरीके से काम करता है। यदि यह आपके लिए काम नहीं करता है, तो आप

— x10

यह काम करता है, लेकिन यह पाद को काट रहा है div id= D। मैं यह नहीं चाहता कि इसे डी

— अल्फ्रेड

2

height:100%#B2शैली के लिए एक अर्धविराम याद कर रहा है।

— एमिल

5

एक तलाक बनाने के लिए मेरा उद्देश्य क्या अनुकूल था जो हमेशा एक निश्चित राशि से समग्र ब्राउज़र विंडो के भीतर बंधा था।

क्या काम किया, कम से कम फ़ायरफ़ॉक्स पर, यह था

<div style="position: absolute; top: 127px; left: 75px;right: 75px; bottom: 50px;">

वास्तविक विंडो को स्क्रॉल करने के लिए मजबूर नहीं किया जाता है, div सभी पुन: आकार देने के दौरान विंडो किनारे पर अपनी सीमाओं को सुरक्षित रखता है।

आशा है कि यह किसी को कुछ समय बचाता है।

— लियो स्मिथ
स्रोत

5

यदि आप स्टाइल प्रयोजनों के लिए B2 का उपयोग करने जा रहे हैं, तो आप इसे "हैक" आज़मा सकते हैं

#B { overflow: hidden;}
#B2 {padding-bottom: 9999px; margin-bottom: -9999px}

jsFiddle

— Teneff
स्रोत

1

यह काम करता है, धन्यवाद। वैसे, यह होना चाहिए margin-bottom: -9999px;। आप माइनस को याद कर रहे हैं।

— गौई

1

बी 2 कंटेनर स्थिति सापेक्ष

शेष ऊंचाई की शीर्ष स्थिति बी 2 +

बी 2 + ऊंचाई बी 1 या शेष ऊंचाई की ऊंचाई

— Dmytro Yurchenko
स्रोत

माता-पिता नोड को स्थिति के सापेक्ष सेट करने से मेरी असंबंधित समस्या हल हो गई! धन्यवाद!

— दीजर्स

0

मैं उपयोग करता हूं height: stretch;। यहां आप उपयोग के बारे में कुछ विवरण पा सकते हैं।

— इहोर
स्रोत

-4

यदि आकार भिन्न हो सकते हैं तो मैं इसे एक जावास्क्रिप्ट समाधान (jQUery) के साथ हल करूँगा।

window.setTimeout(function () {
    $(document).ready(function () {
        var ResizeTarget = $('#B');

        ResizeTarget.resize(function () {
            var target = $('#B2');
            target.css('height', ResizeTarget.height());
        }).trigger('resize');
    }); 
}, 500);

— NKCSS
स्रोत

8

आप इसे अपने प्रश्न में जोड़ना चाह सकते हैं :)

— NKCSS

48

एक javascriptया एक jqueryटैग की अनुपस्थिति पर्याप्त नहीं है?

— कापा

1

यह भी पूरी तरह अनावश्यक है। पिछले कुछ वर्षों में सीएसएस ने एक लंबा सफर तय किया है। चेकआउट फ्लेक्स-बॉक्स और कैल्क ()।

— शॉन व्हेनरी

1

Flexbox का समर्थन नहीं करता है <IE10 :(

— लगातार मेकिंग

@ConstantMeiring असली सवाल है, क्या किसी को भी <IE10 के बारे में परवाह है? ;)

— क्लोन्सेक्स

माता-पिता को भरने के लिए div ऊँचाई कैसे बढ़ाएँ - CSS