Каков предпочтительный способ кодирования, когда только фон верхнего и нижнего колонтитула является гибким, а не содержимым?

Question

Какой предпочтительный способ кодирования, когда только фон верхнего и нижнего колонтитула является гибким, а не содержимым?

В настоящее время я использую этот метод? Есть ли лучший способ сделать это?

<header style="background:red>
<div style="width:950px; margin:0 auto">
</div>
</header>

<div id="content" style="width:950px; margin:0 auto">

</div>


<footer style="background:blue>
<div style="width:950px; margin:0 auto">
</div>
</footer>

Я использовал встроенный CSS только для примера

фактическая наценка

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

    <div id="content">

    </div>


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

Я делаю сайт для рабочего стола и iPad. iPad имеет фиксированную ширину, но рабочий стол может быть любым.

Answer 1

Верхний и нижний колонтитулы

имеют ширину 100%, а содержимое фиксирует ширину 95%, поэтому верхний и нижний колонтитулы являются гибкими.

css:

header {
width:100%;
background:#ccc;
}

footer {
width:100%;
background:#ccc;
}

#content {
width:95%;
margin:0 auto;
}

Answer 2

Вот другой способ сделать это.Не обязательно лучше.Ваш метод выглядит хорошо.

<div class="wrapper">
    <header>
    </header>

    <div id="content">
    </div>

    <footer>
    </footer>
</div>

.wrapper { width: 950px; margin: 0 auto; }
header, footer { margin: 0px -9999px; padding: 0px 9999px; }

Answer 3

Почему вы добавляете еще <div> в header и footer?

Также, пожалуйста, отбросьте встроенный CSS (если его нет только для этого примера).

Кроме того, ваш код выглядит хорошо со мной