Larghezza CSS: 100% non si adatta allo schermo

Sto cercando di rendere il mio piè di pagina alla fine della pagina, quindi sto usando la posizione: assoluta e in basso: 0 per farlo. Il problema è il colore di sfondo non verrà esteso per adattarsi allo schermo, così ho provato con width: 100%, ma ora ha pixel in piùLarghezza CSS: 100% non si adatta allo schermo

questo è l'esempio ho creato http://jsfiddle.net/SRuyG/2/ (scusate è un po 'disordinato, sto solo iniziando a imparare css)

Ho anche provato il footer sticky da alcuni tutorial che ho trovato ma non funziona neanche. Quindi, in che modo posso impostare esattamente il piè di pagina nella parte inferiore della pagina e lo sfondo si adatta alle dimensioni dello schermo?

Grazie

CSS:

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>

fonte

2013-07-26 punkaceratop

Provare a utilizzare box-sizing: border-box; per limitare le aree di bordo e imbottitura alla larghezza di <footer> - poiché la regola padding: 10px 20px è la causa della visualizzazione della barra di scorrimento.

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/

fonte

2013-07-26 19:46:43 Adrift

tuo piè di pagina è all'interno del corpo, che è all'interno del codice HTML. Dal momento che non hai dichiarato una larghezza, non si espanderà più del necessario. Per la vostra specifica HTML, si dovrebbe fare qualcosa di simile con il CSS:

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

footer { 
    width: 100%; 
}

In ultima analisi, si ricordi che qualsiasi larghezza impostato in percentuale è (quasi) sempre andando ad essere in confronto al genitore. Il 100% di un genitore al 50% è ancora del 50%. Il 50% di un genitore del 75% produrrà solo il 37,5% della larghezza totale della finestra.

fonte

2013-07-26 19:46:29 mikedugan

è possibile rimuovere padding: 10px 20px; dal piè di pagina e aggiungere footer section{margin:10px 20px}

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

fonte

2013-07-26 19:51:30 David

Questo metodo è migliore rispetto alla risposta accettata se avete bisogno per supportare IE7 o inferiore, che non supporta la proprietà di ridimensionamento della casella. –

provare questo ..

rimuovere queste regole dal footer..you'll essere fine

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

updated fiddle here

fonte

2013-07-26 20:03:38 sa77

Da sotto css Ho rimosso la proprietà padding

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

    }

e aggiungere questa cosa in ur css

footer section 
    { 
     margin:10px 20px; 

    }

fonte

2013-07-27 20:47:15

Larghezza CSS: 100% non si adatta allo schermo

risposta

Problemi correlati