Question

所以继承人My Fiddle

下面是代码，这主要是我总是制作浮动标题的方式。我只是想知道是否有更好的方法，或者对如何做到这一点的新期望。

HTML

<div id="header">
    Header
</div>
<div id="page">
    Content is to be Displayed Here
</div>

CSS

#header {
    height: 50px;
    width: 100%;
    background: #6cc3eb;
    z-index: 990;
    position: fixed;
    top: 0;
    left: 0;
}

#page {
    height: 200px;
    width: 100%;
    margin: 50px 0 0 0;
    background: #ddf2fc;
}

感谢任何帮助。

Answer 1

有时，为了更容易处理内容区域顶部的折叠边距，我将overflow: auto添加到包含的块中：

#page {
    height: 200px;
    width: 100%;
    margin: 50px 0 0 0;
    background: #ddf2fc;
    overflow: auto;
}

这会强制#page启动块格式化上下文，这意味着#page的第一个子元素的任何上边距将位于距页面顶部50px处。根据您的设计，这可能是有利的。

参考：http://www.w3.org/TR/CSS2/visuren.html#block-formatting

请参阅http://jsfiddle.net/audetwebdesign/uvRXZ/

的h1示例

Answer 2

我唯一的改变就是使用HTML5标签

<header>

而不是

<div id="header">

浮标头，有比我更好的方法吗？

2 个答案: