Bir eleman genişliği nasıl yapılır:% 100 eksi dolgu?

Bir html girdim var.

Girişin padding: 5px 10px;ana div genişliğinin (akışkan olan)% 100 olmasını istiyorum.

Ancak kullanmak width: 100%;girdinin olmasına neden olur, bununla 100% + 20pxnasıl başa çıkabilirim?

Misal

box-sizing: border-box düzeltmenin hızlı ve kolay bir yoludur:

Bu , tüm modern tarayıcılarda ve IE8 + ' da çalışacaktır .

İşte bir demo: http://jsfiddle.net/thirtydot/QkmSk/301/

.content {
    width: 100%;
    box-sizing: border-box;
}

Modern tarayıcılarda tarayıcı ön ekli sürümlere ( -webkit-box-sizingvb.) Gerek yoktur.

Bu yüzden box-sizingCSS'de var.

Örneğinizi düzenledim ve şimdi Safari, Chrome, Firefox ve Opera'da çalışıyor. Şuna göz atın: http://jsfiddle.net/mathias/Bupr3/ Tüm eklediğim şuydu:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Ne yazık ki IE7 gibi eski tarayıcılar bunu desteklemiyor. Eski IE'lerde çalışan bir çözüm arıyorsanız, diğer yanıtlara göz atın.

Yüzde de dolgu kullanın ve genişlikten çıkarın:

dolgu:% 5;
genişlik:% 90;

Bunu kullanmadan yapabilirsiniz box-sizingve net çözümler gibi değilwidth~=99% .

JsFiddle'da demo :

• Girdilerin paddingveborder
• Negatif yatay girdiye ekle margin= border-width+horizontal padding
• Girişin sarıcıya önceki adıma paddingeşit yatay eklemargin

HTML işaretlemesi:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}

Css calc () kullanın

Süper basit ve harika.

input {
    width: -moz-calc(100% - 15px);
    width: -webkit-calc(100% - 15px);
    width: calc(100% - 15px);
}​

Burada görüldüğü gibi: Div genişliği% 100 eksi sabit miktarda piksel
Webvitaly ile ( https://stackoverflow.com/users/713523/webvitaly )
Orijinal kaynak: http://web-profile.com.ua/css/dev/css -width-100prc-eksi-100 piksel /

Sadece buraya kopyaladım, çünkü neredeyse diğer iş parçacığını kaçırdım.

15px dolgu ile bir kapta olduğumu varsayarsak, iç kısım için her zaman kullandığım şey budur:

width:auto;
right:15px;
left:15px;

Bu, iç parçayı her iki tarafta 15 piksel daha az olması gereken genişliğe kadar gerecektir.

Bazı konumlandırma hileleri deneyebilirsiniz. Girdiyi bir div position: relativeöğesine ve sabit bir yüksekliğe koyabilirsiniz , daha sonra girdiye position: absolute; left: 0; right: 0;ve istediğiniz herhangi bir dolguya sahip olabilirsiniz.

Canlı örnek

İşte iyi çözüm örnekleri olan codeontrack.com'un önerisi :

Div genişliğini% 100 olarak ayarlamak yerine, otomatik <div>olarak ayarlayın ve görüntülenecek şekilde ayarlandığından emin olun : block (varsayılan için <div>).

Giriş kutusu dolgusunu bir sargı elemanına taşıyın.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

Buradaki örneğe bakın: http://jsfiddle.net/L7wYD/1/

Sadece genişlik arasındaki farkı anlayın: auto; ve genişlik:% 100; En: otomatik; (OTOMATİK) Doldurma da dahil olmak üzere sarma div ile verilene tam olarak uyacak şekilde MATICALLY genişliğini hesaplayacaktır. Genişlik% 100 genişliği genişletir ve dolguyu ekler.

Bir kaba sarmaya ne dersin. Konteyner shoud tarzı var:

{
    width:100%;
    border: 10px solid transparent;
}

Bunu dene:

width: 100%;
box-sizing: border-box;

Benim margin:15px;padding:10px 0 15px 23px;width:100%için sonuç şu oldu:

Benim için çözüm width:autobunun yerine kullanmaktı width:100%. Yeni kodum:

margin:15px;padding:10px 0 15px 23px;width:auto. Sonra eleman düzgün bir şekilde hizalandı:

Aynı sorunu yaşadım. Şöyle düzeltin:

width: 100%;
box-sizing: border-box;

Bunu yapabilirsiniz:

width: auto;
padding: 20px;