跨瀏覽器全寬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

回答

相關問題