無法在Webkit中使屏幕的div填充寬度（Chrome和Safari）

我有一個div，我想用作頁面頁腳，並使其填充整個頁面寬度。到目前爲止，如此簡單，你會想。而且，它在Firefox和IE中。無法在Webkit中使屏幕的div填充寬度（Chrome和Safari）

不幸的是，在兩個主要的webkit瀏覽器中，儘管我的頁腳（#footer）設置爲width:100%; max-width:none;，但webkit不會填充瀏覽器窗口的寬度。

的頁面是在這裏：page demonstrating problem

發生了什麼事？任何解決方案

編輯：道歉所有 - 當我說它在Safari中工作，這是一個錯字 - 我的意思是Firefox。

屏幕截圖：

這是工作在IE： Working correctly in IE

在這裏它是在瀏覽器（在Safari相同的行爲）被打破。爲了強調，箭頭是手繪的。 Broken rendering in Chrome

來源

2011-04-19 Marcin

它是'寬度：100;'或'寬度：100％'？不過，我在Chrome上測試了你的網站，它在那裏工作。 – 2011-04-19 16:58:27

同樣在這裏。屏幕截圖會很好（你主要是指webkit瀏覽器的主要用途是什麼？Safari是webkit，Chrome也是如此，所以webkit似乎工作正常）。 – Blender 2011-04-19 17:00:59

Naveed - 道歉 - 這是100％（省略％是錯誤的問題）。 – Marcin 2011-04-19 18:54:27

事實證明，以下行，沒有註釋，是導致問題：

#footer { position: fixed; bottom:0; left: 0; /*max-width: 11400px; max-width: none; width: 11400px;*/ width: 100%; height:75pt;}

出於某種原因的WebKit看到max-width: 11400px; max-width: none; width: 11400px;和寬度設置爲類似半個屏幕尺寸。

來源

2011-04-21 20:58:58 Marcin

你有一個錯字：width:100%;

編輯：錯字現在似乎是固定

來源

2011-04-19 16:54:31 ninjagecko

不在我的CSS，但。 – Marcin 2011-04-19 16:56:53

您的問題也許在於頁腳與position:設置爲任何一些父元素。這創建了所謂的堆疊上下文。如果您將腳註放入主體或整個視口大小的元素中，那麼100％將確實爲視口的100％。

編輯：顯然這不是你的答案，只是在99％的情況下通常會得到答案，所以我把它作爲參考。

來源

2011-04-19 16:59:25 ninjagecko

很酷，謝謝你。 – Marcin 2011-04-19 18:55:13

我運行Chrome，它對我來說工作正常。你可以張貼截圖嗎？

除此之外，你的內容是有點過了，所以這裏應該是一個修正：

#body-row { 
    padding-left: 200px; 
}

來源

2011-04-19 17:00:12 Blender

-1

上#footer的position:fixed是造成這一點。

您是否在Firefox中使用Firebug？這將有助於您更快速地進行調試。另外，考慮將960gs這樣的框架與Paul Irish的HTML5 Boilerplate一起作爲構建的基礎。

來源

2011-04-19 17:14:44

它在firefox和IE中運行得很好，我想'position：fixed'行爲。我絕對不想使用固定寬度的佈局，甚至不使用具有最大寬度的「流動」佈局。 – Marcin 2011-04-19 18:46:32

960gs有一個沒有最大寬度的流體選項 - 你可以在容器中添加一個'position：fixed'。 HTML5 Boilerplate有助於將所有瀏覽器重置爲標準CSS，這有助於避免跨瀏覽器錯誤，以及許多其他最佳實踐內容。你不需要解決這個問題，但是你可能會發現它加快了你的開發時間。 – 2011-04-19 18:55:22

在

#footer { 
max-width:none; 
}

這不是一個有效的減速，因爲它是無效的，它是由

.row { 
max-width: 1140px; 
}

覆蓋解決

：

變化

#footer{ 
max-width:100% 
}

完成！

來源

2011-04-22 09:06:54 Tarun

無是max-width的有效值：http://www.w3.org/TR/CSS21/visudet.html#propdef-max-width – Marcin 2011-04-23 14:21:51

無法在Webkit中使屏幕的div填充寬度（Chrome和Safari）

回答

相關問題