html - Div चौड़ाई 100% शून्य पिक्सेल की निश्चित मात्रा




css height (7)

आप Flexbox लेआउट का उपयोग कर सकते हैं। आपको उस flex: 1 को सेट करने की आवश्यकता है flex: 1 उस तत्व पर जिसमें flex-direction: row and column लिए गतिशील चौड़ाई या ऊंचाई होनी चाहिए flex-direction: row and column क्रमशः flex-direction: row and column

गतिशील चौड़ाई:

एचटीएमएल

<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>
</div>

सीएसएस

.container {
  display: flex;
}
.fixed-width {
  width: 200px; /* Fixed width or flex-basis: 200px */
}
.flexible-width {
  flex: 1; /* Stretch to occupy remaining width i.e. flex-grow: 1 and flex-shrink: 1*/
}

आउटपुट:

.container {
  display: flex;
  width: 100%;
  color: #fff;
  font-family: Roboto;
}
.fixed-width {
  background: #9BCB3C;
  width: 200px; /* Fixed width */
  text-align: center;
}
.flexible-width {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
}
<div class="container">
  <div class="fixed-width">
    1
  </div>
  <div class="flexible-width">
    2
  </div>
  <div class="fixed-width">
    3
  </div>

</div>

गतिशील ऊंचाई:

एचटीएमएल

<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>
</div>

सीएसएस

.container {
  display: flex;
}
.fixed-height {
  height: 200px; /* Fixed height or flex-basis: 200px */
}
.flexible-height {
  flex: 1; /* Stretch to occupy remaining height i.e. flex-grow: 1 and flex-shrink: 1*/
}

आउटपुट:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  color: #fff;
  font-family: Roboto;
}
.fixed-height {
  background: #9BCB3C;
  height: 50px; /* Fixed height or flex-basis: 100px */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.flexible-height {
  background: #88BEF5;
  flex: 1; /* Stretch to occupy remaining width */
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<div class="container">
  <div class="fixed-height">
    1
  </div>
  <div class="flexible-height">
    2
  </div>
  <div class="fixed-height">
    3
  </div>

</div>

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

बीच में क्षेत्र का आकार अलग-अलग होने जा रहा है, लेकिन इसमें सटीक पिक्सेल मान होंगे और पूरी संरचना को उन मानों के अनुसार स्केल करना चाहिए। इसे सरल बनाने के लिए, मुझे "100% - n px" चौड़ाई को शीर्ष-मध्य और निचले-मध्य divs पर सेट करने का एक तरीका चाहिए।

मैं एक स्वच्छ क्रॉस-ब्राउज़र समाधान की सराहना करता हूं, लेकिन यदि यह संभव नहीं है, तो सीएसएस हैक्स करेगा।

यहां एक बोनस है। एक और संरचना जो मैं संघर्ष कर रहा हूं और तालिकाओं या जावास्क्रिप्ट का उपयोग कर समाप्त कर रहा हूं। यह थोड़ा अलग है, लेकिन नई समस्याओं का परिचय देता है। मैं मुख्य रूप से इसे jQuery- आधारित विंडोिंग सिस्टम में उपयोग कर रहा हूं, लेकिन मैं स्क्रिप्ट के लेआउट को बाहर रखना चाहता हूं और केवल एक तत्व (मध्य एक) के आकार को नियंत्रित करना चाहता हूं।


ऐसा करने का सामान्य तरीका गुफा, नेस्टेड तत्वों द्वारा उल्लिखित है। इसके लिए आपको आवश्यक हुक प्राप्त करने के लिए अतिरिक्त मार्कअप जोड़ना थोड़ा दुखद है, लेकिन व्यवहार में यहां एक रैपर div या किसी को चोट पहुंचाने वाला नहीं है।

यदि आपको अतिरिक्त तत्वों के बिना ऐसा करना होगा (उदाहरण के लिए। जब ​​आपके पास पृष्ठ मार्कअप का नियंत्रण नहीं होता है), तो आप box-sizing उपयोग कर सकते हैं, जिसमें बहुत सभ्य है लेकिन पूर्ण या सरल ब्राउज़र समर्थन नहीं है। यद्यपि स्क्रिप्टिंग पर भरोसा करने की अपेक्षा कहीं अधिक मजेदार है।


क्या होगा यदि आपका रैपिंग div 100% था और आपने पिक्सेल राशि के लिए पैडिंग का उपयोग किया था, तो यदि पैडिंग # को गतिशील होने की आवश्यकता है, तो आप आसानी से jQuery का उपयोग अपने पैडिंग राशि को संशोधित करने के लिए कर सकते हैं जब आपकी घटनाएं आग लगती हैं।


जबकि गुफा का जवाब कई परिस्थितियों में काम करता है, कुछ मामलों में आप नहीं चाहते हैं कि पैडिंग के बाएं और / या दाएं टुकड़े केंद्र div के माता-पिता हों। इन मामलों में, आप केंद्र पर ब्लॉक स्वरूपण संदर्भ का उपयोग कर सकते हैं और पैडिंग divs को बाएं और दाएं फ्लोट कर सकते हैं। कोड यहाँ है

एचटीएमएल:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

सीएसएस:

.container {
    width: 100px;
    height: 20px;
}

.left, .right {
    width: 20px;
    height: 100%;
    float: left;
    background: black;   
}

.right {
    float: right;
}

.center {
    overflow: auto;
    height: 100%;
    background: blue;
}

मुझे लगता है कि नेस्टेड नेस्टेड divs की तुलना में यह तत्व पदानुक्रम अधिक प्राकृतिक है, और पृष्ठ पर क्या बेहतर प्रतिनिधित्व करता है। इस वजह से, सीमाओं, पैडिंग और मार्जिन को सभी तत्वों के लिए सामान्य रूप से लागू किया जा सकता है (यानी: यह 'प्राकृतिकता' शैली से परे है और इसमें ramifications है)।

ध्यान दें कि यह केवल divs और अन्य तत्वों पर काम करता है जो 'डिफ़ॉल्ट रूप से चौड़ाई के 100% भरें' संपत्ति साझा करते हैं। इनपुट, टेबल, और संभवतः अन्य लोगों को आपको एक कंटेनर div में लपेटने की आवश्यकता होगी और इस गुणवत्ता को बहाल करने के लिए थोड़ा और सीएसएस जोड़ें। यदि आप उस स्थिति में होने के लिए पर्याप्त भाग्यशाली हैं, तो मुझसे संपर्क करें और मैं सीएसएस खोद दूंगा।

jsfiddle यहाँ: jsfiddle.net/RgdeQ

का आनंद लें!


मेरे पास एक समान मुद्दा था जहां मैं स्क्रीन के शीर्ष पर एक बैनर चाहता था जिसमें बाईं ओर एक छवि थी और स्क्रीन के किनारे दाईं ओर एक दोहराने वाली छवि थी। मैंने इसे हल करने का अंत किया:

सीएसएस:

.banner_left {
position: absolute;
top: 0px;
left: 0px;
width: 131px;
height: 150px;
background-image: url("left_image.jpg");
background-repeat: no-repeat;
}

.banner_right {
position: absolute;
top: 0px;
left: 131px;
right: 0px;
height: 150px;
background-image: url("right_repeating_image.jpg");
background-repeat: repeat-x;
background-position: top left;
}

कुंजी सही टैग था। मैं मूल रूप से निर्दिष्ट कर रहा हूं कि मैं चाहता हूं कि यह 131 पीएक्स से दाएं से 0px तक दाएं से दोहराएं।


हम फ्लेक्स-बॉक्स का उपयोग करके इसे आसानी से प्राप्त कर सकते हैं।

अगर हमारे पास हेडर, मिडलकॉन्टेनर और पाद लेख जैसे तीन तत्व हैं। और हम हेडर और पाद लेख को कुछ निश्चित ऊंचाई देना चाहते हैं। तो हम इस तरह लिख सकते हैं:

रिएक्ट / आरएन के लिए (डिफ़ॉल्ट 'डिस्प्ले' को फ्लेक्स और 'फ्लेक्सडिरेक्शन' कॉलम के रूप में 'डिस्प्ले' होते हैं), वेब सीएसएस में हमें बॉडी कंटेनर या कंटेनर को डिस्प्ले के रूप में निर्दिष्ट करना होगा: 'फ्लेक्स', फ्लेक्स-दिशा: 'कॉलम' नीचे की तरह:

    container-containing-these-elements: {
     display: flex,
     flex-direction: column
    }
    header: {
     height: 40,
    },
    middle-container: {
     flex: 1, // this will take the rest of the space available.
    },
    footer: {
     height: 100,
    }

टूलबार पर बाएं और दाएं किनारे पाने के लिए आप नेस्टेड तत्वों और पैडिंग का उपयोग कर सकते हैं। एक div तत्व की डिफ़ॉल्ट चौड़ाई auto , जिसका अर्थ है कि यह उपलब्ध चौड़ाई का उपयोग करता है। फिर आप तत्व में पैडिंग जोड़ सकते हैं और यह अभी भी उपलब्ध चौड़ाई के भीतर रहता है।

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

एचटीएमएल:

<div class="Header">
   <div>
      <div>This is the dynamic center area</div>
   </div>
</div>

सीएसएस:

.Header {
   background: url(left.gif) no-repeat;
   padding-left: 30px;
}
.Header div {
   background: url(right.gif) top right no-repeat;
   padding-right: 30px;
}
.Header div div {
   background: url(center.gif) repeat-x;
   padding: 0;
   height: 30px;
}




width