лучший способ справиться с фиксированной прокладкой и гибкой шириной / высотой - PullRequest
Новая
       25

лучший способ справиться с фиксированной прокладкой и гибкой шириной / высотой

2 голосов
/ 15 ноября 2011

Скажем, 

.container{
   padding:25px;
   height:100%;
}

Так что здесь .container будет 100% + высота 25 пикселей.

Проблема может возникнуть, когда, например: 

.container{
       padding:25px;
       height:100%;
       float:left;
    }
 .noPadding{ padding:0px;}


<body>
    <div class="container">blah</div>
    <div class="container noPadding">bleh</div>
</body>

Они оба имеют высоту 100%, но один будет больше.

Так как я могу сделать их одинакового размера и продолжать заполнять? Я не знаю, сколько будет 100% -25 * 2px ... это зависит от разрешения экрана.

Ответы [ 3 ]

2 голосов
/ 15 ноября 2011

Вы можете использовать css box-sizing свойство для этого: 

.container{
       padding:25px;
       height:100%;
       float:left;
       -moz-box-sizing:border-box;
       -webkit-box-sizing:border-box;
       box-sizing:border-box;
    }

Проверьте эту статью для более http://www.quirksmode.org/css/box.html

1 голос
/ 15 ноября 2011

Ну, вы можете использовать симпатичную библиотеку JS jQuery , чтобы добиться этого!
смотри:

DEMO 

$('.noPadding').height( $('.container:eq(0)').outerHeight(true) );

Для вычисления первой высоты .conteiner (с отступами) вы можете использовать: .outerHeight(true) а затем просто передайте его .height() вашего элемента .noPadding!

Дополнительная информация:

jQuery API .outerHeight ()
jQuery API .height ()

0 голосов
/ 15 ноября 2011

Установка высоты на 100% в CSS ничего не делает.Вы заметите, что удаление его, вероятно, не изменит размер рассматриваемого элемента.Теперь единственный способ создать два элемента одинаковой высоты, когда размер может быть динамическим, - это JavaScript.Вы захотите получить высоту первого и затем применить его ко второму элементу.

пример будет 

var height = document.getElementById('element1').height;
document.getElementById('element2').height = height;
...