Ненависть контейнеров div и попытка использования HTML5

Недавно я начал разработку веб-программирования/проектирования, и я столкнулся с этой проблемой. В HTML5 у вас есть такие классные теги, как section и header и footer и все.

Мой первый вопрос возникает здесь: они ведут себя (в контексте CSS) точно, например div s?

Переходя к более конкретной проблеме, я должен создать сайт с простой структурой header -> content (section) -> footer (примечание: меня не интересует совместимость IE). Я хотел бы, чтобы центральная часть расширялась (по вертикали) настолько, насколько это возможно, до тех пор, пока она не встретит нижний колонтитул. Часть "до тех пор, пока она не встретит нижний колонтитул" не может быть достигнута через несколько padding-bottom, но как насчет "расширения как можно большего"? Обратите внимание, что нижний колонтитул должен останавливаться, когда при изменении размера страницы он соответствует разделу.

Я имею в виду, я знаю, что с некоторыми div жизнь будет проще, но возможно ли, что с сегодняшними стандартами мне все равно придется обернуть всю страницу тегом <div id="container">? Поэтому возникает второй вопрос...

Не могу ли я достичь того, чего бы достичь, используя html и body в качестве контейнеров div#container, сделав html частью html + body, а body - div#container?

Надеюсь, мой вопрос ясен, я знаю, что я предпочитаю отклоняться, когда пишу.

Примечание для ясности, я добавлю свою структуру HTML и некоторые основные моменты из моего CSS здесь, но я не знаю, соответствуют ли они вопросу.

HTML:

<html>
<head...>
<body>
    <header id="page_header">
        stuff in the header...
    </header>

    <section id="page_content">
        stuff in the main section...
    </section>    

    <footer id="page_footer">
        an almost-sticky footer...
    </footer>
</body>

</html>

CSS

* {
    margin: 0;
}

html {
    background-image: url('../res/img/bg-light.png');
    height: 100%;
    position: relative;
}

body {
    width: 900px;
    height: 100%;
    margin: 0 auto 20px auto;
    padding: 0;
}

section#page_content {
    min-height: 400px; // ? does this stop the footer from being dragged over the content when resizing?
    width: 80%;
    margin: 0 auto;
}

footer#page_footer {
    position: absolute;
    height: 20px;
    width: 100%;
    left: 0;
    bottom: 0;
}

Micro-note Почему, черт возьми, мой body не начинается с точной вершины страницы, а начинается с нескольких пикселей сверху? Просто спрашивайте.

Ответ 1

Да, большинство тегов, таких как <section>, <header> и <footer>, ведут себя очень похоже на <div>. Они очень подходят вам, чтобы определить, как вы их используете. Однако вы не должны упускать из виду важность использования <div> s, особенно для стилизации. Я видел несколько фреймворков CSS (twitter Bootstrap и Blueprint), которые снабжают вас стилем <div class="container">. Однако для удобства чтения <section>, <footer>, <header>, а также <article> может быть очень полезным.

В любом случае, используйте HTML5, где это возможно и где совместимы, но я считаю, что вы всегда сможете найти полезный и полезный способ использования <div> в вашем веб-коде в наши дни.

Это просто мое мнение.

Я нашел эту ссылку при поиске. Он может пролить свет на проблему лучше, чем я могу. Он указывает несколько различных мест для использования <div> над более новыми тегами HTML5.

Вместо контейнера div вы можете использовать теги <html> или <body>. В этом нет ничего плохого, и это даже может сделать ваш код немного чище. Тем не менее, я лично использую какой-то контейнер. Я нашел этот вопрос, что я считаю, что ответы довольно четко.

Кроме того, тело должно заполнить экран. Если это не так, проверьте свой CSS.

Ответ 2

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

Да, вы всегда можете использовать тело в качестве обертки для контента, но теперь у нас есть элемент main, если это окажется полезным. Хотя элемент html имеет стиль, его довольно ограниченный, но элемент body также является блочным элементом.

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