使div填充剩余屏幕空间的高度
Vin*_*abb 1743 html css html-table
我正在开发一个Web应用程序,我希望内容能够填满整个屏幕的高度.
该页面有一个标题,其中包含徽标和帐户信息.这可以是任意高度.我希望内容div将页面的其余部分填充到底部.
我有标题div和内容div.目前我正在使用表格进行布局,如下所示:
CSS和HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>页面的整个高度都已填满,无需滚动.
对于内容div中的任何内容,设置top: 0;将把它放在标题下面.有时内容将是一个真实的桌子,其高度设置为100%.放在header里面content不会允许这个工作.
有没有办法在不使用的情况下达到相同的效果table？
更新:
内容中的元素div也将高度设置为百分比.因此,100%内部的东西div将填充到底部.两个元素也是50%.
更新2:
例如,如果标题占据屏幕高度的20%,则内部指定为50%的表#content将占用屏幕空间的40%.到目前为止,将整个事物包装在表中是唯一有效的方法.
Peb*_*bbl 969
2015年更新:flexbox方法
还有两个简单提及flexbox的答案; 然而,这是两年多以前的事了,他们没有提供任何例子.flexbox的规范现在已经确定.
注意:尽管CSS Flexible Boxes Layout规范处于候选推荐阶段,但并非所有浏览器都实现了它.WebKit实现必须以-webkit-为前缀; Internet Explorer实现了旧版本的规范,前缀为-ms-; Opera 12.10实现了最新版本的规范,没有前缀.有关最新的兼容性状态,请参阅每个属性的兼容性表.
(取自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)
所有主流浏览器和IE11 +都支持Flexbox.对于IE 10或更早版本,您可以使用FlexieJS垫片.
要查看当前支持,您还可以在此处查看:http: //caniuse.com/#feat=flexbox
工作实例
使用flexbox,您可以轻松地在具有固定尺寸,内容大小尺寸或剩余空间尺寸的任何行或列之间切换.在我的示例中,我已将标题设置为与其内容对齐(根据OPs问题),我添加了一个页脚以显示如何添加固定高度区域,然后设置内容区域以填充剩余空间.
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>在上面的CSS中,flex属性缩短了flex-grow,flex-shrink和flex-basis属性,以确定flex项的灵活性.Mozilla 对柔性盒模型有很好的介绍.
- 肯定这是一个非常好的方法,它几乎可以工作;)当div.content的内容超过原始的弹性高度时,有一个小问题.在当前的实现中,"页脚"将被推低,这不是开发人员期望的;)所以我做了一个非常简单的修复.https://jsfiddle.net/przemcio/xLhLuzf9/3/我在容器和溢出滚动上添加了additioal flex. (41认同)
- 这是对flexbox的浏览器支持 - 很高兴看到所有这些绿色 - http://caniuse.com/#feat=flexbox (10认同)
- @przemcio很好,但我不认为可滚动内容是每个开发人员所期望的;) - 你应该只需要将`overflow-y:auto`添加到`.row.content`来实现你所需要的. (9认同)
- 为什么在`box .row`中的`flex:0 1 30px;`属性,因为它在每个div中都被覆盖了？ (8认同)
- 如果你把100vh放在.box上似乎工作. (8认同)
- 有趣的是，这个解决方案不适用于我的情况，但是当我将“height: 100%”更改为“100vh”时，它工作得很好 (2认同)
NIC*_*CAI 223
在CSS中确实没有一种完善的跨浏览器方式.假设您的布局很复杂,您需要使用JavaScript来设置元素的高度.您需要做的事情的本质是:
Element Height = Viewport height - element.offset.top - desired bottom margin
一旦你可以获得这个值并设置元素的高度,你需要将事件处理程序附加到窗口onload和onresize,以便你可以激活你的resize函数.
此外,假设您的内容可能大于视口,则需要设置overflow-y进行滚动.
- 文森特,坚持自己的立场.我当时想做同样的事情,用css看起来不可能吗？我不确定,但无论其他大量的解决方案都没有做到你所描述的.javascript one是唯一一个在这一点上正常工作的. (6认同)
- 如果窗口高度改变怎么办 (5认同)
- 我的意思是……为什么我们在2013年不使用calc？ (3认同)
- 这就是我所怀疑的.但是,该应用程序也将关闭Javascript,所以我想我会继续使用该表. (2认同)
h--*_*--n 163
原帖是3年多以前的.我想很多像我这样来这篇文章的人都在寻找类似应用程序的布局解决方案,比如以某种方式固定页眉,页脚和全高内容占据了剩下的屏幕.如果是这样,这篇文章可能会有所帮助,它适用于IE7 +等.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
以下是该帖子的一些片段:
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
/* end of screen rules. */
}<div class="header row" style="background:yellow;">
<h2>My header</h2>
</div>
<div class="body row scroll-y" style="background:lightblue;">
<p>The body</p>
</div>
<div class="footer row" style="background:#e9e9e9;">
My footer
</div>- 这只有一个问题:页眉和页脚不是自动调整大小的.*那*是真正的难度,而**就是为什么"这是不可能的"答案目前在顶部...... (74认同)
- `.col`没用过,是吗？ (4认同)
Dan*_*eld 140
您可以使用CSS表,而不是使用标记中的表.
标记
<body>
<div>hello </div>
<div>there</div>
</body>
(相关)CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
这种方法的一些优点是:
1)减少标记
2)标记比表更具语义,因为这不是表格数据.
3)浏览器支持非常好:IE8 +,所有现代浏览器和移动设备(caniuse)
为了完整起见,这里是CSS表模型的等效Html元素到css属性
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
- CSS表的烦人功能与普通表完全相同:如果内容太大,则扩展单元格以适应.这意味着您可能仍需要限制大小(max-height),或者如果页面是动态的,则从代码设置高度.*我真的很想念Silverlight网格!*:( (8认同)
- 我刚刚指出[css表的技术](http://codepen.io/anon/pen/Cucif).原来答案已经在这个已回答的问题中已经存在.这是*最好的解决方案; 干净,优雅,并按照预期的精确方式使用精确的工具.**CSS表** (3认同)
- 您始终可以在表格行元素中添加绝对定位的容器,然后将其宽度和高度设置为100%.记住也要在table-row元素上将position设置为relative. (3认同)
Mr.*_*ien 85
仅CSS方法(如果高度已知/固定)
如果希望中间元素垂直跨越整个页面,可以使用calc()CSS3中引入的内容.
假设我们有一个固定的高度 header和footer元素,我们希望section标签采取整个可用的垂直高度...
假设标记
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
所以你的CSS应该是
html, body {
height: 100%;
}
header {
height: 100px;
background: grey;
}
section {
height: calc(100% - (100px + 150px));
/* Adding 100px of header and 150px of footer */
background: tomato;
}
footer {
height: 150px;
background-color: blue;
}
所以在这里,正在做的是,将元素的高度相加,而不是从100%使用calc()函数中扣除.
只需确保您使用height: 100%;父元素.
- OP表示标题可以是任意高度.因此,如果您事先不知道高度,您将无法使用calc :( (12认同)
- 这个解决方案对我有用,并且不需要我重新设计我在Flexbox上的现有页面.如果你正在使用LESS,即Bootstrap,请务必阅读[coderwall](https://coderwall.com/p/yyou-q/css3-calc-in-less-css)关于如何逃避计算的帖子( )函数所以LESS不处理它. (2认同)
ngu*_*yên 54
用过的:
height: calc(100vh - 110px);
码:
.header { height: 60px; top: 0; background-color: green}
.body {
height: calc(100vh - 110px); /*50+60*/
background-color: gray;
}
.footer { height: 50px; bottom: 0; }
<div class="header">
<h2>My header</h2>
</div>
<div class="body">
<p>The body</p>
</div>
<div class="footer">
My footer
</div>zok*_*zok 35
一个简单的解决方案,使用flexbox:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<body>
<div>header</div>
<div class="content"></div>
</body>- 这无疑是最好的答案。可以像Hero-img主页的超级按钮或将Hero-img与导航栏组合使用 (3认同)
Ali*_*eza 35
怎么样,你只需使用vh它代表view height在CSS ...
查看我在下面为您创建的代码段并运行它:
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>另外,请查看我为您创建的图片:
- 仅当您希望div跨越窗口的整个高度时，这才是好的。现在在其上方放置一个标题div，高度未知。 (9认同)
dev*_*raj 33
CSS3简单方法
height: calc(100% - 10px); // 10px is height of your first div...
如今所有主流浏览器都支持它,所以如果您不需要支持老式浏览器,请继续.
- 如果您不知道其他元素的高度（例如，如果它们包含可变数量的子元素），则此方法将无效。 (3认同)
Orm*_*moz 27
它可以纯粹通过CSS使用vh:
#page {
display:block;
width:100%;
height:95vh !important;
overflow:hidden;
}
#tdcontent {
float:left;
width:100%;
display:block;
}
#content {
float:left;
width:100%;
height:100%;
display:block;
overflow:scroll;
}
和 HTML
<div id="page">
<div id="tdcontent"></div>
<div id="content"></div>
</div>
我查了一下它,它可以在所有主要的浏览器:Chrome,IE,和FireFox
- 哇,之前从未听说过'vh`和`vw`单位.更多信息:http://snook.ca/archives/html_and_css/vm-vh-units (2认同)
- 我尝试了这种方法，但是#content上的height：100％导致其高度与#page上的高度匹配，而完全忽略了＃tdcontent`的高度。滚动条的内容很多，超出了页面底部。 (2认同)
Joh*_*lak 26
当内容太高时需要底部div滚动时,没有任何解决方案发布.这是一个适用于这种情况的解决方案:
HTML:
<div class="table container">
<div class="table-row header">
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
</div>
<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
<div class="body-content-inner-wrapper">
<div class="body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.container {
width: 400px;
height: 300px;
}
.header {
background: cyan;
}
.body {
background: yellow;
height: 100%;
}
.body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
- 神圣的****！我找这个答案很久了！太感谢了。Flexbox 在这里不起作用，但表格单元确实可以。惊人的。 (2认同)
Chr*_*ris 24
我也一直在寻找答案.如果您有幸能够以IE8及更高版本为目标,则可以使用display:table相关值来获取包含div的块级元素的表的呈现规则.
如果您更幸运并且您的用户使用的是顶级浏览器(例如,如果这是您控制的计算机上的Intranet应用程序,就像我的最新项目一样),您可以在CSS3中使用新的Flexible Box布局!
小智 22
对我有用的(在另一个div中使用div而我在其他所有情况下都假设)是将底部填充设置为100%.也就是说,将其添加到您的css/stylesheet:
padding-bottom: 100%;
- 100%的是什么？如果我尝试这个,我会得到一个巨大的空白区域,滚动开始发生. (14认同)
- padding-bottom:100%设置高度+父容器的100%__ width__ (2认同)
Mic*_*zos 17
免责声明:接受的答案给出了解决方案的想法,但我发现它有点臃肿与不必要的包装和css规则.以下是一个css规则很少的解决方案.
HTML 5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport's height */
}
main {
flex: 1; /* this will make the container take the free space */
}
上面的解决方案使用视口单元和flexbox,因此是IE10 +,您可以使用IE10的旧语法.
使用Codepen:链接到codepen
或者这个,对于那些需要主容器在内容溢出的情况下可滚动的人:链接到codepen
pui*_*uiu 16
现在有很多答案,但我发现使用height: 100vh;div元素需要填满整个可用的垂直空间.
通过这种方式,我不需要玩显示或定位.这在使用Bootstrap制作仪表板时派上用场,其中我有侧边栏和主边栏.我希望主要拉伸并填充整个垂直空间,以便我可以应用背景颜色.
div {
height: 100vh;
}
支持IE9及以上版本:点击查看链接
- 但100vh听起来像所有的高度,而不是剩余的高度.如果你有一个标题然后你想填补其余的内容怎么办？ (11认同)
Jer*_*rph 13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
在所有理智的浏览器中,您可以将"header"div放在内容之前,作为兄弟,并且相同的CSS将起作用.但是,如果在这种情况下浮点数是100%,则IE7-不能正确解释高度,因此标题需要在内容中,如上所述.溢出:auto会导致IE上的双滚动条(它始终具有视口滚动条可见但已禁用),但如果没有它,内容将在其溢出时剪辑.
gad*_*olf 11
在引导程序中：
CSS 样式：
html, body {
height: 100%;
}
1）只需填充剩余屏幕空间的高度：
<body class="d-flex flex-column">
<div class="d-flex flex-column flex-grow-1">
<header>Header</header>
<div>Content</div>
<footer class="mt-auto">Footer</footer>
</div>
</body>
2) 填充剩余屏幕空间的高度并将内容对齐到父元素的中间：
<body class="d-flex flex-column">
<div class="d-flex flex-column flex-grow-1">
<header>Header</header>
<div class="d-flex flex-column flex-grow-1 justify-content-center">Content</div>
<footer class="mt-auto">Footer</footer>
</div>
</body>
- 所有这些类从哪里来？当内容比屏幕长时怎么办？ (6认同)
小智 10
我暂时对此感到满意,结果如下:
由于很容易使内容DIV与父级相同,但显然难以使父级高度减去标题高度我决定使内容div达到全高,但绝对位于左上角然后定义填充对于具有标题高度的顶部.这样,内容整齐地显示在标题下并填充整个剩余空间:
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#content {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
}
- 如果您不知道标题的高度怎么办？ (14认同)
Mik*_*nen 10
如果您可以处理不支持旧浏览器(即MSIE 9或更早版本),则可以使用已经是W3C CR的Flexible Box Layout Module来完成此操作.该模块也允许其他好的技巧,例如重新排序内容.
不幸的是,MSIE 9或更低版本不支持这一点,你必须为除Firefox之外的每个浏览器使用CSS属性的供应商前缀.希望其他供应商也很快放弃前缀.
另一种选择是CSS网格布局,但是稳定版本的浏览器支持更少.实际上,只有MSIE 10支持这一点.
- 我添加了使用“grid”和“flex”的示例。请注意，如果足以满足您的需求，“display:flex”通常更容易使用。关于“display:grid”的好处是，您可以使用逻辑网格区域名称，并仅更改“grid”属性以根据需要切换布局，而无需重新排序元素顺序。请注意，Chrome 不支持“subgrid”，如果您想要嵌套布局，这会让事情变得更容易。您应该根据可访问性需求对元素进行排序，而不是根据视觉顺序。 (2认同)
小智 9
为什么不这样呢？
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
给你html和body(按此顺序)一个高度,然后给你的元素一个高度？
适合我
只需定义bodywith display:grid和grid-template-rowsusing auto以及frvalue属性.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
padding: 1em;
background: pink;
}
main {
padding: 1em;
background: lightblue;
}
footer {
padding: 2em;
background: lightgreen;
}
main:hover {
height: 2000px;
/* demos expansion of center element */
}<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>这是我自己的 Pebbl 解决方案的最小版本。花了很长时间才找到让它在 IE11 中工作的技巧。（也在 Chrome、Firefox、Edge 和 Safari 中进行了测试。）
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
section {
display: flex;
flex-direction: column;
height: 100%;
}
div:first-child {
background: gold;
}
div:last-child {
background: plum;
flex-grow: 1;
}<body>
<section>
<div>FIT</div>
<div>GROW</div>
</section>
</body>实际上,您可以使用display: table将区域拆分为两个元素(标题和内容),其中标题的高度可能不同,内容会填充剩余的空间.这适用于整个页面,以及当面积仅仅是定位与其他元素的含量position设置为relative,absolute或fixed.只要父元素的高度为非零,它就会起作用.
看到这个小提琴,以及下面的代码:
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.additional-padding {
height: 50px;
background-color: #DE9;
}
.as-table {
display: table;
height: 100%;
width: 100%;
}
.as-table-row {
display: table-row;
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
}
HTML:
<div class="as-table">
<div id="header">
<p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
<div class="additional-padding"></div>
</div>
<div class="as-table-row">
<div id="content">
<p>This is the actual content that takes the rest of the available space.</p>
</div>
</div>
</div>
- 一个很好的答案,我赞成,但不幸的是,不适用于IE8,IE8仍将存在很长一段时间. (2认同)
小智 6
试试这个方法：
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
.first-div {
height: 20vh; // this height can be any length
}
.second-div {
flex: 1; // fills up the remaining space on the screen
}
<div class='container'>
<div class='first-div'>
...
</div>
<div class='second-div'>
...
</div>
</div>
文森特,我会再次使用您的新要求回答.由于您不关心隐藏的内容(如果内容太长),您不需要浮动标题.只需将溢出隐藏在html和body标签上,并将#content高度设置为100%.内容将始终比视口的高度长,但它将被隐藏,不会导致滚动条.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body, html {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
尝试这个
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
摆脱外星人先生的想法......
对于支持 CSS3 的浏览器来说，这似乎是一种比流行的 Flex Box 更简洁的解决方案。
只需将 min-height（而不是 height）与 calc() 一起使用到内容块即可。
calc() 从 100% 开始，减去页眉和页脚的高度（需要包括填充值）
使用“min-height”而不是“height”特别有用，因此它可以与 javascript 渲染内容和 Angular2 等 JS 框架一起使用。否则，一旦 javascript 渲染的内容可见，计算将不会将页脚推到页面底部。
这是一个简单的页眉和页脚示例，高度为 50 像素，填充为 20 像素。
网页：
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
CSS：
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
当然，数学可以简化，但你明白了......
我遇到了同样的问题，但我无法使用上面的弹性盒解决方案。所以我创建了自己的模板，其中包括：
- 具有固定大小元素的标头
- 页脚
- 带有滚动条的侧栏占据剩余高度
- 内容
我使用了 Flexbox，但以更简单的方式，仅使用属性display: flex和flex-direction: row|column：
我确实使用 Angular，并且希望我的组件大小是其父元素的 100%。
关键是为所有父级设置大小（以百分比为单位）以限制它们的大小。在以下示例中，myapp 高度占视口的 100%。
主要组件占视口的 90%，因为页眉和页脚占 5%。
我在这里发布了我的模板：https ://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
网页：
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
小智 5
对于移动应用，我只使用 VH 和 VW
<div class="container">
<div class="title">Title</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
font-size: 5vh;
}
.title {
height: 20vh;
background-color: red;
}
.content {
height: 60vh;
background: blue;
}
.footer {
height: 20vh;
background: green;
}
演示 - https://jsfiddle.net/u763ck92/
| 归档时间： |
|
| 查看次数： |
912386 次 |
| 最近记录： |