html - Web 应用程序 UI - 100% 高度的布局

Question

我已经看到应用程序占用了浏览器窗口的所有可用空间，但浏览器窗口上没有任何滚动条，但有特定 div 的滚动条（例如，jsfiddle，它使用 html、css、javascript 和结果 div 的滚动条但没有浏览器窗口滚动条）。我正在尝试为我的应用程序开发这样的布局，并且我尝试了一些关键字，例如应用程序样式 UI、100% 高度宽度布局、流体布局，但它们似乎都没有返回所需的结果。请原谅我，但作为一个初学者，我不得不问这个。这种布局是否有特定的术语。我确实遇到了一些技术和 jquery 插件来实现这一点，但仍然想知道最好的方法是什么。链接建议非常受欢迎。

Answer 1

这是非常基本的东西。

首先，您必须在 CSS中设置html、body的 height 属性

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

隐藏的溢出将隐藏窗口的滚动条。

然后在 HTML 中定义一个 div 并为 div 分配一个类名，如.foo

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

通过将溢出设置为auto，您的 div 将负责其内容的滚动。

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

Answer 2

看看这篇博文。上面选择的答案对于全屏 Web 应用程序 UI 来说有点过于简单了。

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

一些基本的 CSS 可以让您在构建全屏、100% 高度或任何您想称呼它的 Web 应用程序 UI 方面走得更远。

Answer 3

也许这可以帮助我理解你：

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;
}