Web應用程序用戶界面 - 100％高度的佈局

Question

我已經看到了瀏覽器窗口中沒有任何滾動條而是瀏覽器窗口中的所有可用空間的應用程序，但滾動條爲特定的div（例如，jsfiddle，它使用滾動條HTML，CSS，JavaScript和結果div，但沒有瀏覽器窗口滾動條）。我試圖爲我的應用程序開發這樣的佈局，並且我嘗試了一些關鍵字，例如應用程序樣式UI，100％高度寬度佈局，流體佈局，但沒有一個似乎返回期望的結果。請原諒我，但作爲初學者，我不得不問這個。是否有這種佈局的特定術語。我遇到過很少的技術和jQuery插件來實現這一點，但仍然想知道最好的方法是什麼。鏈接建議比歡迎。

Answer 1

這是非常基本的東西。

首先，你必須在CSS

html, body { 
    height:100%; 
    overflow:hidden; 
} 

的溢出設置HTML，身體的高度屬性隱藏將隱藏你的窗口滾動條。

然後你在你的HTML定義一個div並分配股利一個類名像包含.foo

.foo { 
    height:400px; 
    overflow:auto; 
} 

通過設置溢出到汽車，你的DIV將採取滾動的護理它的內容。

請看：http://jsfiddle.net/mXU3f/

Answer 2

也許這可以幫助我understaind你：

HTML：

<div id="container"> 
<div class="box"> 
    <p> 
     "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?" 
    </p> 
    </div> 
</div> 

CSS：

 #container { 
     display:block; 
     position:absolute; 
     height: auto !important; 
     bottom:0; 
     top:0; 
     left:0; 
     right:0; 
     background-color:red} 

.box { 
    margin:50px; 
    height: 200px; 
width: 200px; 
position:relative; 
background-color:green; 
overflow-y: scroll; 
} 

Answer 3

看看這個博客帖子。上面選擇的答案對於全屏Web應用程序UI來說有些過於簡單。

http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/

一些基本的CSS讓你很遠在構建全屏幕，100％的高度，或者隨便你怎麼稱呼它，Web應用程序的用戶界面。