Как изменить заполнение DIV, не влияя на ширину/высоту?

У меня есть div, для которого я хочу указать ширину и высоту FIXED, а также дополнение, которое можно изменить, не уменьшая исходную ширину/высоту DIV или увеличивая его, есть ли трюк CSS для этого или альтернатива используя прокладку?

Ответ 1

Решение состоит в том, чтобы обернуть дополненный div, с внешней шириной div

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

Ответ 2

Объявите это в своем CSS, и вы должны быть хорошо:

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

Это решение может быть реализовано без использования дополнительных оберток

Ответ 3

Похоже, вы хотите имитировать модель окна IE6. Для этого вы можете использовать свойство CSS 3 размер окна: border-box. Это поддерживается IE8, но для Firefox вам нужно использовать -moz-box-sizing, а для Safari/Chrome используйте -webkit-box-sizing.

IE6 уже неправильно вычисляет высоту, поэтому вы хорошо разбираетесь в этом браузере, но я не уверен в IE7, я думаю, что он вычислит высоту в режиме quirks.

Ответ 4

Чтобы достичь согласованного результата в кросс-браузере, вы обычно добавляете еще div внутри div и не указываете явной ширины и margin. margin будет симулировать padding для внешнего div.

Ответ 5

попробуйте этот трюк

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

это заставит браузер рассчитать ширину в соответствии с "внешней" шириной div, это означает, что отступ будет вычитаться из ширины.