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

Web应用程序UI - 具有100％高度的布局

3 个答案: