Genişliği / yüksekliği etkilemeden DIV dolgusu nasıl değiştirilir?


93

SABİT genişliği ve yüksekliği belirtmek istediğim bir div'im var ve ayrıca orijinal DIV genişliğini / yüksekliğini azaltmadan veya artırmadan değiştirilebilen bir dolgum var, bunun için bir CSS numarası var mı, yoksa dolguyu kullanan bir alternatif var mı?

Yanıtlar:


72

Çözüm sizin sarılmasıdır yastıklı div ile, dış div genişliği sabit

HTML

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

        <!-- your content -->

    </div><!-- end .inner -->
</div><!-- end .outer -->

CSS

.outer, .inner {
    display: block;
}

.outer {
    /* specify fixed width */
    width: 300px;
    padding: 0;
}

.inner {
    /* specify padding, can be changed while remaining fixed width of .outer */
    padding: 5px;
}

Sadece açıklığa kavuşturmak istemiyorum, emin değilim, ama bu sadece yatay dolgu için işe yarar değil mi? Yükseklik olarak: otomatik, genişlik: otomatik gibi ebeveyni doldurmaz.
Jonathan

201

Bunu CSS'nizde beyan edin ve iyi olmalısınız:

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

Bu çözüm, ek sarmalayıcılar kullanılmadan uygulanabilir.

Bu, tarayıcıyı div'in "dış" genişliğine göre genişliği hesaplamaya zorlar, bu da dolgunun genişlikten çıkarılacağı anlamına gelir.


bir cazibe gibi çalışıyor, ben sadece bu mülkü araştırıyorum ve harika çalışıyor .....
nida

1
Bunu kullanırken dikkat etmem gereken herhangi bir yan etki var mı?
Radi

16
Bu çözüm, kabul edilen çözümden daha iyidir ve artık ön ek kullanmamak güvenlidir: shouldiprefix.com/#box-sizing
fgblomqvist

@adswebwork Büyük miktarda zamanımı kurtardınız. Teşekkür ederim.
Hardik Chaudhary

17

IE6 kutu modelini simüle etmek istiyorsunuz gibi görünüyor. Bunu başarmak için CSS 3 özelliği box-sizeing: border-box'ı kullanabilirsiniz. Bu, IE8 tarafından desteklenir, ancak Firefox için kullanmanız -moz-box-sizingve Safari / Chrome için kullanmanız gerekir -webkit-box-sizing.

IE6 zaten yüksekliği yanlış hesaplıyor, bu yüzden o tarayıcıda iyisiniz, ancak IE7 hakkında emin değilim, tuhaflık modunda yüksekliği aynı şekilde hesaplayacağını düşünüyorum.


css3 hala iPad gibi çok yeni :)
Ryan

10

bu numarayı dene

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

bu, tarayıcıyı div'in "dış" genişliğine göre genişliği hesaplamaya zorlar, bu, dolgunun genişlikten çıkarılacağı anlamına gelir.


5
bu @ adswebwork'ün cevabı ile aynı, değil mi? Nasıl çalıştığına dair açıklamayı takdir ediyorum, ama bu muhtemelen bir yorum olarak daha iyi
craq

1
neden aynı cevabı
Andrew

4

Çapraz tarayıcıda tutarlı bir sonuç elde etmek için, genellikle diviçine başka bir tane eklersiniz divve buna açık bir genişlik vermezsiniz ve a margin. marginSimüle edilecek paddingdış div.

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.