Html 使 div 填充剩余屏幕空间的高度

Question

提问by Vincent McNabb

I am working on a web application where I want the content to fill the height of the entire screen.

我正在开发一个 Web 应用程序，我希望内容填充整个屏幕的高度。

The page has a header, which contains a logo, and account information. This could be an arbitrary height. I want the content div to fill the rest of the page to the bottom.

该页面有一个标题，其中包含一个徽标和帐户信息。这可以是任意高度。我希望内容 div 将页面的其余部分填充到底部。

I have a header divand a content div. At the moment I am using a table for the layout like so:

我有一个标题div和一个内容div。目前我正在使用表格进行布局，如下所示：

CSS and HTML

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>

The entire height of the page is filled, and no scrolling is required.

页面的整个高度已填充，不需要滚动。

For anything inside the content div, setting top: 0;will put it right underneath the header. Sometimes the content will be a real table, with its height set to 100%. Putting headerinside contentwill not allow this to work.

对于内容 div 中的任何内容，设置top: 0;会将其放在标题下方。有时内容将是一个真实的表格，其高度设置为 100%。把header里面content不会让这种工作。

Is there a way to achieve the same effect without using the table?

有没有办法在不使用的情况下达到相同的效果table？

Update:

更新：

Elements inside the content divwill have heights set to percentages as well. So something at 100% inside the divwill fill it to the bottom. As will two elements at 50%.

内容内的元素的div高度也将设置为百分比。所以里面 100% 的东西div会填满它的底部。50% 的两个元素也是如此。

Update 2:

更新 2：

For instance, if the header takes up 20% of the screen's height, a table specified at 50% inside #contentwould take up 40% of the screen space. So far, wrapping the entire thing in a table is the only thing that works.

例如，如果标题占据屏幕高度的 20%，则指定在 50% 内部的表格#content将占据屏幕空间的 40%。到目前为止，将整个事物包装在一个表中是唯一有效的方法。

Answer 1

采纳答案by Pebbl

2015 update: the flexbox approach

2015 更新：flexbox 方法

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

还有另外两个答案简要提到了flexbox；然而，那是两年多前的事了，他们没有提供任何例子。flexbox 的规范现在已经确定了。

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.
(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

注意：虽然 CSS 弹性框布局规范处于候选推荐阶段，但并非所有浏览器都实现了它。WebKit 实现必须以 -webkit- 为前缀；Internet Explorer 实现了旧版本的规范，前缀为 -ms-；Opera 12.10 实现了最新版本的规范，无前缀。有关最新的兼容性状态，请参阅每个属性的兼容性表。
（取自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes）

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

所有主流浏览器和 IE11+ 都支持 Flexbox。对于 IE 10 或更早版本，您可以使用 FlexieJS 垫片。

To check current support you can also see here: http://caniuse.com/#feat=flexbox

要查看当前支持，您还可以在此处查看：http: //caniuse.com/#feat=flexbox

Working example

工作示例

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

使用 flexbox，您可以轻松地在具有固定尺寸、内容尺寸尺寸或剩余空间尺寸的任何行或列之间切换。在我的示例中，我已将标题设置为对齐其内容（根据 OP 问题），我添加了一个页脚以展示如何添加固定高度区域，然后设置内容区域以填充剩余空间。

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>

In the CSS above, the flexproperty shorthands the flex-grow, flex-shrink, and flex-basisproperties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.

在上面的 CSS 中，flex属性简写了flex-grow、flex-shrink和flex-basis属性来建立弹性项目的灵活性。Mozilla对灵活的盒子模型有很好的介绍。

Answer 2

回答by NICCAI

There really isn't a sound, cross-browser way to do this in CSS. Assuming your layout has complexities, you need to use JavaScript to set the element's height. The essence of what you need to do is:

在 CSS 中确实没有一种健全的、跨浏览器的方法可以做到这一点。假设您的布局具有复杂性，您需要使用 JavaScript 来设置元素的高度。你需要做的事情的本质是：

Element Height = Viewport height - element.offset.top - desired bottom margin

Once you can get this value and set the element's height, you need to attach event handlers to both the window onload and onresize so that you can fire your resize function.

一旦您获得此值并设置元素的高度，您需要将事件处理程序附加到窗口 onload 和 onresize 以便您可以触发调整大小功能。

Also, assuming your content could be larger than the viewport, you will need to set overflow-y to scroll.

此外，假设您的内容可能大于视口，您将需要设置 overflow-y 来滚动。

Answer 3

回答by h--n

The original post is more than 3 years ago. I guess many people who come to this post like me are looking for an app-like layout solution, say a somehow fixed header, footer, and full height content taking up the rest screen. If so, this post may help, it works on IE7+, etc.

原来的帖子是三年多前的了。我想很多像我一样来到这篇文章的人都在寻找一种类似应用程序的布局解决方案，比如以某种方式固定的页眉、页脚和占据其余屏幕的全高内容。如果是这样，这篇文章可能会有所帮助，它适用于 IE7+ 等。

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

And here are some snippets from that post:

以下是该帖子的一些片段：

@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>

Answer 4

回答by Danield

Instead of using tables in the markup, you could use CSS tables.

您可以使用 CSS 表格，而不是在标记中使用表格。

Markup

标记

<body>    
    <div>hello </div>
    <div>there</div>
</body>

(Relevant) CSS

（相关）CSS

body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDDLE1and FIDDLE2

小提琴 1和小提琴 2

Some advantages of this method are:

这种方法的一些优点是：

1) Less markup

1）减少标记

2) Markup is more semantic than tables, because this is not tabular data.

2）标记比表格更具语义，因为这不是表格数据。

3) Browser support is very good: IE8+, All modern browsers and mobile devices (caniuse)

3）浏览器支持非常好：IE8+，所有现代浏览器和移动设备（caniuse）

为了完整起见，这里是等效于 css 属性的 Html 元素 The CSS table model 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 }

Answer 5

回答by Mr. Alien

CSS only Approach (If height is known/fixed)

仅 CSS 方法（如果高度已知/固定）

When you want the middle element to span across entire page vertically, you can use calc()which is introduced in CSS3.

当您希望中间元素垂直跨越整个页面时，您可以使用calc()CSS3 中引入的 which 。

Assuming we have a fixed heightheaderand footerelements and we want the sectiontag to take entire available vertical height...

假设我们有一个固定的高度header和footer元素，我们希望section标签占据整个可用的垂直高度......

Demo

演示

Assumed markupand your CSS should be

假设标记和您的 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;
}

<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>

So here, what am doing is, adding up the height of elements and than deducting from 100%using calc()function.

所以在这里，我所做的是，将元素的高度相加，而不是从100%使用calc()函数中扣除。

Just make sure that you use height: 100%;for the parent elements.

只要确保您height: 100%;用于父元素。

Answer 6

回答by nguyên

Used: height: calc(100vh - 110px);

用过的： height: calc(100vh - 110px);

code:

代码：

  
.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>

Answer 7

回答by zok

A simple solution, using flexbox:

一个简单的解决方案，使用 flexbox：

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

<body>
  <div>header</div>
  <div class="content"></div>
</body>

Codepen sample

代码笔示例

An alternate solution, with a div centered within the content div

另一种解决方案，在内容 div 中居中放置一个 div

Answer 8

回答by Alireza

How about you simply use vhwhich stands for view heightin CSS...

你如何在CSS 中简单地使用vhwhich 代表...view height

Look at the code snippetI created for you below and run it:

查看我在下面为您创建的代码片段并运行它：

body {
  padding: 0;
  margin: 0;
}

.full-height {
  width: 100px;
  height: 100vh;
  background: red;
}

<div class="full-height">
</div>

Also, look at the image below which I created for you:

另外，请查看我为您创建的下图：

Answer 9

回答by dev.meghraj

CSS3 Simple Way

CSS3 简单方式

height: calc(100% - 10px); // 10px is height of your first div...

all major browsers these days support it, so go ahead if you don't have requirement to support vintage browsers.

现在所有主要浏览器都支持它，所以如果您不需要支持老式浏览器，请继续。

Answer 10

回答by Ormoz

It could be done purely by CSSusing vh:

它可以完全通过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;
}

and the HTML

和 HTML

<div id="page">

   <div id="tdcontent"></div>
   <div id="content"></div>

</div>

I checked it, It works in all major browsers: Chrome, IE, and FireFox

我查了一下它，它可以在所有主要的浏览器：Chrome，IE，和FireFox

Html 使 div 填充剩余屏幕空间的高度

提问by Vincent McNabb

采纳答案by Pebbl

2015 update: the flexbox approach

2015 更新：flexbox 方法

Working example

工作示例

回答by NICCAI

回答by h--n

回答by Danield

Markup

标记

(Relevant) CSS

（相关）CSS

回答by Mr. Alien

CSS only Approach (If height is known/fixed)

仅 CSS 方法（如果高度已知/固定）

回答by nguyên

回答by zok

回答by Alireza

回答by dev.meghraj

回答by Ormoz

相关推荐

最近更新

标签

Html 使 div 填充剩余屏幕空间的高度

提问by Vincent McNabb

采纳答案by Pebbl

2015 update: the flexbox approach

2015 更新：flexbox 方法

Working example

工作示例

回答by NICCAI

回答by h--n

回答by Danield

Markup

标记

(Relevant) CSS

（相关）CSS

回答by Mr. Alien

CSS only Approach (If height is known/fixed)

仅 CSS 方法（如果高度已知/固定）

回答by nguyên

回答by zok

回答by Alireza

回答by dev.meghraj

回答by Ormoz

相关推荐

HTML 嵌入 autoplay="false"，但仍自动播放

如何使 HTML 表格的宽度与其包含的 div 标签的宽度相同？

Html 使用 CSS 格式化表格中的文本

Html HTML5 输入验证字母和数字

相关推荐

最近更新

标签