Как сделать шапку и подвал сайта во всю ширину экрана?

Question

Как сделать шапку и подвал сайта во всю ширину экрана?

26 авг. 2013 г., 13:28:35

Просмотры: 30.3K

Голосов: 2

Я использую тему Skeleton на этом сайте.

Я хочу сделать так, чтобы шапка и подвал сайта занимали всю горизонтальную ширину экрана, в то время как основной контент оставался бы в текущем размере.

Я просмотрел несколько других обсуждений, но не смог найти решение для темы Skeleton.

Tryna Code

55

css

Все ответы на вопрос

Комментарии

Прежде всего, большое спасибо, что нашли время ответить. Я вставил CSS-код в CSS моей темы, но, полагаю, мне нужно вставить что-то ещё в файлы шаблона .php, верно? Спасибо!

Tryna Code

26 авг. 2013 г. 15:26:55

Да, но не копируйте и не вставляйте весь CSS из примера, потому что вам нужны только его части. HTML-код находится либо в index.php, либо в home.php. Я немного изменю пример разметки, чтобы вы поняли, к чему я веду.

Laniakea

26 авг. 2013 г. 15:38:24

Я не совсем уверен, что понял сообщение оффтопик: вопросы по WordPress следует задавать где-то ещё, или это что-то конкретное, что я могу исправить в своём вопросе, чтобы его разрешили задать здесь? Спасибо.

Tryna Code

26 авг. 2013 г. 17:52:27

Единственное, что связывает ваш вопрос с WordPress — это то, что ваш сайт работает на WordPress. Но сам вопрос в основном касается HTML/CSS, и его следовало бы задать на Stack Overflow. Тем не менее, я готов вам помочь.

Laniakea

26 авг. 2013 г. 18:44:38

Я понимаю, спасибо, Мартин. Если это не доставит вам проблем, я был бы рад вашей помощи. Я посмотрел ваш пример и понял, что мой вопрос был неясен. Мне нужно, чтобы во всю ширину растягивалось все содержимое — только фон. Логотип, меню и любой текст должны оставаться в пределах обычной ширины. Только цветной фон должен быть на всю ширину (синий цвет + красная линия для шапки и зеленая линия, синий цвет и красная линия для подвала). Спасибо!

Tryna Code

26 авг. 2013 г. 19:58:14

Показать остальные 4 комментариев

Laniakea 503 · Accepted Answer · 2013-08-26T15:14:50Z

Существует множество способов достичь этого.

Прежде всего, в данный момент весь ваш контент (включая шапку и подвал) находится внутри .container с шириной 960px. Вы не сможете сделать эти блоки шириной 100%, пока они находятся внутри этого контейнера. Поэтому вам нужно изменить код, переместив шапку и подвал за пределы контейнера. Я создал пример здесь.

ОБНОВЛЕНИЕ!

В файле header.php после тега body:

<?php st_above_header();?> 
<?php st_header();?> 
<?php st_below_header();?>
<?php st_navbar(); ?>
    <div id="wrap" class="container">

В файле footer.php непосредственно перед закрывающим тегом body:

   </div> <!-- Конец контейнера -->

   <?php st_before_footer();?>
   <div class="inner-wrap"><?php wp_footer();?></div>
   <span class="border"></span>
   <?php st_after_footer();?>

   </div> <!-- Конец контейнера страницы -->

CSS:

#footer {
margin:0;
height:auto;
width:100%;
bottom:0;
/* прикреплен к низу */
background:#0C2044;
border-top: 7px solid #549290;
}
#header {
margin:0;
width:100%;
border-bottom: 7px solid #DD013F;
}
.inner-wrap, .inner, #megaMenu {
margin: 0 auto;
padding: 0;
position: relative;
width: 960px;
}
#page-container {
position:relative;
/* необходимо для позиционирования подвала */
margin:0 auto;
/* центрирование, не работает в IE5 */
width:100%;
background:#f0f0f0;
height:auto !important;
/* современные браузеры */
height:100%;
/* IE6: воспринимается как min-height */
min-height:100%;
/* современные браузеры */
}
.border {border-top: 7px solid #DD013F;width:100%; height:7px; float:left;}
#navigation {
margin: 0 0 1.5em;
width: 100%;
background: #549290;  
}
#megaMenu.megaFullWidth {
width:100%;
max-width:960px;
}