width: 100% bei position: absolute

Wenn Sie:

<div style="width: auto; background: red; color: white">test</div>

Erhalten Sie ein div, dass ist gestreckt, um den gesamten Bildschirm auszufüllen, Breite (100%). Das ist das, was ich brauche, um zu geschehen.

Aber ich muss auch die Startposition gesetzt werden. Also, ich brauche position: absolute.

Wenn ich position:absolute, die Breite der div ist nur so breit wie der Inhalt (ähnlich schwimmt). Gibt es eine Möglichkeit, um dieses?

Kann ich nicht einfach angeben width: 100% da dies nicht berücksichtigen, Grenze, Größen, etc.

InformationsquelleAutor Wesley | 2011-11-02
  1. 22

    Wenn ich position:absolute, die Breite der div nur so breit wie
    der content innerhalb.. (Ähnlich schwimmt). Gibt es eine Möglichkeit, um
    diese?

    Kann ich nicht einfach angeben, width:100%, da diese nicht nehmen zu
    Konto Grenze-Größen, etc..

    Könnten Sie position:absolute; left:0; right:0; top:0.

    Wie diese: http://jsfiddle.net/thirtydot/yQWGV/

    • Fast gut, aber wenn Sie benötigen, Bildlaufleisten (add overflow: auto), dann verlieren Sie die Polsterung auf der rechten Seite (content wird gehen, bis auf die scrollbar und ignorieren Ihre Polsterung)
    • Versuchen Sie eine box-sizing: border-box; basierte Lösung statt. Wenn das nicht funktioniert, bieten ein demo zeigt das problem.
    • box-sizing hatte keine Wirkung. Siehe die jsfiddle für eine demo des Problems
    • Hinzufügen word-wrap: break-word;: jsfiddle.net/thirtydot/yQWGV/343. Wenn das ist nicht gut, was sollte passieren statt?
    • Werfen Sie einen Blick auf jsfiddle.net/dzwmomLh/10 - auf diese Weise wird das div nicht 100% der Breite, die Grenze der Beschriftung ist zu kurz. Wenn Sie die Tabelle sichtbar (Anzeige:normal), ist die Polsterung Recht, die Tabelle ist sichtbar (Tabelle 20px dem Rollbalken) - wenn Sie die inline-grid-anstelle von inline-block, Breite der div ist auf 100%, die Beschriftung Grenze ist auf die gesamte Breite, aber es gibt keine Polsterung direkt auf den Tisch. Was ich brauche: Breite 100%, für die Beschriftung plus Innenabstand rechts, um das übergelaufene Tabelle
    InformationsquelleAutor thirtydot
  2. 4

    Können Sie width:100% und das css-Attribut box-sizing, um die box-Modell arbeiten, wie IE 5.5, also padding und border gezählt in die Breite.

    div.absolute {
    width: 100%;
    border: 5px solid #000;
    background-color: #F00;
    position: absolute; top: 100px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    padding: 50px;
}

    Hier ist ein Turnschuh: http://jsfiddle.net/dJtm2/

    Vorsichtig sein, obwohl, da es ein relativ neues CSS3-Attribut und funktioniert nur in neueren Browsern, und wie Sie sehen können von meinem Beispiel muss schrecklich kontraproduktiv Maßnahme, die vendor-Präfixe.

    • Dies ist besser jetzt.
    • Fast gut, aber wenn Sie benötigen, Bildlaufleisten (add overflow: auto), dann verlieren Sie die Polsterung auf der rechten Seite (content wird gehen, bis auf die scrollbar und ignorieren Ihre Polsterung)
    InformationsquelleAutor Andreas Eriksson
  3. 3

    einfach schreiben, wie diese:

    div.absolute {
    border: 5px solid #000;
    background-color: #F00;
    position: absolute;
    top: 100px;
    padding: 50px;
    left:0;
    right:0;
}

    http://jsfiddle.net/dJtm2/1/

    in diesem padding & border nicht, erhöhen Sie die Breite des Elements.

    • Fast gut, aber wenn Sie benötigen, Bildlaufleisten (add overflow: auto), dann verlieren Sie die Polsterung auf der rechten Seite (content wird gehen, bis auf die scrollbar und ignorieren Ihre Polsterung)
    InformationsquelleAutor sandeep
Schreibe einen Kommentar