爲什麼這個CSS在Firefox中不起作用？

我花了幾個小時試圖解決這個問題 - 所以現在是時候提問了。爲什麼這個CSS在Firefox中不起作用？

有人告訴我的東西有height: x%（高度百分比）它的父需要有一個高度，如同它的父等

因此，這裏是我的結構：

html 
    body 
    div#wrapper 
     div#viewer_wrapper 
     iframe#viewer

而且這裏的一些應用CSS：

html, body{ 
    height: 100%; 
} 
#wrapper{ 
    min-height: 100%; /*it's this that seems to trip me up - a fixed height works for the problem, but not for the layout obviously*/ 
    position: relative; 
} 
#viewer_wrapper { 
    height: 100%; 
    position: relative; 
} 
#viewer { 
    width: 100%; 
    height: 96%; 
}

Chrome是很聽話的 - 即使沒有height:100% on #viewer_wrapper，我沒有問題。但在Firefox和IE瀏覽器中，iframe拒絕佔用屏幕高度的96％（我想要的）。我甚至嘗試過大量的JS修復，所有這些都導致不僅醜陋的代碼，而且不好的副作用。

感謝您的任何幫助。

來源

2013-03-01 stackunderflow

嘗試創建一個[小提琴]（http://jsfiddle.net），使人們可以測試出來。 – Passerby 2013-03-01 08:06:12

@Passerby由於這是一個問題，需要您在整個頁面中打開網站，因此只需輸入網址即可。 – stackunderflow 2013-03-01 08:11:47

是正確的網址？ – abhijit 2013-03-01 08:21:50

在我看來，你想要做的是將你的#wrapper分成兩部分。

包含除#viewer_wrapper之外的所有內容的頂部部分應具有其自然高度。包含#viewer_wrapper的底部部分應該具有高度：100％。

HTML

<div id="wrapper"> 
    ... 
</div> 
<div id="wrapper2">  
    <div id="viewer_wrapper"> 
     ... 
    </div> 
</div>

CSS

#wrapper2 { height:100%; } 
#wrapper, #wrapper2 { 
    width:70%; 
    position:relative; 
    padding:4px 10px; 
    margin:0 auto; 
    background:whiteSmoke; 
    border-left:2px solid black; 
    border-right:2px solid black; 
    -webkit-box-sizing:border-box; -moz-box-sizing:border-box; 
    box-sizing:border-box; 
}

來源

2013-03-01 09:15:20

非常感謝！我很驚訝如何挑戰這樣一個簡單的任務被證明是 - 但你的解決方案是合乎邏輯的。 – stackunderflow 2013-03-01 19:43:10

CSS中的S都不代表「簡單」...：P – 2013-03-01 22:37:53

是的，它的父母需要有一個height，而不是min-height。

來源

2013-03-01 07:59:21 reisio

如何在不破壞佈局的情況下實現這一目標？ – stackunderflow 2013-03-01 08:00:42

我還沒有看到你的佈局，但可能通過用高度替換#wrapper的最小高度。 – reisio 2013-03-01 08:01:13

只有'高度：100％;'確實打破了我的佈局。我的網站的網址位於問題的底部。 – stackunderflow 2013-03-01 08:02:30

正如我剛纔瞭解正是你想做的事，你可以使用這樣的事情：

<div id="viewer_wrapper"> 
    <div id="top">Something on the top</div> 
    <iframe></iframe> 
</div>

這個CSS：

#viewer_wrapper { 
    position: absolute; 
    z-index: 100; 
    width: 100%; 
    top: 200px; /* Some number that fits to the content on the top. */ 
    bottom: 0; 
}

對於我來說它的工作原理，無論是100％身高和96％身高。但一般來說，最好不要使用min-height。改爲使用height和overflow: visible;。並注意padding s和margin s可能不同，因此將它們設置爲一個值（可能爲0）。

另外height的body是讓您的網頁內容像背景一樣只在上面顯示的原因。

來源

2013-03-01 08:07:29 Sheric

*嘆息*'身高：100％; overflow：visible;'on'＃wrapper'修復了這個問題，但是破壞了我的佈局。爲什麼這麼難！ – stackunderflow 2013-03-01 08:09:50

這並不難。這是網頁設計的主要挑戰，使您的標記在所有瀏覽器中都能正常工作。你有沒有嘗試添加一個'overflow：visible;'並且這也打破了你的佈局？如何，確切地說，它會擾亂你的佈局？ – Sheric 2013-03-01 08:19:21

因爲如果將'min-width：100％'更改爲'width：100％'，當向下滾動時，頁面內容後面的白色背景消失。 – stackunderflow 2013-03-01 08:24:23

沒有必要將最小高度設置爲100％，這沒有任何意義。

相反，你會使用最小/最大高度是這樣的：當由內容被迫使用這種方式

#wrapper{ 
    min-height:50%;max-height: 100%; 
    position: relative; 
}

相對高度/寬度只佔用的大小。即它們將佔用最小高度，除非內容物擴大容器，否則它將擴大到最大高度值。你已經提到的解決方案是設置一個固定的高度，例如100％。

這裏有一個撥弄相對值，http://jsfiddle.net/zB2Za/ 與修復http://jsfiddle.net/zB2Za/2/

小提琴如果你想要的網頁內容「填充」整個頁面，則對身體margin和padding設置爲0，這在第二個小提琴中顯示。

來源

2013-03-01 08:10:05 lukeocom

對於我的佈局，我希望'＃wrapper'佔據整個頁面，否則它看起來不正確。 – stackunderflow 2013-03-01 08:10:58

設置高度爲100％做到這一點。如下所示http://jsfiddle.net/zB2Za/2/ – lukeocom 2013-03-01 08:13:23

但是，如果頁面大於視口的100％，那麼它就會中斷。如果你去我的網站，在你的開發工具中'＃wrapper'的'min-width：100％'改爲'width：100％'，然後向下滾動，你會明白我的意思。 – stackunderflow 2013-03-01 08:21:53

爲什麼這個CSS在Firefox中不起作用？

回答

相關問題