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ı?

css html

— Ryan
kaynak

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;
}

— Juraj Blahunka
kaynak

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.

— reklam
kaynak

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.

— Wsanville
kaynak

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.

— KA
kaynak

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.

— Pekka
kaynak