我想创建一个占据整个屏幕高度的页面(没有滚动条),但在其中有一个可滚动的容器。我尝试过使用百分比高度,但每次百分比在彼此内部使用时都不起作用。
这是我想要做的一个例子。我尝试了很多其他版本,但都没有。
HTML
<body>
<div id="pageheader">
<h1>Header</h1>
</div>
<div id="container">
<div id="header">
<h2>Section header</h2>
<p>Header text</p>
</div>
<div id="overflower">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</body>
CSS
body {
height: 100%;
background: red;
}
#container {
height: 100%;
background: green;
}
#overflower {
overflow: auto;
height: 100%;
background: blue;
}
overflower
div应该是可滚动的,而页面的其余部分保持静态,占据屏幕的整个高度。
答案 0 :(得分:0)
嵌套百分比高度长期以来一直是CSS 2的问题。值得庆幸的是,CSS 3带来了一个有价值的工具,可以用来解决这个问题(和类似的问题)一劳永逸:flexboxes。
这个想法很简单:flexboxes允许开发人员定义一个部分如何增长或缩小,具体取决于它可用的空间,在这种情况下,可以用来定义overflower
div应该得到多少它可以在其父级内部设置空间,设置为在其父级内占用尽可能多的空间......一直到body
(设置为占据整个屏幕高度)。< / p>
<强> HTML 强>
<body>
<div id="pagecontainer">
<div id="pageheader">
<h1>Header</h1>
</div>
<div id="container">
<div id="header">
<h2>Section header</h2>
<p>Header text</p>
</div>
<div id="overflower">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
</div>
</div>
</body>
<强> CSS 强>
body {
height: 100%;
margin: 0;
padding: 0;
}
#pagecontainer {
display: flex;
flex-direction: column;
background: red;
height: 100%;
}
#pageheader {
flex: none;
}
#container {
display: flex;
flex-direction: column;
flex: auto;
background: green;
}
#header {
flex: none;
}
#overflower {
overflow: auto;
flex: auto;
background: blue;
}
不幸的是,jsfiddle在处理body
时遇到了一些奇怪的事情,所以测试它的唯一方法就是创建一个单独的HTML文件。请注意包含div id="pagecontainer
- 这是应用display: flex
所必需的。如果在overflow
div和body
之间堆叠更多元素,请确保将3个flex属性应用于每个元素!