Question

我遇到了重新创建某个网站的挑战，但我不确定创建全宽跨浏览器模板的最佳方法是什么。我将使用HTML 5，到目前为止我有：

我只使用100％的宽度吗？

HTML

<div id="wrapper">
    <header>
        <h1>Logo Position</h1>
        </header>

CSS：

#wrapper{
    width:990px;
    height:100%;
    min-height:100%;
    background:#000;
}
header{
    width:100%;
    height:100px;
    color:#184C82;
}

Answer 1

一般来说，您可以忽略宽度（即，不将其设置在任何位置，或者如果先前由您无法控制的东西设置，则将其设置为auto），它将默认为完整宽度...边缘周围有一个小边距。如果您希望该边距消失（跨浏览器），则需要在body和html上将边距和填充设置为0：

body, html {
    margin: 0;
    padding: 0;
}

如果您希望在页面内容较短时将页脚向下推到屏幕底部，则通常只需要与高度混淆。你没有要求，所以我不会详细说明。（无论如何，该主题都存在Stack Overflow问题。）

某些元素 - 尤其是表格 - 确实需要width: 100%声明，但div和正文不需要，除非您使用了导致收缩包装的各种CSS声明之一（即display: inline-block，{ {1}}或float: left）。请注意position: absolute与块元素（包括正文）的默认行为不完全相同 - 块元素占用尽可能多的空间，尊重边距，边框和填充，而任何{{1}将与其父元素一样宽 - 并且任何边距，边框或填充都将超出其范围。

Answer 2

将<header>宽度设置为100%只会使其为父级的宽度990px。如果您希望将其扩展到视口宽度的100％，则需要将其从包装中取出，使用absolute或fixed定位，或使用:before和/或:after给人的印象是它是视口的宽度。

Chris Coyier在他的文章 Full Browser Width Bars 中演示了最后一种方法。

Answer 3

只需在标题上使用width:100%，然后删除包装器。使用<body>作为父元素，将布局的单独部分构建为单独的DIV。你会变成金色的！

Answer 4

你也应该这样使用..

#wrapper {
 width:100%; /* or width:990px; */
 height:100%;
 position:absolute;
}

跨浏览器全宽CSS

4 个答案: