Wie mache ich die CSS-Breite, um das übergeordnete Element zu füllen?

87

Ich bin sicher, dass dieses Problem schon einmal gestellt wurde, aber ich kann anscheinend keine Antwort finden.

Ich habe das folgende Markup:

<div id="foo">
    <div id="bar">
        here be dragons
    </div>
</div>

Mein Wunsch ist es, foo so zu machen, dass es die Breite 600px( width: 600px;) hat und bar die folgenden Verhaltensweisen hat:

padding-left: 2px;
padding-right: 2px;
margin-left: 2px;
margin-right: 2px;
outerWidth: 100%;

Mit anderen Worten, anstatt die Breite des Balkens auf 592pxzu setzen, möchte ich die äußere Breite des Balkens 100%so einstellen , dass er berechnet wird 592px. Die Wichtigkeit hierbei ist, dass ich die Breite von foo in ändern kann 800pxund der Balken beim Rendern berechnet wird, anstatt dass ich die Berechnungen für alle diese Instanzen manuell durchführen muss.

Ist das in reinem CSS möglich?

Noch mehr Spaß damit:

  • Was ist, wenn #barein Tisch ist?
  • Was ist, wenn #bares sich um einen Textbereich handelt?

  • Was ist, wenn #bares sich um eine Eingabe handelt?

  • Was ist, wenn #fooes sich um eine Tabellenzelle ( td) handelt? (Ändert dies das Problem oder ist das Problem identisch?)

Bisher ist die table#bar, input#barwird diskutiert. Ich habe keine gute Lösung für Textbereich # Leiste gesehen. Ich denke, ein Textbereich ohne Rand / Rand / Polsterung mit einem divWrap könnte mit dem divStil funktionieren, der als Rahmen für die textarea.

css Dmitriy Likhten
quelle

Antworten:

39

EDIT :

Diese drei verschiedenen Elemente haben alle unterschiedliche Renderregeln.

So für:

table#barSie müssen die Breite auf 100% einstellen, da sie sonst nur so breit ist, wie es bestimmt wird. Wenn die Gesamtbreite der Tabellenzeilen jedoch größer als die Breite ist bar, wird sie auf die erforderliche Breite erweitert. WENN ich mich erinnere, können Sie dem entgegenwirken, indem Sie einstellen, display: block !important;obwohl es eine Weile her ist, seit ich das beheben musste. (Ich bin sicher, jemand wird mich korrigieren, wenn ich falsch liege).

textarea#barIch glaube, es ist ein Element auf Blockebene, daher folgt es den gleichen Regeln wie das div. Die einzige Einschränkung besteht darin, dass textareaAttribute von colsund rowsin Zeichenspalten gemessen werden. Wenn dies für das Element angegeben ist, wird die vom CSS angegebene Breite überschrieben.

input#barist ein Inline-Element, daher können Sie ihm standardmäßig keine Breite zuweisen. Ähnlich wie textareadas colsAttribut von 's hat es jedoch ein sizeAttribut für das Element, das die Breite bestimmen kann. Sie können jedoch jederzeit eine Breite angeben, indem Sie sie display: block;in Ihrem CSS verwenden. Dann folgt es den gleichen Renderregeln wie das div.

td#foowird als etwas gerendert, table-celldas etwas Verrücktheit hat. Fazit hier ist, dass es für Ihre Zwecke genauso div#fooweit gehen wird, wie die Breite seines Inhalts einzuschränken. Das einzige Problem hierbei ist möglicherweise nicht auspackbarer Text in der Spalte, der dazu führen würde, dass Ihre Breiteneinstellung ignoriert wird. Außerdem erhalten alle Zellen in der Spalte die Breite der breitesten Zelle.

Das ist das Standardverhalten des Blockebenenelements - dh. Wenn width auto(Standardeinstellung) ist, beträgt sie 100% der inneren Breite des enthaltenen Elements. also im Wesentlichen:

#foo {width: 800px;}
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;}

gibt Ihnen genau das, was Sie wollen.

prodigitalson
quelle
Hey danke. Ich habe auch Spaß mit Tischen, die sowieso bluten wollen. Ich nehme an, Tabellen haben das gleiche Verhalten wie die divs?
Dmitriy Likhten
@Dimitry: Nein, sie haben spezielle Regeln, die sie ähnlicher machen inline-blockals blockElemente. Beachten Sie jedoch, dass ich eher gesagt habe, dass es nicht dasselbe ist wie :-) Was Sie wahrscheinlich erleben, ist, dass sie, sofern nicht anders definiert, im Allgemeinen erweitert werden, um alle Spalten aufzunehmen, was sehr ärgerlich sein kann, wenn einige der Überschriften / Zellen langen, nicht auspackbaren Text enthalten.
prodigitalson
Vielen Dank für Ihre Hilfe :) Lassen Sie mich die Frage ein wenig aktualisieren, um einen umfassenderen Überblick über die Probleme zu erhalten, und hoffentlich können alle Problemumgehungen in einem Abschnitt aufgeführt werden.
Dmitriy Likhten
Ich habe mit der div # foo-Tabellenleiste experimentiert und die Breite festgelegt: 100% in der Tabellenleiste erweitern zwar die Tabelle, aber die Ränder / Ränder der Tabelle bluten durch div # foo. Festlegen der anzuzeigenden Tabelle: Block ist nicht gut, da er andere Aspekte des Tabellen-Renderings wie die Behandlung der Zeilenbreite durcheinander bringt. Der Textbereich # wird nicht erweitert, wenn die Breite auf "Automatisch" oder "Nicht festgelegt" eingestellt ist.
Dmitriy Likhten
1
denn textarea#barSie sollten in der Lage sein, dies display: blockmit wenig nachteiligen Auswirkungen einzustellen . Was die Tabelle angeht, weiß ich, dass ich in der Vergangenheit eine Lösung / Minderung dafür verwendet habe, aber ich kann mich nicht erinnern, was es im Moment war. Allerdings werde ich sagen, dass ich im Allgemeinen keine "Ränder" für eine Tabelle setze, sondern sie in ein Div mit Auffüllen / Rändern einwickle ... dies könnte #foo selbst sein oder ein anderes Div, das jsut verwendet, um diese Art von Abstand anzuwenden. Sie können auch dem
Randproblem
28

fast da, wechseln Sie einfach outerWidth: 100%;zu width: auto;(OuterWidth ist keine CSS-Eigenschaft)

Alternativ können Sie die folgenden Stile auf die Leiste anwenden:

width: auto;
display: block;
Eberesche
quelle
4
Das funktioniert nicht, wenn er einen Rand auffüllt, barweil der zu 100% addiert wird, wodurch er effektiv barbreiter als der übergeordnete Rand wird foo.
prodigitalson
Ja, ich antwortete zu schnell, P
Rowan
Einen Augenblick. Wenn ich also die Eigenschaft width auf irgendetwas setze, wird sie durchbluten? width: auto ist nicht die lösung, sondern überhaupt keine width einzustellen?
Dmitriy Likhten
2
ja das ist richtig. Jedes Element, das über display:block;(auch als Blockebenenelement bezeichnet) verfügt, übernimmt dieses Verhalten. Ein DIV-Element hat width:auto;und display:block;ist standardmäßig eingestellt.
Rowan
Alter Beitrag, aber er konnte nicht einfach Box-Sizing: Border-Box verwenden, damit die Polsterung innerhalb der Breite des Elements liegt.
CHBresser
16

Verwenden Sie die Stile 

left: 0px;

oder und

right: 0px;

oder und

top: 0px;

oder und

bottom: 0px;

Ich denke für die meisten Fälle wird das den Job machen

Tigsar
quelle
4

Nach Recherchen wird also Folgendes entdeckt:

Für eine div#barEinstellung display:block; width: auto;ergibt sich das Äquivalent vonouterWidth:100%;

Für a müssen table#barSie es in ein div mit den unten angegebenen Regeln einwickeln. So wird Ihre Struktur:

<div id="foo">
 <div id="barWrap" style="border....">
  <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;">

Auf diese Weise nimmt die Tabelle das übergeordnete Div zu 100% ein und #barWrapwird verwendet, um der #barTabelle Rahmen / Rand / Abstand hinzuzufügen . Beachten Sie, dass Sie den Hintergrund der ganzen Sache in festlegen müssen #barWrapund haben #barHintergrund als transparent oder gleich sein s‘ #barWrap.

Für textarea#barund input#barSie müssen das Gleiche tun wie table#bar: Der Nachteil ist, dass Sie durch Entfernen der Ränder das native Widget-Rendering des Eingabe- / Textbereichs stoppen und die Ränder des Rahmens #barWrapetwas anders aussehen als alles andere, sodass Sie dies wahrscheinlich tun müssen Gestalten Sie alle Ihre Eingaben auf diese Weise.

Dmitriy Likhten
quelle