Posizionamento CSS per riempire il contenitore: larghezza contro sinistra/destra?

Question

Considerando:

• Per elementi che sono posizionati in modo assoluto all'interno di un contenitore relativamente posizionato.
• Se si desidera che l'elemento riempia la larghezza del contenitore.
• L'elemento è anche allineato in basso.

E 'meglio per la massima compatibilità browser per set a width in pixels per l'elemento, o semplicemente use left and right?

Qualsiasi errore comune a cui prestare attenzione con entrambi i metodi?

Chiaramente, utilizzando left: 0; e right: 0; renderebbe il codice più gestibile nei casi in cui la larghezza o l'imbottitura dell'immagine erano di cambiare, ma ci sono aspetti negativi in ​​cui width: 300px sarebbe favorevole, invece?

Answer 1

Storicamente abbiamo appreso utilizzare width anziché left & right perché IE6 non supporta contemporaneamente le due proprietà dello stesso asse

<div style="top:0;bottom:0;position:absolute;">modern browsers</div> 

<div style="top:0;height:100%;position:absolute;">MSIE6</div> 

<div style="left:0;right:0;position:absolute;">modern browsers</div> 

<div style="left:0;width:100%;position:absolute;">MSIE6</div> 

<div style="left:0;right:0;top:0;bottom:0;position:absolute;">modern browsers</div> 

<div style="left:0;top:0;height:100%;width:100%;position:absolute;">MSIE6</div> 

Inoltre, questa tecnica non funziona su alcuni elementi (including on modern browsers, by spec)

<!-- these will not work --> 
<!-- edit: on some browsers they may work, 
but it's not standard, so don't rely on this --> 

<iframe src="" style="position:absolute;top:0;bottom:0;left:0;right:0;"></iframe> 

<textarea style="position:absolute;top:0;bottom:0;left:0;right:0;"></textarea> 

<input type="text" style="position:absolute;left:0;right:0;"> 

<button ... ></button> 

and possibly others... (some of these can't even be display:block) 

---

Ma, analizzando ciò che accade nel flusso statica normale usando l'012.357.proprietà

<div style="width:auto;padding:20px;margin:20px;background:lime;">a</div> 

vedrete che è molto simile a ...

<div style="width:auto;padding:20px;margin:20px;background:lime; 
    position:absolute;top:0;left:0;bottom:0;right:0;">b</div> 

... stesse proprietà con gli stessi valori! Questo è veramente bello! Altrimenti avrà il seguente aspetto:

Quale è anche diverso, perché il div interno non riempie l'asse y. Per risolvere questo problema abbiamo bisogno del css calc() o box-sizing e di un inutile mal di testa.

---

La mia risposta è, left + right | top + bottom sono davvero cool dal momento che sono più vicini al statica posizionamento di width:auto e non v'è alcuna ragione per non usarli. Sono molto più facili da usare rispetto all'alternativa e forniscono molto più funzionalità (ad esempio, utilizzando margin-left, padding-left e left allo stesso tempo in un singolo elemento).

left + right | top + bottom è notevolmente meglio supportato dai browser rispetto all'alternativa width:100% + box-sizing | calc() ed è anche più facile da usare!

Naturalmente se non avete bisogno (come nel tuo esempio) per far crescere l'elemento anche nell'asse y, width:100% utilizzando qualche elemento nidificato per l'imbottitura, è l'unica soluzione per archiviare il supporto anche per MSIE6

Quindi, dipende dalle vostre esigenze. Se vuoi supportare MSIE6 (è l'unica vera ragione per farlo) dovresti usare with:100%, altrimenti usa left + right!

Sperando di essere utile.

Answer 2

Entrambe le soluzioni funzionano senza problemi in tutti i browser. In questi casi mi piace aggiungere una larghezza : 100%; a sinistra: 0; fondo: 0; per l'elemento, ma se ti piace sinistra: 0; a destra: 0; bottom: 0; più di quanto tu possa usare anche quello.

Answer 3

Entrambi i metodi sono validi, ma se si desidera che il proprio design sia reattivo o compatibile con il telefono cellulare, si consiglia di utilizzare Left: e Bottom: se il contenitore non è racchiuso tra <div>.

Se è racchiuso in un <div>, farlo con width: 100% o max-width: 200px è un modo a mio avviso che causa meno problemi di visualizzazione.

Evitare l'uso di larghezze fisse in CSS se si desidera che il tema sia reattivo.

Answer 4

Non l'ho provato su tutti i browser (e le modalità) ma per la modalità strane IE (ad esempio in un .HTA senza! DOCTYPE definito), ho creato una subroutine che corregge la WIDTH o HEIGHT sugli elementi in cui il Lo stile LEFT/RIGHT o lo stile TOP/BOTTOM sono impostati (non "auto"). Per evitare di entrare in tutti i tipi di conversioni di unità, la routine temporanea rimuove lo stile LEFT (o TOP) e imposta WIDTH (o HEIGHT) su 100% per determinare l'offset RIGHT (o BOTTOM) in pixel.

Lo script è scritto in VBScript, ma dovrebbe essere difficile tradurre l'idea in JavaScript.

<html> 
<head> 
    <script language="VBScript"> 

Option Explicit 

Sub Justify(ByVal hElement) 

    Dim sStyleTop, iTop, iBottom, sStyleLeft, iLeft, iRight 

    With hElement 
     If .currentStyle.top <> "auto" And .currentStyle.height = "auto" And .currentStyle.bottom <> "auto" Then 
      iTop = .offsetTop 
      sStyleTop = .currentStyle.top 
      .style.top = "auto" 
      .style.height = "100%" 
      iBottom = -.offsetTop 
      .style.height = .offsetHeight - iTop - iBottom & "px" 
      .style.top = sStyleTop 
     End If 
     If .currentStyle.left <> "auto" And .currentStyle.width = "auto" And .currentStyle.right <> "auto" Then 
      iLeft = .offsetLeft 
      sStyleLeft = .currentStyle.left 
      .style.left = "auto" 
      .style.width = "100%" 
      iRight = -.offsetLeft 
      .style.width = .offsetWidth - iLeft - iRight & "px" 
      .style.left = sStyleLeft 
     End If 
     For Each hElement In .Children 
      Justify hElement 
     Next 
    End With 

End Sub 

Sub window_onload 

    Justify Document.body 

End Sub 

    </script> 
    <style type="text/css"> 
    body { 
     position:absolute; 
     width:100%; 
     height:100%; 
    } 
    #outer{ 
     background:blue; 
     position:absolute; 
     top:10px; 
     right:20px; 
     bottom:30px; 
     left:40px; 
    } 
    #inner{ 
     background:green; 
     position:absolute; 
     top:40px; 
     right:30px; 
     bottom:20px; 
     left:10px; 
    } 
    </style> 
</head> 
<body> 
    <div id="outer"> 
     <div id="inner"> 
     </div> 
    </div> 
</body> 
</html> 

Il comando di giustificare tutti gli elementi di un documento è:

Justify Document.body 

sto invocando questo dall'evento onload in quanto riguarda una dimensione .hta fissa nel mio caso, ma mi aspetto anche la routine per lavorare sull'evento onsize per finestre considerevoli (o elementi principali).