另一個HTML/CSS版式挑戰

我一直在試圖弄清楚這個問題的解決方案，但並沒有100％成功，只是僞成功。我正在尋找的佈局是這樣的：無論內容的高度如何，頁面的頂部和底部都總是有一個固定的填充/邊距/高度。另一個HTML/CSS版式挑戰

此外，內容的高度應在填充後立即從頁面頂部開始，並在填充前到達頁面底部。如果內容的高度不夠大，則應跨越整個頁面。如果它大於頁面的高度，滾動條應該顯示爲正常情況，但頂部/底部填充需要保留。

要查看我的僞解決這個的一個例子，看看這個小提琴...

http://jsfiddle.net/UnsungHero97/uUEwg/1/ ...高度不夠大
http://jsfiddle.net/UnsungHero97/uUEwg/8/ ...高度過大

我的解決方案的問題是，如果有一個背景圖像，它將被覆蓋在填充位置。那麼如何擴展我的解決方案，以便在存在背景圖像的情況下，在頂部/底部填充位置處仍然可見？我寧願這是一個HTML/CSS唯一的解決方案，這是什麼讓這真的很難！

讓我知道我是否需要澄清任何事情。

來源

2011-04-24 Hristo

我想出了這一點：

http://jsfiddle.net/bKsad/

由於使用的box-sizing: border-box，它不會在IE7和更早的版本。
它應該適用於所有現代瀏覽器。
您可以用#content:after替換#padding-bottom。雖然IE8，但我不能得到它的工作。

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 
body { 
    background: url(http://dummyimage.com/100x100/f0f/fff); 
} 

#wrapper { 
    margin: 0 auto; 
    width: 300px; 
    height: 100%; 
    padding: 15px 0; 

    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#content { 
    background-color: #C9E6FF; 
    min-height: 100%; 
} 
#padding-bottom { 
    height: 15px; 
}

HTML：

<div id="wrapper"> 
    <div id="content"> 
     <p>some content</p> 
     <p>some content</p> 
     <p>some content</p> 
    </div> 
    <div id="padding-bottom"></div> 
</div>

來源

2011-04-24 02:20:38 thirtydot

@thirtydot ...做得很好。介意解釋盒子尺寸是什麼？ – Hristo 2011-04-24 02:47:32

我的答案中的鏈接有更多細節，但就我的解決方案而言，它包括'height：100％'內的'15px'的'padding-top'和'padding-bottom'。另見：http://jsfiddle.net/frWMV/ – thirtydot 2011-04-24 02:53:10

@thirtydot ...哦，我沒有看到你的鏈接在答案:)謝謝你！所以你知道沒有盒子大小的方法嗎？我不特別關心IE 7和以下，但其他人可能 – Hristo 2011-04-24 02:55:38

這也許就是你以後=>http://jsfiddle.net/Husar/uUEwg/24/？

來源

2011-04-24 02:18:19 Maverick

@Husar ......不，我不希望內部滾動條。 – Hristo 2011-04-24 02:21:58

此問題的最好的和簡單的解決方案是這一個。在這種情況下需要兩個高峯：

視窗高度

側邊欄導航高度

然後檢查窗口的高度小於格，那麼你就需要增加內容區域
的高度

$(document).ready(function() { 
    var navh = $(".side-nav").height();//ide-nav 
    var h = window.innerHeight; 
    if (navh >h){ 
     $("#mainBody").height(navh); 
    } 
})

來源

2015-02-16 23:38:20

另一個HTML/CSS版式挑戰

回答

相關問題