Div放置100％高度

Question

目前我遇到麻煩讓我的佈局跨瀏覽器工作。在附加的圖像中，您可以看到預覽。

height: 100%; 

一些信息：

• 格的#header
  • 寬度：100％
  • 高度：可變
• DIV #Sidebar（溢出-Y）
  • 寬度：300px
  • 高度：100％減去報頭+報尾高度
• DIV #frameHeader
  • 寬度：100％減去側邊欄寬度（300像素）
  • 高度：100％減去報頭+報尾高度
• IFRAME #iframe（溢出-Y）
  • 寬度：100％減去側邊欄寬度（300像素）
  • 高度：100％減去報頭+報尾+ frameheader高度
• DIV #Sticky頁腳（粘到底ofcourse）
  • 寬度：100％
  • 高度：可變

我花了無數小時試圖讓這個工作，我以爲有人應該面對這個問題嗎？我希望有人能夠給我一個工作的跨瀏覽器的例子！

當前代碼：http://jsfiddle.net/s6wVw/（醜陋的CSS，但我想你明白了吧;））

附件（預覽）可以在下面

preview image

Answer 1

在你的問題中找到你繼續作出虛假陳述並且與自己相矛盾（例如，你正在談論粘性頁腳，但是你也意味着頁面不滾動 - 所有元素的高度總和爲100％）。不過，我會盡力幫你解決問題。

至於原因如上所述，我做了以下假設：

1. 你想要的主要領域（頁眉，頁腳，側邊欄，幀頭，幀體）的尺寸總是總和至100％
2. 你不希望瀏覽器滾動
3. 要在側欄和幀體滾動如果內容溢出

以上將導致一個糟糕的網站設計，因爲如果瀏覽器/窗口大小爲< = 300px寬，那麼你將無法看到任何框架等。同樣，如果browser/window height <= foot height + head height那麼你不會請參閱sidebar,frame head或frame body中的任何一個。

這就是說，這裏是一個使用jQuery,html和css的例子。

CSS

html, body{ 
    margin:0; padding:0; border:0; 
    color:#fff; 
} 
#head{ 
    width:100%; 
    background:#aaa; 
} 
#body{ 
    width:100%; 
} 
    #sidebar{ 
     display:inline-block; 
     width:300px; height:100%; 
     background:#111; 
     vertical-align:top; 
     overflow:scroll; 
    } 
    #frame{ 
     display:inline-block; 
     vertical-align:top; 
     height:100%; 
    } 
     #fhead{ 
      width:100%; 
      background:#333; 
     } 
     #fbody{ 
      width:100%; 
      background:#777; 
      overflow:scroll; 
     } 
#foot{ 
    position:fixed; 
    top:100%; 
    width:100%; 
    background:#aaa; 
} 
h1{margin:0; padding:10px;} 

jQuery的

function setSizes(){ 
     var docWidth = $(window).width(); 
     var docHeight = $(window).height(); 
     var headHeight = $('#head').height(); 
     var footHeight = $('#foot').height(); 
     var bodyHeight = docHeight - headHeight - footHeight; 
     var fHeadHeight = $('#fhead').height(); 

     $('#body').css({ 
      height: bodyHeight 
     }) 
     $('#sidebar').css({ 
      height: bodyHeight 
     }) 
     $('#frame').css({ 
      width: docWidth - 300 
     }) 
     $('#fbody').css({ 
      height: bodyHeight - fHeadHeight 
     }) 

     $('#foot').css({ 
      "margin-top": -footHeight 
     }) 
    } 
$(function(){ 
    setSizes(); 

    var doit; 
    $(window).resize(function(){ 
     setSizes(); 
     setSizes(); 
    }) 
}) 

HTML

<div id="head"><h1>Head Section</h1><br><br><br><br></div> 
<div id="body"> 
    <div id="sidebar"><h1>Side Bar</h1> 
    </div><div id="frame"> 
     <div id="fhead"><h1>Frame Head</h1><br><br></div> 
     <div id="fbody"><h1>Frame Body</h1></div> 
    </div> 
</div> 
<div id="foot"> 
    <h1>Foot Section</h1><br> 
</div> 

NOTES

1. 你可以把你下面的div裏面喜歡的任何內容：#head，#sidebar，#fhead，#fbody，#foot
2. 的jQuery兩次運行setSizes();功能上的窗口大小調整。這是考慮到你在divs