यदि मेरे पास 75% चौड़ाई और दो कॉलम के अंदर एक कंटेनर है, बाएं और दाएं, बाएं 10 मीटर चौड़ाई के साथ, मैं शेष 100% शेष स्थान लेने के लिए सही कंटेनर कैसे प्राप्त करूं?मैं बाएं-फ्लोट किए गए div को शेष स्थान का 100% कैसे ले सकता हूं?

मैं कोई भाग्य के साथ इस की कोशिश की:

html, body { 
 
    margin:0; 
 
    padding:0; 
 
    width:100%; 
 
    height:100%; 
 
} 
 
#container { 
 
    position:relative; 
 
    width:75%; 
 
    margin:0 auto; 
 
    background:blue; 
 
} 
 
#left-container { 
 
    position:relative; 
 
    float:left; 
 
    height:100%; 
 
    width:10em; 
 
    background:red; 
 
} 
 
#right-container { 
 
    position:relative; 
 
    float:left; 
 
    height:100%; 
 
    width:100%; 
 
    background:yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

मैं प्रतिशत के साथ आसानी से कर सकते हैं, लेकिन मैं एक निश्चित 10em चौड़ाई होने के लिए छोड़ दिया है की जरूरत है।

स्रोत

2013-05-01 Michael N

आप float: left हटाने, width को दूर करने और को overflow:hidden जोड़कर एक बॉक्स तत्व अंतरिक्ष के शेष तक का समय लग कर सकते हैं सहीdiv

Working example

#right-container { 
    position:relative; 
    overflow: hidden; 
    height:100%; 
    background:yellow; 
}

स्रोत

2013-05-01 01:20:01

का उपयोग कर ओह वाह, कि बहुत आसान से मैंने सोचा कि यह होता था। मैंने कभी इस बारे में सोचा नहीं होगा। धन्यवाद! –

@ माइकल एन आपका स्वागत है, मुझे याद है जब मैंने शुरू किया था और मुझे यह महसूस करने से पहले मुझे * घंटे * लगा। यह एक अच्छी चाल है, इसे मत भूलना :) –

फ़ायरफ़ॉक्स पर यह काम लेकिन क्रोम पर नहीं, भाई। मेरा क्रोम संस्करण 51 है। वैसे भी आपके उत्तर के लिए धन्यवाद, मैं इस समस्या की तलाश कर रहा हूं – Ben

एक अन्य विकल्प डाल करने के लिए है #right-container div पर एक बाएं हाशिए:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 

<style media="all"> 
html, body { 
    margin:0; 
    padding:0; 
    width:100%; 
    height:100%; 
} 
#container { 
    position:relative; 
    width:75%; 
    margin:0 auto; 
    background:blue; 
} 
#left-container { 
    position:relative; 
    float:left; 
    height:100%; 
    width:10em; 
    background:red; 
} 
#right-container { 
    position:relative; 
    margin-left: 11em; 
    height:100%; 
    background:yellow; 
} 
</style> 

</head> 
<body> 

<div id="container"> 
    <div id="left-container"> 
     Left 
    </div> 
    <div id="right-container"> 
     Right 
    </div> 
</div> 

</body> 
</html>

स्रोत

2013-05-01 01:50:06

मैं ऐड-इन के लिए नीचे के रूप में एक और विकल्प चाहते हैं:

#header-left-section { 
    float: left; 
    position: absolute; 
    z-index: 1000; 
} 
#header-right-section { 
    height: 90px; 
    width:100%; 
    position: relative; 
    overflow: hidden; 
} 
#header-right-section ins, 
#header-right-section div{float:right}

छोड़ दिया div बस इसके अंदर सामान के लिए पर्याप्त जगह ले लो। सही हिस्सा 100% चौड़ाई लेता है, और बायां हिस्सा केवल ऊपर रहता है (जेड-इंडेक्स द्वारा)। अंतिम सीएसएस लाइन दाहिनी तरफ दाईं ओर तैरने के लिए आंतरिक सामान बनाने के लिए है।

स्रोत

2016-06-12 03:22:22 Ben

वहाँ CSS3, स्वीकार किए जाते हैं जवाब की तुलना में कहीं अधिक सरल समाधान है, जो एक overflow:hidden

का उपयोग कर "हैक" flexbox का उपयोग कर की तरह है का उपयोग करते हुए इस समय (2016) में इस तरह की समस्या के लिए कम से कम 2 विकल्प हैं

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    background: blue; 
 
    display: flex 
 
} 
 
#left-container { 
 
    height: 100%; 
 
    width: 10em; 
 
    background: red; 
 
} 
 
#right-container { 
 
    height: 100%; 
 
    flex:1; 
 
    background: yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

calc()

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
#container { 
 
    width: 75%; 
 
    margin: 0 auto; 
 
    background: blue; 
 
} 
 
#left-container { 
 
    float: left; 
 
    height: 100%; 
 
    width: 10em; 
 
    background: red; 
 
} 
 
#right-container { 
 
    float: left; 
 
    height: 100%; 
 
    width: calc(100% - 10em); 
 
    background: yellow; 
 
}

<div id="container"> 
 
    <div id="left-container">Left</div> 
 
    <div id="right-container">Right</div> 
 
</div>

स्रोत

2016-06-12 03:37:21 dippas

मैं बाएं-फ्लोट किए गए div को शेष स्थान का 100% कैसे ले सकता हूं?

उत्तर

Working example

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