CSS-Positionierung zum Füllen des Containers: Breite vs. Links/Rechts?

Question

Berücksichtigung

• Für Elemente, die unbedingt in einem relativ positionierte Behälter positioniert sind.
• Wenn das Element die Breite des Containers ausfüllen soll.
• Das Element ist auch unten ausgerichtet.

ist es am besten für eine maximale Browser-Kompatibilität zu set a width in pixels für das Element oder einfach use left and right?

Alle üblichen Bugs, auf die man bei beiden Methoden achten sollte?

Mit left: 0; und right: 0; würde der Code in Fällen, in denen die Bildbreite oder -polsterung geändert werden sollte, übersichtlicher, aber gibt es irgendwelche Nachteile, wo width: 300px stattdessen günstig wäre?

Answer 1

Historisch gesehen haben wir gelernt, width statt left & right zu verwenden, da IE6 nicht zugleich die beiden Eigenschaften der gleichen Achse

<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> 

auch unterstützt hat, ist diese Technik nicht auf einigen Elementen arbeiten (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) 

---

Aber, zu analysieren, was in der normalen statischen Strömung geschieht die 012.357.258 mitEigenschaft

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

Sie werden sehen, es ist sehr ähnlich ist zu ...

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

... gleichen Eigenschaften mit den gleichen Werten! Das ist wirklich nett! Sonst sieht es so aus:

Das ist auch anders, weil das innere div die y-Achse nicht füllt. Um dies zu beheben, benötigen wir css calc() oder box-sizing und unnötige Kopfschmerzen.

---

Meine Antwort ist, left + right | top + bottom sind wirklich cool, da sie am nächsten an der statischen Positionierung sind width:auto und es gibt keinen Grund, sie nicht zu verwenden. Sie sind viel einfacher zu benutzen als die Alternative und sie bieten viel mehr Funktionalität (zB margin-left, padding-left und left gleichzeitig ein einzelnes Element).

left + right | top + bottom deutlich besser von den Browsern unterstützt im Vergleich zu der alternativen width:100% + box-sizing | calc() und es ist auch einfacher zu bedienen!

Natürlich, wenn Sie nicht brauchen (wie in Ihrem Beispiel), um das Element auch in der y-Achse zu wachsen, width:100% einige verschachtelten Elemente für die Polsterung verwendet wird, ist es die einzige Lösung Unterstützung zur Archivierung auch für MSIE6

Also, hängt von Ihren Bedürfnissen ab. Wenn Sie MSIE6 unterstützen möchten (dies ist der einzige Grund, dies zu tun), sollten Sie with:100% verwenden, andernfalls verwenden Sie left + right!

In der Hoffnung, hilfreich zu sein.

Answer 2

Beide Lösung funktioniert in jedem Browser ohne Probleme. In diesen Fällen möchte ich eine Breite hinzufügen: 100%; links: 0; unten: 0; für das Element, aber wenn Sie möchten links: 0, rechts: 0; unten: 0; mehr, als Sie das auch verwenden können.

Answer 3

Beiden Methoden sind in Ordnung, aber wenn Sie Ihr Design wollen ansprechbar oder Handy kompatibel zu sein - ich würde mit Left: und Bottom: empfehlen, wenn der Behälter nicht in <div> eingeschlossen ist.

Wenn es in einem <div> eingeschlossen ist, dann macht es mit width: 100% oder max-width: 200px ist ein Weg, meiner Meinung nach, verursacht am wenigsten Anzeigeprobleme.

Vermeiden Sie die Verwendung fester Breiten in CSS, wenn Sie möchten, dass Ihr Thema reagiert.

Answer 4

Ich habe dies nicht in allen Browsern (und Modi) getestet, aber für den IE - Quirks - Modus (zB in einem .HTA ohne! DOCTYPE definiert), habe ich ein Unterprogramm erstellt, das die BREITE oder HÖHE von Elementen korrigiert Der LINKS/RECHTS-Stil oder der OBEN/UNTEN-Stil werden eingestellt (nicht "automatisch"). Um nicht in alle Arten von Einheitenumwandlungen zu geraten, entfernt die Routine temporär den LINKEN (oder TOP) Stil und setzt die BREITE (oder HÖHE) auf 100%, um den RECHTEN (oder UNTEREN) Versatz in Pixeln zu bestimmen.

Das Skript ist in VBScript geschrieben, aber es sollte schwierig sein, die Idee in JavaScript zu übersetzen.

<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> 

Der Befehl, um alle Elemente in einem Dokument zu rechtfertigen ist:

Justify Document.body 

ich dies aus dem onload-Event am Aufruf, da es eine feste Größe .HTA in meinem Fall geht es aber ich erwarte, dass die Routine auch Arbeiten mit dem Onsize-Ereignis für große Fenster (oder Elternelemente).