如何防止瀏覽器窗口中的設計被切斷？

當瀏覽器隱藏了一些設計（意味着滾動條出現）時，頁眉和頁腳被切掉。換句話說，如果瀏覽器的寬度小於「logo」和「footer_links」div的寬度，那麼如果用戶水平滾動查看頁面的其餘部分，它將切斷右側。似乎這個問題源於試圖在頁眉或頁腳內定位（相對或絕對）div。如何防止瀏覽器窗口中的設計被切斷？

這裏的CSS：

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#container { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    background:green; 
    padding:0px; 
    margin: 0; 
    height: 100px; 
} 
#logo { 
    position: relative; 
    width: 900px; 
    margin: 0 auto; 
    left: 20px; 
    background: yellow; 
    height: 70px; 
} 
#body { 
    padding:10px; 
    padding-bottom:60px; 
} 
#footer { 
    position:absolute; 
    bottom:0; 
    width:100%; 
    height:60px; 
    background: blue; 
} 
#footer_links { 
    width: 900px; 
    height: 60px; 
    background: yellow; 
    margin: 0 auto; 
}

這裏的HTML：

<div id="container"> 

<div id="header"> 
    <div id="logo"> 
    </div> 
</div> 

<div id="body"> 
</div> 

<div id="footer"> 
    <div id="footer_links"> 
    </div> 
</div> 

</div>

我認爲溢出：可見可以解決這個問題，但事實並非如此。我怎樣才能避免這個問題？

在此先感謝您的幫助。

來源

2011-06-14 David

嘿大衛，你有這個問題的網站鏈接？ – Brian 2011-06-14 01:55:47

您是否詢問訪問者瀏覽器窗口寬度是否小於900px（「徽標」的寬度），如何讓徽標調整大小以適應？ – Marcel 2011-06-14 01:56:44

@Brian - 沒有鏈接到一個實時網站（我只是在本地開發它），但你可以看到，這個網站有一個類似的問題：https://www.hellofax.com/在這種情況下，儘快當您將瀏覽器窗口的大小調整爲更窄的寬度時，會出現一個水平滾動條，如果您然後水平滾動頂部和底部導航被切斷。 – David 2011-06-14 06:22:53

這應該滿足您的需求

的CSS：

html,body { margin:0; padding:0; height:100%} 
#container {min-height:100%;position:relative;} 
#header { background:green;padding:0px; margin: 0; height: 100px;} 
#logo { position: relative; width: 900px; margin: 0 auto; 
     background: yellow; height: 70px;} 
#body { padding:10px 0 60px; margin:0 auto; 
     width:900px; background:red; /*add a height*/ } 
#footer {margin:0;bottom:0;width:100%;height:60px; background: blue;} 
#footer_links {width: 900px;height: 60px;background: yellow;margin: 0 auto;}

的HTML：

<div id="container"> 
<div id="header"> 
<div id="logo"> </div> 
</div> 
<div id="body"> </div> 
<div id="footer"> 
<div id="footer_links"> </div> 
</div> 
</div>

希望它能幫助。

來源

2011-06-14 02:18:25 Sparkup

謝謝 - 看起來儘管如此，即使採用這種解決方案，當您縮小窗口大小時，如果水平向後滾動，您會看到標題的綠色區域被切斷。換句話說，一旦您的瀏覽器窗口變得比標識的寬度更窄（以黃色），則標題的其餘部分將在瀏覽器窗口處被剪切，而不會擴展100％的寬度。 – David 2011-06-14 06:30:26

一個選項，如果您知道#header的高度，則使用與#header相同的顏色和高度的圖像，並將其用作body的背景圖像。

演示：jsfiddle.net/DRF23

來源

2011-06-14 21:52:24 Marcel

感謝馬塞爾 - 我嘗試過，但它仍然不是最佳的，特別是如果你需要一個單獨的背景圖像的身體。 – David 2011-06-15 23:26:33

@David：在這種情況下，'html'元素可用於單獨的背景，但我同意，除非'＃header'將成爲靜態高度，否則它不是最優的，在這種情況下，它就是解決方案。 – Marcel 2011-06-15 23:59:02

這爲我工作：

html, body { 
    position:relative; 
    overflow:hidden; 
    margin:0 auto !important; 
}

來源

2012-06-26 13:02:59 Davis

這裏我只是遇到了一個解決方案 - 應用最小寬度爲主體元素。所以，如果你的網站至少是960像素跨越：

body { 
    min-width: 960px; 
}

這顯然是可行的，因爲100％的寬度將是瀏覽器的寬度，如果你的內容遠不只這一點，背景仍然是固定的到身體的寬度。

來源

2014-03-19 18:04:17

如何防止瀏覽器窗口中的設計被切斷？

回答

相關問題