शेष चौड़ाई को भरने के लिए div का विस्तार करें

Question

मैं एक दो-स्तंभ div लेआउट चाहता हूं, जहां हर एक के पास चर की चौड़ाई हो सकती है जैसे

div {
  float: left;
}

.second {
  background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

मैं चाहता हूं कि 'ट्री' डिव में आवश्यक स्थान भर जाने के बाद 'व्यू' डिविजन का विस्तार पूरी चौड़ाई में उपलब्ध हो।

वर्तमान में, मेरे 'व्यू' डिव को कंटेंट में बदल दिया गया है, इसमें यह भी अच्छा होगा अगर दोनों डिविज़ पूरी ऊँचाई तक ले जाएँ।

---

डुप्लिकेट अस्वीकरण नहीं:

• फ़्लोट होने पर div को अधिकतम चौड़ाई में विस्तारित करें: बाईं ओर सेट किया गया है क्योंकि वहाँ बाईं ओर एक निश्चित चौड़ाई है।
• Div की मदद करें - div को शेष चौड़ाई के हिसाब से फिट करें क्योंकि मुझे दो कॉलमों की आवश्यकता है जो बाईं ओर संरेखित हैं

Comments

संबंधित stackoverflow.com/a/22719552/759452

— Adrien Be

या तो मुझे सवाल समझ में नहीं आता या मैं यह नहीं समझता कि आप स्वीकृत उत्तर को कैसे चुनते हैं, क्योंकि वहाँ दोनों चौड़ाई और ऊंचाइयों को असुविधा के साथ तय किया गया हैoverflow hidden

— user10089632

Answer 1

इस का हल वास्तव में बहुत आसान है, लेकिन कम से नहीं सब स्पष्ट। आपको एक "ब्लॉक फॉर्मेटिंग संदर्भ" (बीएफसी) नामक कुछ ट्रिगर करना होगा, जो एक विशिष्ट तरीके से फ्लोट्स के साथ इंटरैक्ट करता है।

बस उस दूसरी दिवा को ले लो, फ्लोट को हटा दें, और इसके overflow:hiddenबजाय इसे दें । दृश्यमान के अलावा कोई भी अतिप्रवाह मूल्य उस ब्लॉक को बनाता है जो एक BFC बन जाता है। BFC उनके वंशज को तैरने से बचने की अनुमति नहीं देते हैं, और न ही वे उनके लिए घुसपैठ करने के लिए भाई / पूर्वज की तैरने की अनुमति देते हैं। यहां शुद्ध प्रभाव यह है कि फ्लोटेड डिव अपनी बात करेगा, तो दूसरा डिव एक साधारण ब्लॉक होगा, जिसमें फ्लोट द्वारा कब्जा किए गए को छोड़कर सभी उपलब्ध चौड़ाई होगी ।

यह सभी वर्तमान ब्राउज़रों में काम करना चाहिए, हालांकि आपको IE6 में हैशआउट को ट्रिगर करना पड़ सकता है और 7. मैं याद नहीं कर सकता।

डेमो:

• फिक्स्ड लेफ्ट: http://jsfiddle.net/A8zLY/5/
• नियत अधिकार: http://jsfiddle.net/A8zLY/2/

Comments

बहुत बढ़िया जवाब! लेकिन आप गलत हैं जब आप कहते हैं "ऑटो के अलावा कोई भी अतिप्रवाह मूल्य" यह एक BFC बना देगा। आपके मतलब के डिफ़ॉल्ट (दृश्यमान) के अलावा कोई भी अतिप्रवाह मूल्य है जो इसे BFC बना देगा। वास्तव में, ओवरफ्लो ऑटो पूरी तरह से भी काम करता है - यानी जो मैं सुझाऊंगा (बस अगर आपके पास अपेक्षाकृत तैनात तत्व हैं जो उस div से बाहर निकल सकते हैं)।

— बीटी

इस लेख की अच्छी व्याख्या है: colinaarts.com/articles/the-magic-of-overflow-hidden

— Max Cantor

क्या होगा यदि सामग्री div को ओवरफ्लो करने के लिए पर्याप्त बड़ी है?

— जियानिस क्रिस्टोफिस

यह ध्यान रखना महत्वपूर्ण है, कि बच्चों का क्रम मायने रखता है। निश्चित चौड़ाई वाले फ्लोटिंग तत्व को दूसरे के ऊपर होना चाहिए। मुझे यह पता लगाने में बहुत समय लगा कि यह मेरे लिए स्विचड ऑर्डर के साथ काम क्यों नहीं करता।

— रिप्लेक्सस

मैंने यह बताते हुए एक उत्तर लिखा कि डेविड और बोरिस द्वारा दी गई प्रतिक्रियाओं के आधार पर सभी चीजों का एक गैर-दृश्य अतिप्रवाह बीएफसी को ट्रिगर क्यों करता है, जो यहां पाया जा सकता है: stackoverflow.com/questions/9943503/… क्या मेरी व्याख्या सही थी?

— BoltClock

Answer 2

मैंने फ्लेक्स बॉक्स (प्रदर्शन: फ्लेक्स) का जादू खोजा है। इसे इस्तेमाल करे:

<style>
  #box {
    display: flex;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

फ्लेक्स बॉक्स मुझे वह नियंत्रण देते हैं जो मैंने चाहा है कि सीएसएस 15 वर्षों के लिए था। अंत में यहाँ! अधिक जानकारी: https://css-tricks.com/snippets/css/a-guide-to-flexxbox/

Comments

मुझे नहीं पता कि आपने क्या खोजा है, लेकिन आपका कोड नवीनतम Chrome jsfiddle.net/fjb548kw/3

— येवगेनी अफानसेयेव

@YevgeniyAfanasyev मैंने "फ्लोट: लेफ्ट;" समस्या को ठीक करने के लिए। नोट के लिए धन्यवाद!

— बीटी

धन्यवाद। क्या आप बता सकते हैं कि आपके पास flex-grow: 100;इसके बजाय क्यों है flex-grow: 1;?

— येवगेनी अफानसेयेव

@YevgeniyAfanasyev कोई विशेष कारण नहीं है सिवाय इसके कि मैं इसे कैसे करना पसंद करता हूं। यह मुझे पेरेन्ट्स में सोचने की अनुमति देता है, अगर मैं सेट # ए की तरह कुछ कर सकता हूं flex-grow:10और फिर मैं # बी को सेट करूंगा flex-grow: 90तो # ए लाइन की चौड़ाई का 10% होगा और # बी लाइन की चौड़ाई का 90% होगा। यदि किसी अन्य तत्व की फ्लेक्स चौड़ाई शैली नहीं है, तो यह तकनीकी रूप से मायने नहीं रखता है कि आपने क्या रखा है।

— बीटी

इसने मेरे लिए सबसे अच्छा काम किया, एक इनपुट और बटन को साइड में रखने की कोशिश की जैसे कि वे एक हैं।

— सोलस्टेस्ट

Answer 3

फ्लेक्सबॉक्स समाधान

यह वह flex-growसंपत्ति है जिसके लिए है।

html, body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}

<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>

नोट: यदि आपके समर्थित ब्राउज़रों द्वारा आवश्यक हो तो फ्लेक्स विक्रेता उपसर्ग जोड़ें ।

Answer 4

यह सीएसएस के साथ करने के लिए तालिकाओं और कठिन (यदि असंभव नहीं है, तो कम से कम एक क्रॉस-ब्राउज़र अर्थ में) करने के लिए तुच्छ चीज़ का एक अच्छा उदाहरण होगा।

यदि दोनों कॉलम निश्चित चौड़ाई के होते, तो यह आसान होता।

यदि स्तंभों में से एक को चौड़ाई निर्धारित की गई थी, तो यह थोड़ा कठिन होगा लेकिन पूरी तरह से संभव होगा।

दोनों कॉलम चर चौड़ाई के साथ, IMHO आपको बस दो-स्तंभ तालिका का उपयोग करने की आवश्यकता है।

Comments

तालिका एक उत्तरदायी डिज़ाइन में बहुत अच्छी नहीं होगी, जहाँ आप चाहते हैं कि दाहिने हाथ का कॉलम छोटे उपकरणों पर बाईं ओर स्लाइड करें।

— एस ..

टेबल्स के साथ काम करने के लिए कुछ उत्तरदायी डिज़ाइन ट्रिक्स हैं: css-tricks.com/responsive-data-tables

— रिक्की

अब मैं अक्सर दो अलग-अलग लेआउट पूरी तरह से डिज़ाइन करता हूं और मीडिया क्वेश्चन का उपयोग करके मोबाइल पर बदलता हूं और display:none;स्लाइडिंग स्केल पर जितना संभव हो उतना 100% उत्तरदायी बनाता हूं। कभी-कभी टच स्क्रीन फील के मोबाइल मेकिंग के लिए अपने डिजाइन को पूरी तरह से बदलना अच्छा होता है। और बटन शैली।

— Bysander

Answer 5

इस समाधान की जाँच करें

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}

<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>

Comments

यह आम तौर पर एक बेहतर समाधान है क्योंकि अतिप्रवाह को छिपाना हमेशा वांछित नहीं होता है।

— जोसेफ लेनॉक्स

प्रति ओपी: "मुझे एक दो-कॉलम डिव लेआउट चाहिए, जहां हर एक में चर चौड़ाई हो सकती है"। आपके उत्तर में, आपको पहले कॉलम की चौड़ाई को जानना होगा, इसलिए यह परिवर्तनशील नहीं है। आप दोनों स्तंभों पर निश्चित चौड़ाई निर्धारित कर सकते हैं और उन्हें तैर सकते हैं।

— जैकब अल्वारेज़

Answer 6

उपयोग calc :

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}

<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

इसके साथ समस्या यह है कि सभी चौड़ाई को स्पष्ट रूप से परिभाषित किया जाना चाहिए, या तो मान के रूप में (पीएक्स और एम काम ठीक), या स्पष्ट रूप से परिभाषित कुछ प्रतिशत के रूप में।

Answer 7

यहाँ, यह मदद कर सकता है ...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>

Comments

+1 क्योंकि आपका उदाहरण काम करने का लगता है, लेकिन मेरे वास्तविक परिदृश्य में कुछ 'कैसे' दृश्य से सामग्री 'पेड़' में विभाजित है, क्योंकि पेड़ का विभाजन 100% नहीं है, हो सकता है कि कुछ जावास्क्रिप्ट इसे छोटे होने के लिए मजबूर कर दे और पेड़ की ऊंचाई के बाद मैं सामग्री देखता हूं

— अनुराग उनियाल

उस स्थिति में, यदि आप बाएं कॉलम की अधिकतम-चौड़ाई जानते हैं, तो आप इसे एक शैली अधिकतम-चौड़ाई (IE में काम नहीं करता है) या मार्जिन-लेफ्ट के बारे में सोच सकते हैं (IE पर डबल-मार्जिन बग से सावधान रहें) या गद्दी छूट गई।

— a6hi5h3k

यह बहुत अच्छा था! मैं इसे एक-बंद समाधान के रूप में इन-लाइन उपयोग कर रहा हूं:<div class="clear" style="clear: both; height: 1px; overflow: hidden; font-size:0pt; margin-top: -1px;"></div>

— ajwest

Answer 8

मुझे समझ में नहीं आता है कि लोग साधारण स्तंभ स्तंभों के लिए एक शुद्ध-सीएसएस समाधान खोजने के लिए इतनी मेहनत करने के लिए तैयार क्यों हैं जो पुराने TABLEटैग का उपयोग करके SO EASY हैं ।

सभी ब्राउज़रों के पास अभी भी टेबल लेआउट लॉजिक है ... मुझे शायद एक डायनासोर कहें, लेकिन मैं कहता हूं कि इसे आपकी मदद करने दें।

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

क्रॉस-ब्राउज़र संगतता के मामले में बहुत कम जोखिम भरा है।

Comments

हाँ, लेकिन अगर सब कुछ सीएसएस द्वारा किया जा रहा है तो ऐसा क्यों नहीं है, कम से कम एक जिज्ञासा है अगर यह कमजोर है?

— अनुराग उनियाल

ऐसा इसलिए है क्योंकि यदि आप media-queriesदोनों स्तंभों को छोटे उपकरणों में एक दूसरे के ऊपर रखना चाहते हैं , तो पुराने tableटैग के साथ यह असंभव है । यह काम करने के लिए, आपको CSSटेबल शैलियों को लागू करने की आवश्यकता है । तो, आजकल के लिए इसे हल करना बेहतर है CSSयदि आप किसी भी स्क्रीन आकार के लिए उत्तरदायी लेआउट चाहते हैं।

— ElhhiniNet

Answer 9

यदि दूसरे कॉलम की चौड़ाई तय की जाती है, तो कैसे उपयोग करना है calc सभी सामान्य ब्राउज़रों के लिए काम CSS फ़ंक्शन :

width: calc(100% - 20px) /* 20px being the first column's width */

इस तरह दूसरी पंक्ति की चौड़ाई की गणना की जाएगी (यानी शेष चौड़ाई) और जिम्मेदारी से लागू की जाएगी।

Comments

यह फ्लेक्सबॉक्स के अलावा और कुछ का उपयोग करने का सबसे अच्छा जवाब है, उदाहरण के लिए, जैसे css-grid। यह भी काम करता है position: fixedजिसके साथ यह चारों ओर सही विकल्प बनाता है! धन्यवाद!

— बार्टेकस

Answer 10

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
  </div>

</body>

</html>

Comments

मैं बाईं ओर निश्चित वस्तुओं के साथ एक स्थिति पट्टी की तरह कुछ चाहता हूं, दाईं ओर निश्चित आइटम और एक संदेश पंक्ति जो बाईं ओर के सभी का उपयोग करता है। मैंने इस उत्तर के साथ शुरुआत की और अपने संदेश को फ़्लोट के साथ जोड़ा: ऊँचाई: 20 पीएक्स; श्वेत-स्थान: Nowrap; छिपा हुआ सैलाब; पाठ-अतिप्रवाह: क्लिप

— englebart

Answer 11

आप सीएसएस ग्रिड लेआउट की कोशिश कर सकते हैं ।

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}

<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

Answer 12

फ्लेक्स-ग्रो - यह एक फ्लेक्स आइटम के लिए आवश्यक होने पर बढ़ने की क्षमता को परिभाषित करता है। यह एक इकाई रहित मान को स्वीकार करता है जो एक अनुपात के रूप में कार्य करता है। यह तय करता है कि फ्लेक्स कंटेनर के अंदर उपलब्ध जगह की मात्रा कितनी होनी चाहिए।

यदि सभी वस्तुओं में फ्लेक्स-ग्रो 1 पर सेट है, तो कंटेनर में शेष स्थान सभी बच्चों को समान रूप से वितरित किया जाएगा। यदि बच्चों में से किसी का मूल्य 2 है, तो शेष स्थान दूसरों की तुलना में दोगुना स्थान लेगा (या यह कम से कम करने की कोशिश करेगा)। यहाँ और देखें

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}

<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

Answer 13

थोड़ा अलग कार्यान्वयन,

दो डिव पैनल (सामग्री + अतिरिक्त), अगल-बगल, content panelयदि फैलता हैextra panel मौजूद नहीं है है।

jsfiddle: http://jsfiddle.net/qLTMf/1722/

Answer 14

पैट - आप सही हैं। इसलिए यह समाधान दोनों "डायनासोर" और समकालीनों को संतुष्ट करेगा। :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}

<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

Comments

सीएसएस वर्ग .ip का कोई html संदर्भ नहीं है और यह IE7 में काम नहीं करता है

— कीथ के

Answer 15

आप W3 की CSS लाइब्रेरी का उपयोग कर सकते हैं जिसमें एक वर्ग शामिल restहै जो कि बस ऐसा करता है:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

पृष्ठ के सीएसएस पुस्तकालय को लिंक करना न भूलें header:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

यहाँ आधिकारिक डेमो है: W3 स्कूल ट्रायट एडिटर

Comments

ऐसा लगता है कि बस "अतिप्रवाह: छिपा हुआ" जोड़ता है, जो इसे पहले से दिए गए उत्तर का एक बदतर संस्करण बनाता है

— vpzomtrrfrt

Answer 16

मुझे यकीन नहीं है कि अगर यह जवाब है जो आप उम्मीद कर रहे हैं, लेकिन आप ट्री की चौड़ाई को 'ऑटो' और 'व्यू' की चौड़ाई को 100% क्यों नहीं सेट करते हैं?

Comments

क्योंकि यह दूसरी नाव को पहले से नीचे रख देगा क्योंकि यह बहुत चौड़ी है।

— क्लेटस

Answer 17

उपलब्ध सीएसएस लेआउट फ्रेमवर्क पर एक नज़र डालें। मैं सरल या, थोड़ा और अधिक जटिल, खाका रूपरेखा की सिफारिश करूंगा ।

यदि आप सरल (जिसमें केवल एक simple.css फ़ाइल आयात करना शामिल है ) का उपयोग कर रहे हैं , तो आप यह कर सकते हैं:

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

, 50-50 लेआउट के लिए, या:

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

, 25-75 के लिए।

यह इत्ना आसान है।

Comments

क्या दोनों कॉलम वैरिएबल चौड़ाई के होंगे?

— अनुराग उनियाल

Answer 18

Simple.css के प्लग के लिए धन्यवाद!

अपने सभी कॉलम को इस ColumnWrapperतरह से लपेटना याद रखें ।

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

मैं Simple.css के संस्करण 1.0 को रिलीज करने वाला हूं ताकि शब्द को फैलाने में मदद मिले!

Answer 19

मैंने एक जावास्क्रिप्ट फ़ंक्शन लिखा है जिसे मैं jQuery $ (दस्तावेज़) से कॉल करता हूं। पहले से ही ()। यह माता-पिता के सभी बच्चों को तलाक देगा और केवल सही बच्चे को अपडेट करेगा।

एचटीएमएल

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

जावास्क्रिप्ट

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}

Answer 20

यह फ्लेक्सबॉक्स का उपयोग करना काफी आसान है। नीचे स्निपेट देखें। मैंने प्रवाह को नियंत्रित करने और वैश्विक ऊंचाई निर्धारित करने के लिए एक आवरण कंटेनर जोड़ा है। तत्वों की पहचान करने के लिए सीमाओं को जोड़ा गया है। ध्यान दें कि divs अब आवश्यकतानुसार पूरी ऊंचाई तक फैली हुई है। विक्रेता उपसर्गों को फ्लेक्सबॉक्स के लिए एक वास्तविक विश्व परिदृश्य में उपयोग किया जाना चाहिए क्योंकि अभी तक पूरी तरह से समर्थित नहीं है।

मैंने फ्लेक्सबॉक्स का उपयोग करके लेआउट को समझने और डिजाइन करने के लिए एक मुफ्त टूल विकसित किया है। इसे यहाँ देखें : http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}

<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

Comments

क्या आपने अपने जोड़ने से पहले पिछले सभी उत्तर पढ़े थे? यह नहीं लगता है ...

— Temani Afif

एक साइड नोट के रूप में, आपको जोड़ने की आवश्यकता नहीं है stretchक्योंकि यह डिफ़ॉल्ट मान है और बाल तत्व फ्लेक्स कंटेनर बनाने की आवश्यकता नहीं है इसलिए display:flexआंतरिक तत्वों के लिए बेकार है

— Temani Afif

मुझे आश्चर्य है कि नीचे, बिना किसी टिप्पणी के क्यों। क्या यह जवाब सवाल का जवाब नहीं है? क्यों? अगर दूसरों की मदद करने की कोशिश की जाती है, तो मैं अपने अगले जवाब से पहले दो बार

— सोचूंगा

आप दो टिप्पणी नीचे के बाद मिला है, यह पर्याप्त नहीं है?

— तैमनी अफिफ

टेमरी, क्या आपने मेरे उपकरण की जांच की? क्या आपको नहीं लगता कि उपयोगी है और दूसरों की मदद कर सकता है? क्या आपको लगता है कि प्रश्न से संबंधित नहीं है? आपके इस सवाल का जवाब कहां है? मैं इसे देख नहीं सकता। यहां आपकी क्या भूमिका है?

— मारियो वेज्केज

Answer 21

यदि दोनों चौड़ाई चर लंबाई हैं तो आप कुछ स्क्रिप्टिंग या सर्वर साइड के साथ चौड़ाई की गणना क्यों नहीं करते हैं?

<div style="width: <=% getTreeWidth() %>">Tree</div>

<div style="width: <=% getViewWidth() %>">View</div>

Comments

सर्वर को कैसे पता चलेगा कि क्लाइंट का लेआउट इंजन कैसे काम करेगा?

— केव

सरल: इसे 90% ब्राउज़रों के लिए विकसित करें :) IE 7+, FF3 + और Safari समर्थन CSS 3। आप मानक IE6 <! - [अगर lte IE 6]> तत्व भी शामिल कर सकते हैं। वैसे, क्या ब्राउज़र शैली का समर्थन नहीं करता है = "चौड़ाई:%" ??

— amischiefr

मुझे नहीं पता कि यह सर्वर साइड कैसे किया जा सकता है, लेकिन हाँ कुछ जावास्क्रिप्ट यह कर सकता है लेकिन मैं इससे बचना चाहता हूं जब तक कि css / html यह नहीं कर सकता है

— अनुराग उनियाल

जो यह नहीं कर सकता। इसलिए, यदि आप चाहते हैं कि दोनों गतिशील हों तो आपको इसे स्क्रिप्ट या सर्वर साइड में करना होगा।

— amischiefr