1 सवाल: मेरे तत्व को स्क्रीन की चौड़ाई का 100% कैसे लें, भले ही वह उस तत्व के अंदर हो जो 80% स्क्रीन लेता है?

पर बनाया गया सवाल Wed, May 8, 2019 12:00 AM

मैं एक ReactJS परियोजना पर काम कर रहा हूं और मैं एक सीएसएस समस्या का सामना कर रहा हूं। मैं वास्तव में समझाऊंगा कि मैं क्या हासिल करना चाहता हूं और मैंने अब तक क्या किया है।

मेरा द्रवकंटेनर ग्रे पृष्ठभूमि के साथ div है।

यहां अब मेरे पास है:

 यहां छवि विवरण दर्ज करें

और यहाँ मैं क्या हासिल करना चाहता हूं, मैं चाहता हूं कि वह स्थान समाप्त हो जाए:

 यहां छवि विवरण दर्ज करें

मैंने नकारात्मक मार्जिन का उपयोग किया और अपने द्रव-कंटेनर को बड़ा किया, लेकिन यह मेरे लिए बुरा कोड है, इसलिए यहां मेरी प्रतिक्रिया घटक है:

const FluidContainer = props => (
    <div
       className="co-fluid-container"
   >
        {props.children}
    </div>
);

और यहाँ मेरी sass फ़ाइल है और जो मैंने पहले ही कोशिश की है:

@import "../../appConstants/style/cssVariables.scss";
.co-fluid-container {

//TODO: améliorer la précision
margin: 0 ( calc( (#{$container-width} + (#{$grid-gutter}/2) - 99vw) /2) );
padding: 40px (calc((100vw - #{$container-width} - (#{$grid-gutter}/2))/2));

&--fluid-content {
   padding: 40px 20px;
}

@media($extra-small){
  // a justifier
  width:calc(100vw + #{$grid-gutter}*5);
  margin-left: calc(-#{$grid-gutter}*3/2);
}
@media($small) {
  // a justifier
  width: calc(100vw + #{$grid-gutter}*5);
  margin: 0 calc(-#{$grid-gutter}*3);
  padding: 40px calc(#{$grid-gutter}*3);
}

@media($medium){
  width:calc(110vw);
  margin-left: calc(-#{$grid-gutter}*3/2);
  padding: 40px calc(#{$grid-gutter}*3);
}

@media($large){
  margin: 0 ( calc( (#{$container-width} + (#{$grid-gutter}/2) - 100vw) /2));
  padding: 40px (calc((100vw - #{$container-width} - (#{$grid-gutter}/2))/2));

}
}

इस कोड से मुझे समस्या हो रही है, जब मैं अपने पृष्ठ को उत्तरदायी बनाने का प्रयास करता हूं, तो यहां वे चर हैं जो मैंने अपने कोड में उपयोग किए हैं:

grid-gutter : 32 px;
container: 1170px;
extra-small: "max-width: 599px"
medium and large and small are breakpoints too .. 

यहां एक समाधान है जो मैंने भी आजमाया है, सापेक्ष और पूर्ण स्थिति का उपयोग कर रहा है, लेकिन फिर भी एक समस्या है, इसलिए मैंने अपने गाया तत्व को इस में बदल दिया है:

const FluidContainer = props => (
    <div className="co-fluid-conteneur">
        <div className="co-fluid-container">{props.children}</div>
    </div>
);

और वह मेरी शैली है:

.co-fluid-conteneur {
    position: relative;
    height: 300px;
}

.co-fluid-container {
    position: absolute;
    width: 100vw;
}

लेकिन वे परिणाम हैं:

 यहां छवि विवरण दर्ज करें किसी भी मदद की बहुत सराहना की जाएगी।

    
2
  1. पूर्ण स्थिति ...?
    2019-05-08 14: 33: 23Z
  2. आप अपने पुराने प्रश्न को हटा चुके हैं और इसे //> पोस्ट करें
    2019-05-08 14: 36: 06Z
  3. @ Vencovsky और बताएं?
    2019-05-08 14: 39: 58Z
  4. यदि आप कोई तत्व सेट करते हैं स्थिति स्थिति के लिए गुण: निरपेक्ष; यह अपनी स्थिति को पहले मूल तत्व के सापेक्ष सेट करेगा जिसमें सीएसएस के सापेक्ष स्थिति होगी। हालाँकि आप तब बिना बाधा के जो भी चाहें उसकी चौड़ाई निर्धारित कर सकेंगे।
    2019-05-08 14: 45: 32Z
  5. हां, मैं समझता हूं कि, लेकिन अपनी div को बाईं ओर ले जाने के बारे में, मुझे अभी भी मार्जिन या बाएं गुणों के लिए नकारात्मक मानों का उपयोग करना होगा? नहीं?
    2019-05-08 14: 53: 01Z
    1 उत्तर                              1                         

    त्वरित उदाहरण के लिए:

    मुख्य HTML फ़ाइल या तत्व के लिए कोड लें:

    <div className="parent">
      <div className="child">
      </div>
    </div>
    

    सीएसएस इस तरह दिखता है:

    .parent {
       position: relative;
       width: 50vw;
       height: 50vh;
       background-color: blue;
    }
    
    .child {
       position: absolute;
       width: 100vw;
       height: 40vh;
       background-color: rgba(255, 0, 0, 0.50);
    }
    

    यह निम्नलिखित लेआउट का उत्पादन करेगा। (vw व्यूपोर्ट चौड़ाई का एक माप है, इसलिए 50vw व्यूपोर्ट चौड़ाई का 50% है)।

     लेआउट का उदाहरण

        
    1
    2019-05-08 14: 54: 06Z
    1. मेरे अपडेट की जांच करें, मुझे लगता है कि मैंने आपके समाधान की कोशिश की, गलत होने पर मुझे सही करें
      2019-05-08 15: 07: 47Z
    2. कोड देखे बिना या सभी css को देखे बिना मैं पूरी तरह से निश्चित नहीं हो सकता। हालाँकि, मैं यह देखना चाहूंगा कि "सह-द्रव-संदूषण" या तो बाईं ओर एक मार्जिन है या उस तत्व के माता-पिता के पास मार्जिन या पैडिंग है। एलिमेंट ट्री का बैकअप लें और देखें कि क्या कुछ और मार्जिन या पैडिंग है या नहीं, मैं आपको सटीक काम नहीं दे सकता, क्योंकि मुझे नहीं पता कि आपका कोड स्ट्रक्चर और सीएसएस विशिष्ट है।
      2019-05-09 09: 45: 31Z
    3. हां, एक अभिभावक है, जिसके बाईं ओर एक मार्जिन और पैडिंग है, (दोनों), मैं जो देख रहा था वह कुछ ऐसा है जिसे किया जा सकता है और मूल कोड को अनदेखा कर सकता है .. क्या यह संभव है?
      2019-05-09 14: 02: 45Z
    4. यदि आप चाइल्ड एलिमेंट की लेफ्ट प्रॉपर्टी को - (माता-पिता के मार्जिन) को सेट करते हैं, तो आप कैसे चाहते हैं। तो कहते हैं कि माता-पिता मार्जिन 10px है, बच्चे की वाम: -10px निर्धारित करें, इसे हल करना चाहिए। सीएसएस क्रूर है ..
      2019-05-09 16: 29: 47Z
स्रोत रखा गया यहाँ