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

Question

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

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

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

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

Comments

दूसरे तत्व के लिए, आप कह रहे हैं कि आप चाहते हैं कि बहुत मध्य तत्व की ऊंचाई तय हो, लेकिन आस-पास के अन्य तत्व गतिशील हो सकते हैं

— केसबश

Answer 1

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

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

HTML:

<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;
}

Comments

उसके लिए धन्यवाद। मुझे अपनी स्थिति के लिए इसे थोड़ा मोड़ना पड़ा। पहले नेस्टेड डिव को पैडिंग के बजाय मार्जिन-राइट की जरूरत थी और सेंटर डिव को भी उसी राइट मार्जिन की जरूरत थी।

— मैक्स

महान समाधान। बस थोड़ी सी बात -> यह काम करता है क्योंकि ".Header div div" overrides ".Header div" । इसके बजाय ".Header> div" और ".Header> div> div" होना चाहिए। वास्तव में, ".हेडर डिव" का अर्थ किसी भी दिव्यांग बच्चे या उप- दिव्यांग बच्चे से है, जबकि "। हैडर> डिव" का अर्थ है, प्रत्यक्ष बच्चे। हैडर

— चार्ल्स हेइटर

@CharlesHETIER: हाँ, यह भी काम करता है, और उपयोग करने के लिए आसान है क्योंकि आपको कम विशिष्ट नियम की सभी सेटिंग्स को पार करने की आवश्यकता नहीं है। उत्तर तब लिखा गया जब >ऑपरेटर के लिए समर्थन अभी भी विश्वसनीय होने के लिए पर्याप्त नहीं था।

— गुफ़ा

यह पुराना है, सीएसएस पर कैल्क फ़ंक्शन के बारे में नीचे दिए गए उत्तर देखें।

— मारिया एरियस डे रेयना डोमिनगेज

@delawen: आउटडेटेड होने से पहले आपको कुछ समय इंतजार करना होगा। calcIE 8 या Anroid Browser या Opera के वर्तमान संस्करणों के लिए कोई समर्थन नहीं है । caniuse.com/#search=calc

— Guffa

Answer 2

नया तरीका जो मैंने अभी-अभी ठोकर खाया है: csscalc() :

.calculated-width {
    width: -webkit-calc(100% - 100px);
    width:    -moz-calc(100% - 100px);
    width:         calc(100% - 100px);
}​

स्रोत: css चौड़ाई 100% माइनस 100px

Comments

2013 IMHO में सबसे अच्छा जवाब। स्वीकृत उत्तर पुराना है।

— डेन्यूबियन सेलर

यह समय है जब कोई इस पर ठोकर खाई है। मुझे अब हैक के साथ किया जाता है जो मुझे पता है। +1 @lechlukasz

— prophkumpii

सीएसएस के 10 साल के संघर्ष के बाद यह जवाब +20000 का हकदार है! फिर भी मेरी आँखों पर विश्वास नहीं कर सकता ...

— skobaljic

मैं बस इतना ही कह सकता हूं ... youtube.com/…

— जैज

अधिक संगत? -> $ (> # आपका ’’)। सीएसएस (, चौड़ाई ’, '100%’)। सीएसएस (- चौड़ाई ’,’ - = 100px ’); (jQuery)

— sboy031

Answer 3

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

HTML:

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

jsfiddle यहाँ: jsfiddle.net/RgdeQ

का आनंद लें!

Answer 4

आप Flexbox लेआउट का उपयोग कर सकते हैं । आपको flex: 1उस तत्व पर सेट करने की आवश्यकता है जिसके लिए 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>

Answer 5

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

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

Answer 6

शायद मैं गूंगा हो रहा हूं, लेकिन यहां स्पष्ट समाधान नहीं है?

<div class="parent">
    <div class="fixed">
    <div class="stretchToFit">
</div>

.parent{ display: table; width 100%; }
.fixed { display: table-cell; width: 150px; }
.stretchToFit{ display: table-cell; vertical-align: top}

एक और तरीका है कि मैं क्रोम में लगा है और भी आसान है, लेकिन आदमी यह एक हैक है!

.fixed{ 
   float: left
}
.stretchToFit{
   display: table-cell;
   width: 1%;
}

यह अकेले तालिका के बाकी हिस्सों को क्षैतिज रूप से भरना चाहिए, जैसा कि टेबल-सेल करते हैं। हालाँकि, आपको इसके विचित्र 100% से अधिक अभिभावकों के साथ कुछ विचित्र मुद्दे मिलते हैं, फिर भी चौड़ाई को एक प्रतिशत मान पर निर्धारित करते हुए इसे ठीक कर देते हैं।

Answer 7

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

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

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

    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,
    }

Answer 8

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

Answer 9

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

सीएसएस:

.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;
}

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

Answer 10

कुछ संदर्भों में, आप "100% चौड़ाई माइनस एन पिक्सल" को प्रभावी ढंग से निर्दिष्ट करने के लिए मार्जिन सेटिंग्स का लाभ उठा सकते हैं। इस प्रश्न का स्वीकृत उत्तर देखें ।