用Javascript/Jquery（100％高度Web應用程序）填充剩餘高度

我正在研究一個網絡應用程序，我想讓它感覺像一個實際的應用程序，所以要做到這一點，我想實際的網站填寫瀏覽器高度的100％，並且只有特定的窗格可以滾動，其中一些總是可見的。用Javascript/Jquery（100％高度Web應用程序）填充剩餘高度

下面是一組潛在的窗格模型。在列中將會有由其內容決定的可變高度的窗格，然後是應該填充剩餘空間的可滾動窗格。一些列可能有兩個可滾動的div（但這不是關鍵，我可以有一個具有定義的高度）。固定高度的div可以使用百分比或像素來確定高度。

Layout example http://i41.tinypic.com/jq50qr.png

我的希望是，有一些簡單的jQuery，我可以使用，爲了使滾動窗格中填充剩餘的高度是簡單地添加一個「fillheight」類或簡單的東西那樣。

我已經看到了一些CSS解決方案，但他們需要一個頁眉和一個頁腳，或者他們需要在列中的所有窗格中有很多特定的樣式，因此很難輕鬆地在不同的頁面上創建不同的窗格。在我的情況下，我希望可滾動窗格在任何地方。有可能在頂部，中部或底部，也可能嵌套。

我已經看過腳本Jquery Layout，並且很喜歡它的潛力，但它對我所需要的有點矯枉過正。這將是很好的調整和崩潰，但我真的不需要。此外，腳本似乎不再受支持，並且爲了在商業產品上使用此腳本，我寧願不依賴於舊的，不支持的腳本。最好我寧願有一個簡單的腳本，而不是一個完整的插件/框架。

任何幫助表示讚賞！如果我找到解決方案，我會更新這篇文章。

更新1：

我想我已經找到了一個解決方案，並使用CSS只有在所有。它基於與@crafter鏈接的解決方案。我創建了一個jsfiddle，它顯示了我上面描述的所有用例。關鍵要得到這個工作的

http://jsfiddle.net/8BHM6/4/

部分使用了靜態窗格如下：

.static-pane { 
    position:absolute; 
    width:100%; 
    height: 15%; 
    top:0; 
}

而對於填補剩餘的高度窗格如下：

.fill { 
    width:100%; 
    height:auto; 
    overflow:auto; 
    top:15%; 
    bottom:0; 
}

（注意涉及更多的代碼，請參閱jsfiddle）

它似乎在Chrome和IE 10中工作得很好，但Firefox似乎忽略了溢出：auto我設置了滾動條，導致內容被截斷。任何想法如何讓這個工作在Firefox？

更新2：

我固定Firefox的錯誤。我正在對所有元素應用box-sizing:brder-box，但顯然這不適用於Firefox，所以我必須向他們應用瀏覽器特定版本的-moz-box-sizing:border-box。這解決了所有與Firefox的問題。

更新小提琴：http://jsfiddle.net/8BHM6/6/

更新3：

發現了Safari瀏覽器沒有顯示滾動的div的滾動條問題，使用此代碼風格滾動條，迫使他們表明固定它。請注意，它在Chrome上設置了滾動條的樣式，這實際上是一個很好的外觀。

.fill::-webkit-scrollbar { 
    -webkit-appearance: none; 
    width: 10px; 
} 
.fill::-webkit-scrollbar-track { 
    background-color: rgba(0,0,0, .3); 
    border-radius: 0px; 
} 
.fill::-webkit-scrollbar-thumb { 
    border-radius: 0px; 
    background-color: rgba(255,255,255, .4); 
}

我仍然有一個問題與IE9雖然在哪裏滾動條出現時，他們已經結束了太遠。仍在考慮這一點，但Chrome，Safari，Firefox和Opera現在都在工作。

更新小提琴：http://jsfiddle.net/8BHM6/7/

UPDATE 4：

修正了IE9的bug。 IE9似乎並不喜歡box-sizing:border-box當與溢出結合，所以我加了一個IE9黑客box-sizing:content-box\9;哪些工作。

更新小提琴：http://jsfiddle.net/8BHM6/8/

我貼我的最終解決方案，如下面這個小提琴的簡化版本的答案。

來源

2013-10-11 BlueCaret

回答：stackoverflow.com/questions/25238/100-min-height-css-layout – crafter

@crafter貌似答案的http：//計算器.com/a/5486053/2666062從您鏈接到的問題可能是我正在尋找的。只需要使所有的窗格絕對定位。需要爲此做一些測試。直到我能徹底地測試這個，我仍然對其他解決方案開放。謝謝！ – BlueCaret

我知道它不支持IE 9，但你有沒有考慮過看Flex盒？ http://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

這裏是我想出了，結果只用CSS相當簡單，雖然JavaScript的解決方案將是很好，使之更簡單，很好哦解決方案。

爲了簡化，基本都是下面的代碼得到這個工作：

CSS：

body, html { 
    height:100%; 
    margin:0; 
    padding:0; 
} 
div { 
    box-sizing:border-box; 
    box-sizing:content-box\9; /* Fix for IE9 sizing */ 
    -moz-box-sizing:border-box; /* Fix for firefox */ 
} 
.column { 
    position:absolute; 
    width:100%; 
    min-height:100%; 
    height:auto; 
    overflow:hidden; 
} 
.pane { 
    position:absolute; 
    width:100%; 
    overflow:hidden; 
} 
.fill { 
    height:auto; 
    overflow:auto; 
} 
.top { 
    background:pink; 
    height: 20%; 
    top:0; 
} 
.middle { 
    background:red; 
    top:20%; 
    bottom:50px; 
} 
.bottom { 
    background:orange; 
    height: 50px; 
    bottom:0; 
} 

/* Fix for Safari scrollbars (also styles Chrome scrollbars) */ 
    .fill::-webkit-scrollbar {-webkit-appearance: none;width: 10px;} 
    .fill::-webkit-scrollbar-track {background-color: rgba(0,0,0, .3);border-radius: 0px;} 
    .fill::-webkit-scrollbar-thumb {border-radius: 0px; background-color: rgba(255,255,255, .4);}

HTML：

<div class="column"> 
    <div class="pane top">Top</div> 
    <div class="pane middle fill">Middle</div> 
    <div class="pane bottom">Bottom</div> 
</div>

的jsfiddle：http://jsfiddle.net/xY3jr/3/

對於這個複雜的版本，你可以看看這個的jsfiddle：http://jsfiddle.net/8BHM6/8/

來源

2013-10-14 17:19:14 BlueCaret

用Javascript/Jquery（100％高度Web應用程序）填充剩餘高度

回答

相關問題