Il problema dell'elemento HTML al 100% della larghezza

Quando si assegnano alcuni elementi HTML (come un input di modulo) larghezza 100%, non è più possibile applicare stili aggiuntivi che potrebbero influire sulla larghezza. Cose come border o padding causeranno l'elemento superare il 100%. Ciò si traduce in elementi scomodi che possono essere al di fuori dei loro elementi genitore.Il problema dell'elemento HTML al 100% della larghezza

Poiché il CSS non supporta width: 100% - 2px; L'unico modo che conosco è usare una larghezza di pixel assoluta (width: 98px) o tagliare l'elemento al 100% che non è realmente un'opzione.

<div style="overflow:hidden;"> 
<input style="width:100%; border: 1px solid #000;" /> 
</div>

Sono altri modi per aggirare questo problema?

fonte

2011-01-11 Xeoncross

Insieme con adding another div, la soluzione sarà presto ad usare i CSS 3 per aggiungere il box-sizing attribute alle regole CSS. Questo nuovo valore CSS 3 funziona già in IE 8 e tutti gli altri browser, quindi se non ti dispiace saltare IE 6 & 7 puoi usarlo ora!

textarea { 
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
     -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
     box-sizing: border-box;   /* Opera/IE 8+ */ 
}

fonte

2011-01-11 03:45:58 Xeoncross

+1 fantastico, funziona come un incantesimo! :) –

È divertente che tutti noi copia-incolla questo snippet css dallo stesso sito ogni volta che ne abbiamo bisogno: P – Loupax

cool! grazie - solo bisogno di questo! – headkit

È possibile creare un contenitore che sia al 100% senza chrome (bordi, padding) e quindi inserire un elemento di blocco all'interno, con qualsiasi chrome desiderato - un elemento di blocco riempirà la larghezza totale per impostazione predefinita.

<style> 
.container {width:100%;border:0:margin:0;} 
.thingy {border:1px solid black;margin:2px;background:#ddd;} 
</style> 

<div class="container"> 
    <div class="thingy"> 
    Both worlds? 
    </div> 
</div>

fonte

2011-01-11 02:50:36 Rudu

sembra che questo funziona solo su elementi div. Tuttavia, http://stackoverflow.com/questions/271067/how-can-i-make-a-textarea-100-width-withoutoverover-when-padding-is-present/272632#272632 mostra un modo di aggiungere un altro div intorno all'elemento e applicando lo stile ad esso. – Xeoncross

Bene, l'elemento interno deve essere un elemento a livello di blocco (non 'inline', o' inline-block'). – Rudu

+1 quello che avrei detto se fossi stato abbastanza veloce. :) Potrebbe anche valere la pena notare che CSS3 ci dà il 'dimensionamento della scatola: content-box', che sottrae i bordi e il riempimento dalla larghezza calcolata. –

Questa è una vecchia questione, ma vale la pena ricordare che da quando CSS3, è possibile utilizzare calc:

width: calc(100% - 2px);

fonte

2017-04-25 20:51:59 Keith

Il problema dell'elemento HTML al 100% della larghezza

risposta

Problemi correlati