html - 跨浏览器全 Angular CSS

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 和 body 不需要，除非你使用了导致收缩包装的各种 CSS 声明之一(即 display: inline-block, float: left or position: absolute).请注意，width: 100% 与 block 元素(包括主体)的默认行为并不完全相同 - block 元素占用尽可能多的可用空间，尊重它们的边距、边框和填充，而具有 width: 100% 的任何内容都将与其父元素一样宽 - 任何边距、边框或填充都将超出该范围。