Üst doldurmak için CSS genişliği nasıl yapılır?

Bu sorunun daha önce sorulduğundan eminim ama cevabı bulamıyorum.

Aşağıdaki işaretlemem var:

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

Benim arzum, 600px( width: 600px;) genişliğine sahip foo yapmak ve çubuğun aşağıdaki davranışlara sahip olmasını sağlamaktır:

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

Diğer bir deyişle, çubuğun genişliğini olarak ayarlamak yerine, çubuğun 592pxdış genişliğini 100%, hesaplanacak şekilde ayarlamak istiyorum 592px. Buradaki önem, foo'nun genişliğini olarak değiştirebilmem 800pxve tüm bu örnekler için matematiği manuel olarak yapmak zorunda kalmam yerine işlendiğinde bar hesaplayacak olmasıdır.

Bu saf CSS'de mümkün mü?

Onunla biraz daha eğlenceli:

• Farzedelim #bar masa ise?
• Farzedelim #bar bir metin alanı ise?

• Farzedelim #bar bir girdi ise?

• Ya #foobir tablo hücresiyse ( td)? (Bu sorunu değiştiriyor mu yoksa sorun aynı mı?)

Şimdiye kadar table#bar, input#bartartışıldı. Textarea # bar için iyi bir çözüm görmedim. Bir divsarma ile kenarlık / kenar boşluğu / dolgu içermeyen bir metin divalanının textarea,.

DÜZENLE :

Bu üç farklı öğenin tümünün farklı oluşturma kuralları vardır.

İçin böylece:

table#bargenişliği% 100 olarak ayarlamanız gerekir, aksi takdirde yalnızca olması gerektiğini belirlediği kadar geniş olacaktır. Bununla birlikte, tablonun toplam genişliği satır genişliğinden büyükse bar, gerekli genişliğine genişleyecektir. Hatırlarsam, bunu ayarlayarak buna karşı koyabilirsinizdisplay: block !important; , bunu düzeltmek zorunda olduğumdan beri bir süredir buna . (Hatalıysam birinin beni düzelteceğinden eminim).

textarea#bari inanıyorum ki blok düzeyinde bir öğe olduğundan div ile aynı kurallara uyacaktır. Buradaki tek uyarı, textareabir nitelik almak colsverows karakter sütunlarında ölçülen . Bu öğe üzerinde belirtilirse, css tarafından belirtilen genişliği geçersiz kılar.

input#barsatır içi bir öğedir, bu nedenle varsayılan olarak genişlik atayamazsınız. Ancak textarea's colsözniteliğine benzer şekilde size, öğe üzerinde genişliği belirleyebilen bir özniteliğe sahiptir . Bununla birlikte, css'nizi kullanarak her zaman bir genişlik belirtebilirsiniz display: block;. Daha sonra div ile aynı oluşturma kurallarını izleyecektir.

td#footable-cellbiraz çılgınlığı olan bir hale getirilecek . Buradaki alt satır, amaçlarınız için div#foo, içeriğinin genişliğini sınırlandırdığı kadarıyla hareket edecek olmasıdır . Buradaki tek sorun, sütunda, genişlik ayarınızı görmezden gelmesine neden olacak bir yerde potansiyel olarak sarılamaz metin olacaktır. Ayrıca sütundaki tüm hücreler, en geniş hücrenin genişliğini alacaktır.

Bu, blok seviyesi öğesinin varsayılan davranışıdır - yani. genişlik auto(varsayılan) ise, içerdiği öğenin iç genişliğinin% 100'ü olacaktır. özünde:

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

size tam olarak ne istediğinizi verecektir.

neredeyse orada, sadece değiştir outerWidth: 100%; için width: auto;(outerWidth CSS özelliği değildir)

alternatif olarak aşağıdaki stilleri çubuğa uygulayın:

width: auto;
display: block;

Stilleri kullanın

left: 0px;

veya / ve

right: 0px;

veya / ve

top: 0px;

veya / ve

bottom: 0px;

Sanırım çoğu durumda işi yapacak

Yani araştırmadan sonra aşağıdakiler keşfedildi:

Bir div#barayar display:block; width: auto;için eşdeğerouterWidth:100%;

Bir için table#bar, aşağıda belirtilen kurallara göre bir div'e sarmanız gerekir. Böylece yapınız şöyle olur:

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

Bu şekilde tablo, üst div% 100'ü alır ve tabloya #barWrapkenarlıklar / kenar boşluğu / dolgu eklemek için kullanılır #bar. Not İçinde her şeyin arka planını ayarlamak için ihtiyaç duyacağı #barWrapve sahip #bar'ın arka plan saydam veya aynı olacak#barWrap .

Zira textarea#barve bununla input#baraynı şeyi yapmanız gerekir table#bar, aşağı tarafı, kenarlıkları kaldırarak giriş / metin alanının yerel widget oluşturmasını durdurmanızdır ve #barWrapkenarlıkları her şeyden biraz farklı görünecektir, bu nedenle muhtemelen yapmanız gerekecektir. tüm girdilerinizi bu şekilde biçimlendirin.

box-sizing: border-box;
width: 100%;
padding: 5px;

kutu boyutlandırma: kenarlık kutusu; dolgu, kenar boşluğu ve kenarlığın genişlik hesaplamalarına dahil edilmesini sağlar.

MDN