सीएसएस चौड़ाई: 100% स्क्रीन फिट करने के लिए

मैं अपने पाद लेख को पृष्ठ के अंत में बनाने की कोशिश कर रहा हूं, इसलिए मैं स्थिति का उपयोग कर रहा हूं: पूर्ण और नीचे: 0 ऐसा करने के लिए। समस्या पृष्ठभूमि रंग की स्क्रीन के अनुरूप करने के लिए बढ़ाया नहीं किया जाएगा, तो मैं चौड़ाई उपयोग करने की कोशिश: 100%, लेकिन अब यह अतिरिक्त पिक्सलसीएसएस चौड़ाई: 100% स्क्रीन फिट करने के लिए

इस उदाहरण मैं बनाया http://jsfiddle.net/SRuyG/2/ (खेद यह थोड़ा गन्दा है है, मैं बस सीएसएस सीखना शुरू कर रहा हूं)

मैंने कुछ ट्यूटोरियल से चिपचिपा पाद लेख भी कोशिश की लेकिन यह काम नहीं कर रहा है। तो मैं पेज के निचले भाग में फ़ूटर को कैसे सेट कर सकता हूं और पृष्ठभूमि स्क्रीन आकार फिट बैठती है?

धन्यवाद

सीएसएस:

html, body { 
    margin: 0; 
    padding: 0; 
} 

body {  
    font: 13px/22px Helvetica, Arial, sans-serif; 
    background: #f0f0f0; 

} 

.contentWrapper{ 
    min-height: 100%; 
    margin-bottom: -142px; 
} 

.contentWrapper:after { 
    content: ""; 
    display: block; 
    height: 142px; 
} 

nav { 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    box-shadow: 0px 0px 4px 4px #888888; 

} 

#navBar li{ 
    display:inline; 
} 

#navBar li a{ 
    color: #fff; 
    text-decoration: none; 
    padding: 25px; 
} 
#navBar li a:hover{ 
    background:#fff; 
    color: #222; 
    text-decoration: none; 
    padding: 25px; 
} 

footer { 
    position:absolute; 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    bottom:0; 
    width: 100%; 

}

HTML:

<body> 

    <nav> 
     <ul id='navBar'> 
      <li><a href="#">link 1</a></li> 
      <li><a href="#">link 2</a></li> 
      <li><a href="#">link 3</a></li> 
     </ul> 
    </nav> 



    <div id="contentWrapper"> 
     <section id="intro"> 
     <header> 
      <h2>Intro</h2> 
     </header> 
     <p>Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
      Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
      Paragraph goes here, long and long paragraph, blah blah blah. Paragraph goes here, long and long paragraph, blah blah blah. 
     </p> 
     </section> 
    </div> 

    <footer> 
      <section id="about"> 
       <header> 
        <h3>Footer</h3> 
       </header> 
       <p>some text here. </p> 
      </section> 
    </footer> 

</body>

स्रोत

2013-07-26 punkaceratop

<footer> की चौड़ाई के बॉर्डर तथा पैडिंग क्षेत्रों विवश करने के लिए box-sizing: border-box; उपयोग करने का प्रयास - के रूप में padding: 10px 20px नियम क्या स्क्रॉल पट्टी प्रकट करने के लिए पैदा होता है।

footer { 
    position:absolute; 
    background: #222; 
    color: #fff; 
    list-style: none; 
    font-size: 1.2em; 
    padding: 10px 20px; 
    bottom:0; 
    width: 100%; 
    box-sizing: border-box; 
}

http://jsfiddle.net/SRuyG/4/

स्रोत

2013-07-26 19:46:43 Adrift

आपका पाद शरीर है, जो HTML के भीतर है के भीतर है। चूंकि आपने चौड़ाई घोषित नहीं की है, इसलिए इसे किसी भी व्यापक रूप से विस्तारित करने की आवश्यकता नहीं है। अपने विशिष्ट एचटीएमएल लिए, आप अपने सीएसएस के साथ कुछ इस तरह करना चाहिए:

body, html { 
    width: 100%; // or body { width: 960px; } if you're using a fixed width 
} 

footer { 
    width: 100%; 
}

अंत में, याद है कि किसी भी चौड़ाई एक प्रतिशत में सेट है (लगभग) हमेशा माता-पिता की तुलना में होने जा रहा। 50% माता-पिता का 100% अभी भी 50% है। 75% माता-पिता का 50% केवल कुल व्यूपोर्ट चौड़ाई का 37.5% उत्पन्न करने जा रहा है।

स्रोत

2013-07-26 19:46:29 mikedugan

आप पाद लेख से padding: 10px 20px; को हटाने और जोड़ने footer section{margin:10px 20px}

http://jsfiddle.net/SRuyG/5/

स्रोत

2013-07-26 19:51:30 David

इस विधि स्वीकार किए जाते हैं जवाब अगर आप की जरूरत की तुलना में बेहतर है है आईई 7 या उससे कम का समर्थन करने के लिए, जो बॉक्स आकार देने वाली संपत्ति का समर्थन नहीं करता है। –

इस कोशिश कर सकते हैं ..

footer..you'll से इन नियमों को दूर किया ठीक

position:absolute; 
bottom:0; 
width:100%;

updated fiddle here

स्रोत

2013-07-26 20:03:38 sa77

सीएसएस नीचे से मैं गद्दी संपत्ति

footer { 
     position:absolute; 
     background: #222; 
     color: #fff; 
     list-style: none; 
     font-size: 1.2em; 
     bottom:0; 
     width: 100%; 

    }

हटा दिया और उर सीएसएस में इस बात को जोड़ने

footer section 
    { 
     margin:10px 20px; 

    }

स्रोत

2013-07-27 20:47:15

सीएसएस चौड़ाई: 100% स्क्रीन फिट करने के लिए

उत्तर

संबंधित मुद्दे