CSS фиксированная ширина нижнего колонтитула с отступами - PullRequest
Новая
       26

CSS фиксированная ширина нижнего колонтитула с отступами

0 голосов
/ 05 декабря 2011

Будучи любителем CSS-кодера, пытаясь покончить с синдромом «таблицы», у меня возникли некоторые проблемы с установкой исправного нижнего колонтитула.

У меня установлен DIV нижнего колонтитула на 100% ширины, нопоскольку внутри DIV имеется отступ в 30 пикселей, нижний колонтитул расширяется на 60 пикселей за 100%, если вы понимаете, о чем я.

Как мне решить эту проблему?

Мой код CSSэто: 

#footerDiv {
background:url(../images/background/mainBG.gif);
margin:0 auto;
padding:15px 30px;
width:100%;
bottom:0;
left:0;
z-index:4;
position:fixed
}

Ответы [ 2 ]

2 голосов
/ 05 декабря 2011

Когда вы устанавливаете ширину вашего элемента с помощью CSS, он устанавливает только область содержимого DIV.Ширина отступов и границ рассчитывается вне области содержимого.Однако вы можете поместить другой DIV в DIV нижнего колонтитула и установить для него отступ 30 пикселей, чтобы сохранить 100% ширину внешнего DIV. 

<DIV style="width:100%">
   <DIV style="padding:30px">
       <!-- Actual footer content -->
   </DIV>
</DIV>

Это должно быть CSS2.0-совместимым.;)

1 голос
/ 05 декабря 2011

Звучит как проблема блочной модели.Для получения дополнительной информации посмотрите здесь .

Код для правильной настройки выглядит следующим образом: 

.footer {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
}

Поскольку для меня это имеет больше смысла, иногда я применяю его квсе элементы на странице (т.е. замените .footer на *).

...