我见过一些应用程序消耗了浏览器窗口的所有可用空间，但浏览器窗口上没有任何滚动条，但特定 div 有滚动条（例如，jsfiddle，它使用 html、css、javascript 和结果 div 的滚动条但是没有浏览器窗口滚动条）。我正在尝试为我的应用程序开发这样的布局，我尝试了一些关键字，如应用程序样式 UI、100% 高度宽度布局、流体布局，但它们似乎都没有返回所需的结果。请原谅我，但作为一个初学者，我不得不问这个。这种布局是否有特定的术语。我确实遇到了一些技术和 jquery 插件来实现这一点，但仍然想知道什么是最好的方法。非常欢迎提供链接建议。
【问题讨论】：
看看这篇博文。上面选择的答案对于全屏 Web 应用程序 UI 来说有点过于简单了。
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
一些基本的 CSS 让您在构建全屏、100% 高度或任何您想称呼它的 Web 应用程序 UI 方面取得很大进展。
【讨论】：
也许这可以帮助我理解你：
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;
}
【讨论】：
这是非常基本的东西。
首先你要在CSS中设置html,body的height属性
html, body {
height:100%;
overflow:hidden;
}
overflow 到 hidden 将隐藏窗口的滚动条。
然后您在 HTML 中定义一个 div 并为该 div 分配一个类名，例如 .foo
.foo {
height:400px;
overflow:auto;
}
通过将 overflow 设置为 auto，您的 div 将负责其内容的滚动。
【讨论】：