跨浏览器全宽CSS

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

我只是使用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; 
}

来源

2012-05-28 Jess McKenzie

这不行吗？ – Blender

-1

你也应该使用这样的..

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

来源

2012-05-28 04:30:38

你为什么给位置：绝对？ – sandeep

强制完全控制高度 –

这是在绝对位置创建整个布局的错误方法。 – sandeep

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

Chris Coyier在他的文章Full Browser Width Bars中证明了这种最后的方法。

来源

2012-05-28 04:25:18 Sampson

的头只需使用width:100%，然后取出包装。使用<body>作为父元素，将布局的各个部分构建为单独的DIV。你会是金的！

来源

2012-05-28 06:10:59 Nathanael

一般来说，你可以忽略宽度（也就是说，不要将它设置在任何地方，或者将其设置为auto，如果它以前由你不控制的东西设置的话），它将默认为全宽。。边缘周围有一个小的空白。如果你想要的保证金去（跨浏览器），你需要在两个margin和padding两个body和html设置为0：

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

与高度梅辛一般只需要，如果你想要把一个页脚当页面内容很短时，直到屏幕底部。你没有要求，所以我不会详细说明。（无论如何，关于该主题存在堆栈溢出问题。）

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

来源

2012-05-28 07:42:11 Brilliand

@Brian你现身。一旦body和html标签设置为如此 'body，html {margin：0;填充：0; }' 然后标题，侧边栏页脚等可以方便地使用％，如100％，30％ – Damilola

跨浏览器全宽CSS

回答

相关问题