CSS: Percentage minus pixels के रूप में चौड़ाई / ऊँचाई सेट करना

Question

मैं अपनी साइट पर अधिक स्थिरता और कम अव्यवस्था के लिए कुछ पुन: उपयोग करने योग्य सीएसएस कक्षाएं बनाने की कोशिश कर रहा हूं, और मैं एक चीज को मानकीकृत करने की कोशिश कर रहा हूं जिसे मैं अक्सर उपयोग करता हूं।

मेरे पास एक कंटेनर है <div>जिसे मैं ऊंचाई निर्धारित नहीं करना चाहता हूं (क्योंकि यह उस साइट के आधार पर अलग-अलग होगा), और इसके अंदर एक हेडर है <div>, और फिर आइटमों की एक अनियंत्रित सूची , सभी के साथ सीएसएस लागू होता है। उन्हें।

यह इस तरह दिखता है:

मैं चाहता हूँ बिना क्रम वाली सूची कंटेनर में शेष कमरे को लेने के लिए <div>, जानते हुए भी कि शीर्ष लेख <div>है 18pxलंबा। मुझे अभी नहीं पता है कि " 100%माइनस का परिणाम" के रूप में सूची की ऊंचाई कैसे निर्दिष्ट करें 18px।

मैंने SO पर कुछ अन्य संदर्भों में पूछे गए इस प्रश्न को देखा है, लेकिन मुझे लगा कि यह मेरे विशेष मामले के लिए फिर से पूछने के लायक होगा। क्या किसी को इस स्थिति में कोई सलाह है?

Comments

एक मार्जिन सेट करें? __

— kennytm

@ केनीटीएम, मुझे लगता है कि आप सुझाव दे रहे हैं कि मैं अपनी अनऑर्डर की गई सूची में मार्जिन-टॉप डालूँ, 17px। लेकिन यह पूरी सूची को नीचे धकेल देता है; यह कंटेनर में रहने के लिए सिकुड़ने का कारण नहीं है। अनिवार्य रूप से, यह वर्तमान ऊंचाई बनाए रखा जाता है, लेकिन इसे केवल 17px से नीचे धकेल दिया जाता है। यह मेरी समस्या को हल नहीं करता है, लेकिन मुझे लगता है कि यह सही दिशा में एक कदम है क्योंकि मैंने ऑनलाइन अन्य दृष्टिकोणों को देखा है जो इस तकनीक का उपयोग करते हैं।

— मेगामैट

मैंने इस मुद्दे को सिर्फ अपने प्रश्न में हल किया है जिसे मैंने यहां पोस्ट किया है। stackoverflow.com/a/10420387/340947

— स्टीवन लू

CSS

— 200_success

Answer 1

मुझे लगता है कि यह एक पुरानी पोस्ट है, लेकिन यह देखते हुए कि यह सुझाव नहीं दिया गया है कि यह ध्यान देने योग्य है कि यदि आप CSS3 के अनुरूप ब्राउज़रों के लिए लिख रहे हैं, तो आप इसका उपयोग कर सकते हैं calc:

height: calc(100% - 18px);

यह ध्यान देने योग्य है कि वर्तमान में सभी ब्राउज़र मानक CSS3 कैल्क () फ़ंक्शन का समर्थन नहीं करते हैं, इसलिए फ़ंक्शन के ब्राउज़र विशिष्ट संस्करणों को लागू करना निम्न की तरह आवश्यक हो सकता है:

/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);

Comments

हाँ यह समय के लिए सामान्य है।

— लेवी मोटेलो

IE10 में मेरे लिए काम करता है, और Chrome 27. आप श्रीमान, मेरे प्रिय नायक हैं!

— BrainSlugs83

@LeviBotelho मेरा बुरा। ऑपरेटर के आसपास जगह नहीं थी।

— उपयोगकर्ता

इसके अलावा अगर आप कम उपयोग करते हैं तो आप बेहतर तरीके से एक फ़ाइल संकलित कर सकते हैं lessc --strict-math=onताकि कम से कम अभिव्यक्ति का मूल्यांकन न किया जा सके calc- बस एक समस्या जिसका मैंने सामना किया और बहुत कम समय (2.0.0 से कम) के रूप में बिताया

— दिमित्री वोज्शिकोव्स्की

ध्यान दें कि ऋण चिह्न के साथ स्पेस वैकल्पिक नहीं हैं: 100%-18px, 100%- 18px, और 100% -18pxब्राउज़रों मैं के साथ परीक्षण में काम नहीं किया।

— nisetama

Answer 2

कुछ अलग दृष्टिकोण के लिए आप सूची में कुछ इस तरह का उपयोग कर सकते हैं:

position: absolute;
top: 18px;
bottom: 0px;
width: 100%;

यह तब तक काम करता है जब तक कि मूल कंटेनर है position: relative;

Comments

धन्यवाद दोस्त। माता-पिता कंटेनर position: relative;मुझे ट्रिपिंग कर रहे थे।

— gthmb

उन लोगों के लिए जो मेरी तरह आश्चर्यचकित हो सकते हैं: स्थिति को absoluteबाल कंटेनर में होना चाहिए , यह नहीं हो सकता है relative।

— ग्रेग

जारी (खेद): हालाँकि माता-पिता को केवल स्थिति की आवश्यकता होती है (यह absoluteभी हो सकता है), और इसे 100% ऊंचाई पर भी सेट करने की आवश्यकता है।

— ग्रेग

दुर्भाग्य से, यह सफारी आईओएस 8 पर काम नहीं करता है (एंड्रॉइड 4.1 स्टॉक ब्राउज़र और मानक एफएफ 34 पर परीक्षण किया गया ठीक है) :-(

— ग्रेग

यह कुछ मामलों में काम कर सकता है, लेकिन कुछ परेशानियों का कारण भी हो सकता है, क्योंकि बिल्कुल तैनात तत्व सामान्य प्रवाह से हटा दिए जाते हैं, देखें stackoverflow.com/a/12821537/4173303 ।

— क्रिस्टोफ़ वीस

Answer 3

मैं इसके लिए Jquery का उपयोग करता हूं

function setSizes() {
   var containerHeight = $("#listContainer").height();
   $("#myList").height(containerHeight - 18);
}

उसके बाद मैं विंडो को फिर से आकार देने के लिए विंडो के आकार में फेरबदल करता हूं (यदि कंटेनर का आकार खिड़की के आकार के साथ बदल जाए)

$(window).resize(function() { setSizes(); });

Comments

@puffpio, निश्चित रूप से JS केस के आधार पर इसे पूरा करने का एक तरीका है। लेकिन जैसा कि मैंने कहा, मैं सीएसएस को सामान्य बनाने की कोशिश कर रहा हूं, जिसे कई पृष्ठों पर लागू किया जा सकता है (जो कि एक मास्टर पृष्ठ से प्राप्त होता है, संयोग से)। इसलिए मैं JS का उपयोग नहीं करना पसंद करूंगा। लेकिन जवाब के लिए धन्यवाद।

— मेगामैट

जावास्क्रिप्ट के अंदर अपनी शैली मत डालो।

— ग्रेग

@ अच्छी तरह से, अगर सीएसएस में कुछ और उपयोगी विशेषताएं होती तो यह मदद करता। आपके लिए हैक करने के लिए कुछ चीजें हास्यास्पद हैं।

— जोनाथन।

@puffpio अच्छा समाधान वास्तव में। लेकिन खिड़की पर घटनाओं को बांधना मेरे लिए अच्छा समाधान नहीं है। यदि मेरे पृष्ठ में 3-4 या अधिक ऐसे तत्व हैं, तो मुझे विंडो आकार बदलने वाले हैंडलर में प्रत्येक तत्व की ऊंचाई और चौड़ाई को अपडेट करना होगा। यह सीएसएस समाधान की तुलना में थोड़ा धीमा होगा।

— sachinjain024

"जावास्क्रिप्ट के अंदर अपना xyz मत डालो" यह कहने जैसा है कि "ब्राउज़र बाज़ार के 80% का समर्थन नहीं करते"।

— Beejor

Answer 4

एक प्रतिशत के रूप में ऊंचाई को परिभाषित नहीं है, बस सेट top=0और bottom=0इस तरह,:

#div {
   top: 0; bottom: 0;
   position: absolute;
   width: 100%;
}

Comments

क्या आप बता सकते हैं कि एक प्रतिशत तक ऊंचाई क्यों नहीं तय की गई?

— श्रीकांत शरत

@ श्रीकांतशर्त यह दृश्य स्वरूपण युक्ति का हिस्सा है, जो पूर्णतया तैनात तत्वों के लिए है। यह समाधान संभावना 5 का लाभ लेता है, "'ऊंचाई' 'ऑटो' है, 'टॉप' और 'बॉटम' 'ऑटो' नहीं है, फिर 'मार्जिन-टॉप' और 'मार्जिन-बॉटम' के लिए 'ऑटो' मान सेट हैं। 0 करने के लिए और 'ऊंचाई' के लिए हल। ब्राउज़र तत्व की ऊंचाई की गणना कर सकता है क्योंकि यह जानता है कि उसके माता-पिता के ऊपर और नीचे से कितना दूर होना चाहिए।

— रॉस एलन

यह कम से कम फ़ायरफ़ॉक्स में काम नहीं करता है। यहां तक कि सभी माता पिता तत्व करने के लिए सेट के साथ height:100%और display:block। अन्यथा यह एक बहुत ही सुंदर समाधान होगा। दिलचस्प है, margin:autoयह भी एक निश्चित-चौड़ाई की वस्तु को लंबवत रूप से केंद्र में रखने में विफल रहता है, भले ही यह क्षैतिज रूप से ठीक काम करता हो।

— बेजरोर

Answer 5

प्रकल्पित 17px हैडर की ऊंचाई

सूची सीएसएस:

height: 100%;
padding-top: 17px;

हेडर सीएसएस:

height: 17px;
float: left;
width: 100%;

Comments

हाँ, यह वही है जो मुझे मिल रहा था।

— dclowd9901

यह काफी काम नहीं किया और साथ ही मुझे उम्मीद थी। उस हेडर div के नीचे मेरी unordered लिस्ट शुरू हो रही है। हेडर डिव कंटेनर में जगह ले रहा है, इसलिए सूची में 17px का पैडिंग-टॉप डाल रहा है, बस इसे 17px नीचे धकेलने जा रहा है, जहां यह पहले से ही ऊपर की तस्वीर में है, कंटेनर डिव के शीर्ष से 17px नहीं। यहां ऊपर दिए गए जवाब में दिए गए CSS के साथ मुझे क्या मिला, इसकी एक तस्वीर है: i41.tinypic.com/mcuk1x.jpg । मैं इस प्रयास की सराहना करता हूं, हालांकि, और अगर आपको लगता है कि मुझे कुछ याद आ रहा है, तो कृपया मुझे बताएं। Btw, मेरे पास अतिप्रवाह है: असमान सूची पर भी ऑटो।

— मेगामैट

यदि आप वास्तविक सीएसएस पोस्ट करते हैं तो यह बहुत आसान समस्या निवारण होगा ताकि हम देख सकें कि वास्तव में क्या बातचीत चल रही है। एक और चीज जो आप आजमा सकते हैं, वह है आपके ऊपरी हिस्से में नकारात्मक टॉप मार्जिन। ul { margin-top: -17px; }

— गप्पे

Answer 6

1. उस तत्व पर नकारात्मक मार्जिन का उपयोग करें जिसे आप माइनस पिक्सल से दूर करना चाहते हैं। (वांछित तत्व)
2. overflow:hidden;युक्त तत्व पर बनाएं
3. overflow:auto;वांछित तत्व पर स्विच करें ।

यह मेरे लिए काम किया!

Comments

यह मेरे लिए एक आकर्षण की तरह काम करता था (मुझे अतिप्रवाह को बदलने की भी आवश्यकता नहीं थी)। महान समाधान, धन्यवाद!

— आज

अत्यन्त अद्भुत! लोकप्रिय "सीएसएस कैल्क" समाधान के बारे में जानने का आनंद लिया, लेकिन यह बहुत सरल है और इसमें व्यापक ब्राउज़र समर्थन है। सही में नकारात्मक मार्जिन!

— साइमन स्टाइनबर्गर

यह एक बहुत ही सुरुचिपूर्ण और संगत समाधान है। मुख्य नकारात्मक पक्ष यह है कि तत्व एक निश्चित ऊंचाई होना चाहिए। अन्यथा आपको JS का उपयोग calc()करने या इसे रनटाइम पर केंद्रित करने की आवश्यकता होगी । लेकिन कई मामलों के लिए यह एक मुद्दा नहीं होना चाहिए। ध्यान रखने वाली एक और बात यह है कि बाद में कोड डीबग करते समय मार्जिन, पैडिंग और ऑफसेट के लिए बहुत सारे नकारात्मक मूल्यों का उपयोग करना भ्रम पैदा कर सकता है, इसलिए चीजों को सरल रखने की कोशिश करें।

— Beejor

Answer 7

बॉक्स-आकार का प्रयास करें। सूची के लिए:

height: 100%;
/* Presuming 10px header height */
padding-top: 10px;
/* Firefox */
-moz-box-sizing: border-box;
/* WebKit */
-webkit-box-sizing: border-box;
/* Standard */
box-sizing: border-box;

हेडर के लिए:

position: absolute;
left: 0;
top: 0;
height: 10px;

बेशक, मूल कंटेनर में कुछ ऐसा होना चाहिए:

position: relative;

Answer 8

उसी लक्ष्य को प्राप्त करने का दूसरा तरीका: फ्लेक्स बॉक्स । कंटेनर को एक कॉलम फ्लेक्स बॉक्स बनाएं, और फिर आपको सभी तत्वों को तय-आकार (डिफ़ॉल्ट व्यवहार) या कंटेनर स्पेस (फ्लेक्स-ग्रो: 1 और फ्लेक्स-) के साथ भरने / सिकुड़ने-डाउन करने की अनुमति देने की स्वतंत्रता है। हटना: 1)।

#wrap {        
  display:flex;
  flex-direction:column;
}
.extendOrShrink {
  flex-shrink:1;
  flex-grow:1;
  overflow:auto;
}

Https://jsfiddle.net/2Lmodwxk/ देखें (प्रभाव को नोटिस करने के लिए विंडो को बढ़ाने या कम करने का प्रयास करें)

नोट: आप आशुलिपि संपत्ति का उपयोग भी कर सकते हैं:

   flex:1 1 auto;

Comments

मेरा मानना ​​है कि यह आज का सबसे अच्छा जवाब हो सकता है क्योंकि इसका मतलब है हेडर डिव (18 मूल में मेरे मूल प्रश्न) के लिए एक सेट ऊंचाई निर्दिष्ट करने के लिए नहीं है, और इसका मतलब है कि पैडिंग और मार्जिन जैसी चीजों को घटाना नहीं है। कोई सेट पिक्सेल नहीं है, और सब कुछ खुद का ख्याल रखता है।

— मेगामैट

Answer 9

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

नीचे मैंने एक बहुत ही सरल स्निपेट बनाया है जो दिखाता है कि हमने जो किया वह करना हमारी स्थिति के लिए अच्छा काम करता है और इसे अधिकांश ब्राउज़रों के अनुकूल होना चाहिए।

हमारे विंडो एलिमेंट पर हमने एक 20px मार्जिन जोड़ा है जो स्क्रीन पर अन्य एलिमेंट्स के सापेक्ष पोजिशनिंग में योगदान देता है, लेकिन विंडो के "आकार" में योगदान नहीं करता है। विंडो-हेडर तब पूरी तरह से स्थित होता है (जो इसे अन्य तत्वों के प्रवाह से हटा देता है, इसलिए यह अन्य तत्वों को स्थानांतरित करने के लिए अव्यवस्थित सूची जैसे कारण नहीं देगा) और इसका शीर्ष -20px स्थित है जो हेडर को मार्जिन के अंदर रखता है खिड़की का। अंत में हमारे उल तत्व को विंडो में जोड़ा जाता है, और ऊंचाई को 100% तक सेट किया जा सकता है, जो इसे खिड़की के शरीर (मार्जिन को छोड़कर) को भरने का कारण होगा।

*,*:before,*:after
{
  box-sizing: border-box;
}

.window
{
  position: relative;
  top: 20px;
  left: 50px;
  margin-top: 20px;
  width: 150px;
  height: 150px;
}

.window-header
{
  position: absolute;
  top: -20px;
  height: 20px;
  border: 2px solid black;
  width: 100%;
}

ul
{
  border: 5px dashed gray;
  height: 100%;
}

<div class="window">
  <div class="window-header">Hey this is a header</div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>
</div>

Answer 10

धन्यवाद, मैंने आपकी मदद से मेरा हल निकाला, इसे थोड़ा मोड़ दिया क्योंकि मैं 100% चौड़ाई वाला 100% हीगेट (नीचे की पट्टी की कम ऊंचाई) चाहता हूं और शरीर पर कोई स्क्रॉल नहीं करता (बिना हैक / छुपाये बार स्क्रॉल करना)।

सीएसएस के लिए:

 html{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 body{
  position:relative;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }
 div.adjusted{
  position:absolute;width:auto;height:auto;left:0px;right:0px;top:0px;bottom:36px;margin:0px;border:0px;padding:0px;
 }
 div.the_bottom_bar{
  width:100%;height:31px;margin:0px;border:0px;padding:0px;
}

HTML के लिए:

<body>
<div class="adjusted">
 // My elements that go on dynamic size area
 <div class="the_bottom_bar">
  // My elements that goes on bottom bar (fixed heigh of 31 pixels)
 </div>  
</div>  

यह चाल है, ओह, हाँ, मैं नीचे बार ऊंचाई के लिए की तुलना में नीचे के लिए div.adjusted पर एक बहुत कम मूल्य डाल दिया, और ऊर्ध्वाधर स्क्रॉलबार प्रकट होता है, मैं निकटतम मूल्य होने के लिए समायोजित।

यह अंतर इसलिए है क्योंकि डायनेमिक क्षेत्र के तत्वों में से एक अतिरिक्त बॉटम होल जोड़ रहा है जो मुझे पता नहीं है कि कैसे छुटकारा पाएं ... यह एक वीडियो टैग (एचटीएमएल 5) है, कृपया ध्यान दें कि मैंने इस सीएसएस के साथ वीडियो टैग लगा दिया है ( इसलिए इसके नीचे छेद बनाने का कोई कारण नहीं है, लेकिन यह करता है):

 video{
  width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

ऑब्जेक्टिव: एक वीडियो है जो 100% ब्राउजर लेता है (और ब्राउज़र के आकार बदलने पर गतिशील रूप से आकार बदलता है, लेकिन पहलू अनुपात में बदलाव किए बिना) एक निचला स्थान कम होता है जिसका उपयोग मैं कुछ पाठों, बटन, आदि (और सत्यापनकर्ताओं) के साथ करता हूं। w3c और पाठ्यक्रम का सीएसएस)।

संपादित करें: मैंने कारण पाया, वीडियो टैग पाठ की तरह है, एक ब्लॉक तत्व नहीं है, इसलिए मैंने इसे इस सीएसएस के साथ तय किया:

 video{
  display:block;width:100%;height:100%;margin:0px;border:0px;padding:0px;
 }

display:block;वीडियो टैग पर ध्यान दें ।

Answer 11

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