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应用程序的用户界面。