未加星标

Hating container divs and trying to use HTML5 way

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2018 | 作者 红领巾 ] 0人收藏点击收藏

I recently started some web programming/designing and I'm facing this problem. In html5 you have these cool tags like section and header and footer and everything.

My first question raises here: do they behave (in a CSS context) exactly like div s?

Moving to a more specific problem, I have to create a website with a simple header -> content (section) -> footer structure ( note: I'm no interested in IE compatibility ). I would like the central section to expand (vertically) as much as it can, until it meets the footer. The "until it meets the footer" part can be achieved through some padding-bottom but what about the "extending as much as possible" part? Note that the footer should stop when, while resizing the page, it meets the section.

I mean, I know with some div s life would be easier, but is it possible that with today standards I still have to wrap the whole page in a <div id="container"> tag? So the second question arises...

Can't I achieve what I would achieve by using both html and body as containers of a div#container by making the html be the html + body part and the body be the div#container ?

I hope my question is clear, I know I tend to digress when I write.

Notefor clarity, I will add my HTML structure and some highlights from my CSS here, but I don't know if they're relevant to the question.

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-notewhy the hell my body doesn't start from the exact top of the page, while starting a few pixels from the top? Just asking.

Problem courtesy of: whatyouhide

Solution

Yes, most tags such as <section> , <header> , and <footer> behave very similarly to <div> 's. They're very much up to you to determine how you use them. However, you shouldn't overlook the importance of using <div> s, especially for styling. I've seen a few CSS frameworks (twitter Bootstrap and Blueprint come to mind) that supply you with a <div class="container"> for styling. For readability though, <section> , <footer> , <header> , and also <article> can be very beneficial.

By all means, use HTML5 where possible and where compatible, but I believe you'll always be able to find a useful and beneficial way of using <div> s in your web code now days.

That's just my opinion.

I found this link when I searched. It may shed some light on the issue better than I can. It points out several distinct places to use <div> s over newer HTML5 tags.

You could use <html> or <body> tags in place of a div container. There's certainly nothing wrong with it, and it may even make your code slightly cleaner. I, personally, always use some sort of container, though. I found this question that I believe answers that pretty clearly.

Also, the body should fill the screen. If it's not, check your CSS.

Solution courtesy of: Brian Phillips

Discussion

The elements you mentioned are block level elements and, as far as styling goes, will behave the same as divs but that's as far as that goes because some of those elements are sectioning elements and, therefore, its contents behave somewhat differently as far as structure goes.

Yes, you could always use the body as a wrapper for content but now we have the main element if that proves helpful. While the html element is styleable, its rather limited, but the body element is also a block element.

divs are still quite useful as they can be used as generic content containers and can thus be used for styling content without disrupting sectioning caused by using something else.

Discussion courtesy of: Rob

This recipe can be found in it's original form on Stack Over Flow .

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

tags: gt,lt,footer,section,content,body
分页:12
转载请注明
本文标题:Hating container divs and trying to use HTML5 way
本站链接:https://www.codesec.net/view/586900.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(46)