2

我面临重新创建某个网站的挑战，但我不确定创建全宽跨浏览器模板的最佳方法是什么。我将使用 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;
}
4

4 回答 4

2

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

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

通常只有在页面内容很短时要将页脚向下推到屏幕底部时才需要调整高度。你没有要求，所以我不会详细说明。（无论如何，关于该主题的现有 Stack Overflow 问题。）

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

于 2012-05-28T07:42:11.190 回答
0

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

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

于 2012-05-28T04:25:18.030 回答
0

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

于 2012-05-28T06:10:59.027 回答
-1

你也应该这样使用..

#wrapper {
 width:100%; /* or width:990px; */
 height:100%;
 position:absolute;
}
于 2012-05-28T04:30:38.763 回答