基本上我有點困惑。您將在第二列中看到http://furnace.howcode.com,底部滾動條按鈕稍微延伸到視口的末端之外。我非常困惑,因爲我一直在檢查CSS並找不到任何導致此問題的東西。什麼使得我的頁面稍微超出了視口? [CSS]
你可以看看嗎?這可能很簡單,我剛剛錯過了! :)
截圖:#tabscontainer
元素
hmmm...? http://files.droplr.com/files/49111734/XWqC.hurrr.png
基本上我有點困惑。您將在第二列中看到http://furnace.howcode.com,底部滾動條按鈕稍微延伸到視口的末端之外。我非常困惑,因爲我一直在檢查CSS並找不到任何導致此問題的東西。什麼使得我的頁面稍微超出了視口? [CSS]
你可以看看嗎?這可能很簡單,我剛剛錯過了! :)
截圖:#tabscontainer
元素
hmmm...? http://files.droplr.com/files/49111734/XWqC.hurrr.png
這是因爲使用了上#tabscontainer
一個固定的像素高度但一個百分比#ajaxresults
。調整窗口大小將顯示(或削減)更多的滾動條,因爲90px並不總是10%的視口。
解決此問題的最簡單方法是將#tabscontainer
設置爲height:10%
。
編輯:只是注意到你的評論關於標籤是一個固定的高度。尋找替代解決方案。
好了,找到了解決,雖然我還沒有在IE瀏覽器測試,所以你可能想看看是什麼;)
#col2
一個position:relative
height:90%
,從min-height:90%
和max-height:90%
#ajaxresults
。#ajaxresults
:position:absolute
,top:90px
和bottom:0
。嘗試一下,它應該按預期工作,但就像我說我沒有檢查IE瀏覽器,所以你可能需要做更多的黑客攻擊來讓它在那裏工作。
高度。
#tabscontainer {
background-color:black;
height:90px;
max-width:529px;
min-width:326px;
overflow-x:hidden !important;
width:100%;
}
嘗試:在評論
#tabscontainer {
height:30px;
...
}
後續:
調低#ajaxresults
高度則:
#ajaxresults {
height:70%;
max-height:70%
...
}
我很欣賞這個答案,但#tabscontainer必須是90px的高度,因爲會有一些圖形90px高的選項卡圖像很快會去...... – Jack 2010-05-08 13:38:24
然後您可以減少'#ajaxresults'高度,但是如果您將其設置爲%,它可能會在較小的瀏覽器窗口上再次做同樣的事情 – 2010-05-08 13:57:24
謝謝akamike。真的很感謝你尋找額外的修復。 – Jack 2010-05-08 13:52:56
更新了我的答案,但保留了原始答案,因爲我感覺這些信息與調試問題相關。 – akamike 2010-05-08 14:03:46
BRILLIANT!非常感謝你!這工作完美。偉大的修復。 剛剛在Adobe Browserlab中檢查過(我在Mac上,因此在IE中測試並不容易...) - 它(很明顯)在IE6中失敗。 IE7的作品 - 但超出了滾動條的視口(作品,但不理想)。它在IE8中工作正常。我的目標市場是網頁設計師,所以他們不太可能會使用IE7。 – Jack 2010-05-08 14:09:24