нижний колонтитул в html5 - PullRequest
0 голосов
/ 10 января 2012

Я пытаюсь создать нижний колонтитул, который охватывает ширину экрана. Он был вложен в тег body (по центру с помощью поля left / right auto), ширина которого составляла 825 пикселей, поэтому я вынул его и вложил в тег html, тем самым сняв ограничение ширины.

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

Что нужно сделать, чтобы элемент нижнего колонтитула охватывал всю ширину экрана слева направо?

Ответы [ 3 ]

1 голос
/ 10 января 2012

Вы не хотите, чтобы нижний колонтитул находился вне тега HTML.Нечто подобное должно работать.

Если у вас есть ширина, установленная на вашем теле тега, 100% будет расширяться только до ширины, установленной на вашем теге.Также, если вы собираетесь использовать HTML5, я предлагаю использовать тег <footer></footer>.Имейте в виду, что HTML5 нужны хаки для работы в старых браузерах.

<style type="text/css">

body {/*use this to declare font-family and other common attributes */}
#header {width:825px;height:200px;margin:0 auto 0 auto}/*or whatever your dimensions are*/
#main-content-wrapper {width:825px;margin:0 auto 0 auto;}
#footer {width:100%;}


</style>

<html>
<head>
<title></title>
<head>

<body>

<div id="header"></div>

<div id="main-content-wrapper"></div>

<div id="footer"></div>

</body>

</html>
1 голос
/ 10 января 2012
body, footer { 
    width:100%; 
}

#main {
    width: 825px;
    margin-left: auto;
    margin-right: auto;
}

<body>
    <div id="main">
        /* Your page content */
    </div>
    <footer>
        /* Your footer content */
    </footer>
</body>

И я полностью согласен с комментарием @ Yuri к вашему посту: следуйте спецификации, не ставьте теги вне <body> или даже <html>. Событие, если большинство браузеров может быть терпимым, некоторые, вероятно, будут отображаться неправильно.

0 голосов
/ 10 января 2012

Я не совсем уверен, полностью ли я понял, что вы имеете в виду. Но я думаю, что это может помочь вам.

CSS:

body, footer{
width:100%;
}

с этим вы устанавливаете промежуток (ширину) нижнего колонтитула и тела в ширину экрана.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...