Jak sprawić, by szerokość CSS wypełniła rodzica?

88

Jestem pewien, że ten problem był już zadawany, ale nie mogę znaleźć odpowiedzi.

Mam następujące znaczniki:

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

Moim pragnieniem jest, aby foo miało szerokość 600px( width: 600px;) i aby pasek zachowywał się następująco:

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

Innymi słowy, zamiast ustawiać szerokość paska na 592px, chciałbym ustawić zewnętrzną szerokość paska na 100%, aby była obliczana na 592px. Ważne jest tutaj to, że mogę zmienić szerokość foo na, 800pxa pasek będzie obliczany podczas renderowania, zamiast konieczności ręcznego wykonywania obliczeń dla wszystkich tych wystąpień.

Czy jest to możliwe w czystym CSS?

Trochę więcej zabawy z tym:

  • A jeśli #barjest stół?
  • A co jeśli #barjest textarea?

  • A co jeśli #barjest wejście?

  • A jeśli #foojest komórką tabeli ( td)? (Czy to zmienia problem, czy problem jest identyczny?)

Jak dotąd table#bar, input#barzostało omówione. Nie widziałem dobrego rozwiązania dla paska textarea #. Myślę, że obszar tekstowy bez obramowania / marginesu / dopełnienia z divzawijaniem może działać ze divstylem, aby działał jako obramowanie dla textarea.

css 
— Dmitriy Likhten
źródło

Odpowiedzi:

39

EDYCJA :

Te trzy różne elementy mają różne zasady renderowania.

Więc dla:

table#barmusisz ustawić szerokość na 100%, w przeciwnym razie będzie ona tak szeroka, jak określi to konieczne. Jeśli jednak całkowita szerokość wierszy tabeli jest większa niż szerokość, zostanie zwiększona bardo wymaganej szerokości. JEŚLI pamiętam, możesz temu przeciwdziałać, ustawiając, display: block !important;chociaż minęło trochę czasu, odkąd musiałem to naprawić. (Jestem pewien, że ktoś mnie poprawi, jeśli się mylę).

textarea#bari beleive jest elementem blokowym, więc będzie przestrzegać takich samych reguł jak element div. Jedynym zastrzeżeniem jest to, że textareaprzyjmują atrybuty colsi rowssą mierzone w kolumnach znaków. Jeśli jest to określone w elemencie, nadpisuje szerokość określoną przez css.

input#barjest elementem wbudowanym, więc domyślnie nie można przypisać jej szerokości. Jednak podobnie jak atrybut textarea's cols, ma sizeatrybut na elemencie, który może określać szerokość. To powiedziawszy, zawsze możesz określić szerokość, używając do tego display: block;w swoim css. Wtedy będzie podlegał tym samym regułom renderowania co div.

td#foostanie się czymś, table-cellco ma w sobie jakieś szaleństwo. Najważniejsze jest to, że dla twoich celów będzie działać tak div#foosamo, jak ograniczanie szerokości jego zawartości. Jedynym problemem będzie tutaj potencjalny nieodwracalny tekst w kolumnie, który spowodowałby zignorowanie ustawienia szerokości. Również wszystkie komórki w kolumnie otrzymają szerokość najszerszej komórki.

To jest domyślne zachowanie elementu na poziomie bloku - tj. jeśli szerokość jest auto(domyślna), będzie to 100% wewnętrznej szerokości elementu zawierającego. więc w istocie:

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

da ci dokładnie to, czego chcesz.

— prodigitalson
źródło
Hej dzięki. Również dobra zabawa przy stołach decydujących się na krwawienie. Zakładam, że tabele zachowują się tak samo jak elementy div?
— Dmitriy Likhten
@Dimitry: Nie, mają specjalne zasady, które sprawiają, że są bardziej podobne inline-blockniż blockelementy. Zauważ jednak, że powiedziałem więcej niż to samo co :-) To, czego prawdopodobnie doświadczasz, to to, że jeśli nie zdefiniowano inaczej, ogólnie będą się rozszerzać, aby pomieścić wszystkie kolumny, co może być naprawdę denerwujące, jeśli niektóre nagłówki / komórki zawierają długi tekst, którego nie można zapisać.
— prodigitalson
Dzięki za pomoc :) Pozwólcie, że zaktualizuję nieco pytanie, aby dać o wiele pełniejszy przegląd problemów i mam nadzieję, że wszystkie obejścia można wymienić w jednej sekcji.
— Dmitriy Likhten
Eksperymentowałem z paskiem div # foo table # i ustawiając szerokość: 100% na tabeli # bar rzeczywiście rozszerzy tabelę, ale krawędzie / marginesy tabeli będą krwawić przez div # foo. Ustawienie tabeli do wyświetlenia: block nie jest dobre, ponieważ psuje inne aspekty renderowania tabeli, takie jak obsługa szerokości wiersza. Pasek textarea # nie rozszerzy się, gdy szerokość jest ustawiona na auto lub nie jest ustawiona.
— Dmitriy Likhten
1
ponieważ textarea#barpowinieneś móc to ustawić display: blockz niewielkim negatywnym skutkiem. Jeśli chodzi o tabelę, wiem, że w przeszłości stosowałem jakieś rozwiązanie / złagodzenie tego problemu, ale nie pamiętam, co to było w tej chwili. Powiem jednak, że generalnie nie ustawiam "marginesów" w tabeli, ale raczej zawijam go w element div z dopełnieniem / marginesami ... może to być sam #foo lub inny element div użyty jsut do zastosowania tego typu odstępów. Możesz również przeciwdziałać problemowi z obramowaniem, aby zastosować obramowanie tylko do pierwszej / ostatniej komórki z rzędu / komórek w pierwszym / ostatnim wierszu
— prodigitalson
28

prawie gotowe , po prostu zmień outerWidth: 100%;na width: auto;(externalWidth nie jest właściwością CSS)

alternatywnie zastosuj następujące style do paska:

width: auto;
display: block;
— Jarzębina
źródło
4
To nie zadziała, jeśli ustawia dopełnienie marginesu, barponieważ zostanie dodany do 100% efektywnie barposzerzając go niż jego rodzic foo.
— prodigitalson
tak, odpowiedziałem na to zbyt szybko; P
— Rowan
Poczekaj sekundę. Więc jeśli ustawię właściwość width na cokolwiek, będzie to krwawić? width: auto nie jest rozwiązaniem, raczej nie ustawianie szerokości w ogóle nie jest rozwiązaniem?
— Dmitriy Likhten
2
tak to prawda. Każdy element, który ma display:block;(znany również jako element na poziomie bloku), przyjmie to zachowanie. element DIV ma width:auto;i jest display:block;ustawiony domyślnie.
— Rowan
Stary post, ale nie mógł po prostu użyć box-sizing: border-box, aby dopełnienie znajdowało się wewnątrz szerokości elementu.
— CHBresser
16

Użyj stylów 

left: 0px;

albo i

right: 0px;

albo i

top: 0px;

albo i

bottom: 0px;

Myślę, że w większości przypadków wystarczy

— Tigsar
źródło
4

Tak więc po badaniach odkryto:

Dla div#barustawienia display:block; width: auto;powoduje odpowiednikouterWidth:100%;

W przypadku table#bar, musisz owinąć go w div zgodnie z zasadami podanymi poniżej. Twoja struktura staje się więc:

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

W ten sposób tabela zajmuje 100% nadrzędnego div i #barWrapjest używana do dodawania obramowań / marginesów / dopełnienia do #bartabeli. Zauważ, że będziesz musiał ustawić tło całości w programie #barWrapi mieć #bartło przezroczyste lub takie samo jak #barWrap.

Bo textarea#bari input#barmusisz zrobić to samo co table#bar, wadą jest to, że usuwając obramowania, zatrzymujesz natywne renderowanie widżetu obszaru wejściowego / tekstowego, a #barWrapobramowania będą wyglądać nieco inaczej niż wszystko inne, więc prawdopodobnie będziesz musiał stylizuj wszystkie swoje wejścia w ten sposób.

— Dmitriy Likhten
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.