关于HTML：使一个DIV填充剩余屏幕空间的高度


Make a div fill the height of the remaining screen space

我正在开发一个Web应用程序，我想让内容填满整个屏幕的高度。

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

我有一个标题div和一个内容div。目前我正在使用一个这样的布局表：

CSS与HTML

1
2
3
4
5
6
7
8
9
10
11
#page {
    height: 100%; width: 100%
}

#tdcontent {
    height: 100%;
}

#content {
    overflow: auto; /* or overflow: hidden; */
}
1
2
3
4
5
6
7
8
9
10
11
12
<table id="page">
    <tr>
        <td id="tdheader">
            ...
        </td>
    </tr>
    <tr>
        <td id="tdcontent">
            ...
        </td>
    </tr>
</table>

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

对于Content Div中的任何内容，设置top: 0;将把它放在标题的正下方。有时内容将是一个真正的表，其高度设置为100%。把header放在content内是不允许这样做的。

有没有一种方法可以在不使用table的情况下达到同样的效果？

更新：

元素EDCOX1(0)中的元素也将高度设置为百分比。因此，在div中的100%将填充到底部。两种元素的比例为50%。

更新2：

例如，如果标题占屏幕高度的20%，则在#content中指定为50%的表格将占屏幕空间的40%。到目前为止，把整个东西包装在一张桌子上是唯一有效的方法。

相关讨论

2015年更新：flexbox方法

还有另外两个答案简单地提到了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)

所有主要浏览器和IE11+都支持flexbox。对于IE 10或更高版本，可以使用flexiejs垫片。

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

工作实例

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->


 
    <p>
header
      <br />
      <br />(sized to content)
</p>
 
 
    <p>

      content
      (fills remaining space)
   
</p>
 
 
    <p>
footer (fixed height)
</p>

在上面的CSS中，flex属性简化flex grow、flex shrink和flex basis属性，以建立flex项的灵活性。Mozilla很好地介绍了灵活的盒子模型。

相关讨论

在CSS中，确实没有一种声音、跨浏览器的方式来实现这一点。假设您的布局很复杂，您需要使用javascript来设置元素的高度。你需要做的事情的本质是：

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

一旦获得该值并设置元素的高度，就需要将事件处理程序同时附加到window onload和onresize，以便启动调整大小函数。

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

相关讨论

原来的帖子是3多年前的。我猜很多像我一样来到这个帖子的人都在寻找一个类似于布局解决方案的应用程序，比如某种固定的页眉、页脚和全高的内容。如果是这样，这篇文章可能会有帮助，它在IE7+等方面起作用。

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

下面是那篇文章的一些片段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
@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. */
}
1
2
3
4
5
6
7
8
9
    My header
 

    <p>
The body
</p>
 

    My footer

相关讨论

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

标记

1
2
3
4
<body>    
    hello
    there
</body>

(相关)CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
body
{
    display:table;
    width:100%;
}
div
{
    display:table-row;
}
div+ div
{
    height:100%;  
}

FIDLE 1和FIDLE 2

这种方法的一些优点是：

1)较少的标记

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

3)浏览器支持非常好：IE8+，所有现代浏览器和移动设备(CANIUE)

为了完整起见，这里是与CSS表模型的CSS属性等效的HTML元素

1
2
3
4
5
6
7
8
9
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方法(如果高度已知/固定)

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

假设我们有一个固定高度的header和footer元素，并且我们希望section标记具有整个可用的垂直高度…

演示

假设标记

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

所以你的CSS应该是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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;
}

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

只需确保对父元素使用height: 100%;。

相关讨论

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

代码：

1
2
3
4
5
6
.header { height: 60px; top: 0; background-color: green}
.body {
    height: calc(100vh - 110px); /*50+60*/
    background-color: gray;
}
.footer { height: 50px; bottom: 0; }
1
2
3
4
5
6
7
8
9
    My header
 

    <p>
The body
</p>
 

    My footer

相关讨论

你简单地使用vh，它在css中代表view height，怎么样？

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

1
2
3
4
5
6
7
8
9
10
body {
  padding: 0;
  margin: 0;
}

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

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

Make a div fill the height of the remaining screen space

相关讨论

CSS3简易方法

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

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

相关讨论

这完全可以通过使用vh的CSS来实现：

1
2
3
4
5
6
7
8
9
10
11
12
#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。

1
 

我查过了，它在所有主要的浏览器中都可以使用：Chrome、IE和FireFox。

相关讨论

当您需要底部的DIV在内容太高时滚动时，所有发布的解决方案都不起作用。在这种情况下，解决方案是：

HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
    This is the header whose height is unknown
    This is the header whose height is unknown
    This is the header whose height is unknown
 
 
   
     
       
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown
          This is the scrollable content whose height is unknown

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.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;
}

原始来源：在CSS中处理溢出时填充容器的剩余高度

jfiddle实时预览

相关讨论

我也一直在寻找答案。如果您有幸能够以IE8和更高版本为目标，则可以使用display:table和相关的值来获取包含div的块级元素的表的呈现规则。

如果您更幸运，并且您的用户使用顶级浏览器(例如，如果这是您控制的计算机上的Intranet应用程序，就像我的最新项目一样)，那么您可以使用CSS3中新的灵活框布局！

使用flexbox的简单解决方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
html,
body {
  height: 100%;
}

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

.content {
  flex-grow: 1;
}
1
2
3
4
<body>
  header
 
</body>

科顿样本

另一种解决方案，其中一个以内容DIV为中心的DIV

对我起作用的(在另一div中有div，我假设在所有其他情况下)是将底部填充设置为100%。也就是说，将此添加到CSS/样式表：

1
padding-bottom: 100%;
相关讨论

Disclaimer: The accepted answer gives the idea of the solution, but I'm finding it a bit bloated with an unnecessary wrapper and css rules. Below is a solution with very few css rules.

HTML 5

1
2
3
4
5
6
<body>
    <header>Header with an arbitrary height</header>
    <main>
        This container will grow so as to take the remaining height
    </main>
</body>

CSS

1
2
3
4
5
6
7
8
9
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

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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>
Test
<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>

   
       
                Header
                <p>
Header stuff
</p>
       
            Content
            <p>
Content stuff
</p>
   

</body>
</html>

在所有健全的浏览器中，您可以将"header"DIV放在内容之前，作为兄弟，同样的CSS也可以工作。但是，在这种情况下，如果浮动为100%，IE7-无法正确解释高度，因此标题需要在内容中，如上所述。溢出：自动将导致IE上的双滚动条(始终可见但禁用视区滚动条)，但如果没有它，内容将在溢出时剪辑。

相关讨论

现在有很多答案，但是我发现使用height: 100vh;来处理需要填满整个垂直空间的div元素。

这样，我就不需要在显示器或定位上玩了。当使用引导程序制作一个仪表板时，这非常有用，其中我有一个侧边栏和一个主面板。我想让主体拉伸并填充整个垂直空间，这样我可以应用背景色。

1
2
3
div {
    height: 100vh;
}

支持IE9和更高版本：单击查看链接

相关讨论

如果您可以处理不支持旧的浏览器(即msie 9或更旧的浏览器)，您可以使用已经是w3c-cr的灵活的方框布局模块来完成这项工作。该模块还允许使用其他不错的技巧，例如重新排序内容。

不幸的是，msie 9或更低版本不支持这一点，您必须为除firefox之外的每个浏览器的css属性使用供应商前缀。希望其他厂商也能尽快删除前缀。

另一个选择是CSS网格布局，但稳定版本的浏览器对它的支持更少。实际上，只有msie 10支持这一点。

我用这个写了一段时间，结果是：

由于很容易将内容div设置为与父级相同的高度，但显然很难将其设置为父级高度减去标题高度，因此我决定将内容div设置为全高，但将其绝对定位在左上角，然后为具有标题高度的顶部定义填充。这样，内容将整齐地显示在标题下，并填充整个剩余空间：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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%;
}
相关讨论

为什么不这样？

1
2
3
4
5
6
7
8
9
10
11
12
13
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和身体(按这个顺序)一个高度，然后给你的元素一个高度？

为我工作

相关讨论

1
 style="height:100vh"

帮我解决了这个问题。在我的案例中，我把这个应用到了

CSS网格解决方案

仅用display:grid和grid-template-rows定义body，使用auto和fr值属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
* {
  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 */
}
1
2
3
<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>

完整的网格指南@css-tricks.com

实际上，您可以使用display: table将区域拆分为两个元素(头和内容)，其中头的高度可以不同，内容填充剩余的空间。这适用于整个页面，也适用于当区域只是另一个元素的内容时，该元素的位置将position设置为relative、absolute或fixed。只要父元素具有非零高度，它就可以工作。

请参见此小提琴和下面的代码：

CSS：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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：

1
2
3
4
5
6
7
8
9
10
        <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>
       
   
   
       
            <p>
This is the actual content that takes the rest of the available space.
</p>
相关讨论

文森特，我会用你的新要求再次回答。由于您不关心隐藏的内容是否太长，所以不需要浮动标题。只需将溢出隐藏在html和body标签上，并将#content高度设置为100%。根据标题的高度，内容总是比视区长，但它将被隐藏，不会导致滚动条。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!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>
    Test
    <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>
 
    Header
    <p>
Header stuff
</p>
 

 
    Content
    <p>
Content stuff
</p>
    Positioned Content
 

</body>
</html>
相关讨论

试试这个

1
2
3
4
5
6
var sizeFooter = function(){
    $(".webfooter")
        .css("padding-bottom","0px")
        .css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);

我找到了一个非常简单的解决方案，因为对我来说这只是一个设计问题。我希望页面的其余部分不要在红色页脚下面是白色的。所以我把页面的背景色设置为红色。内容物背景颜色变为白色。当内容高度设置为如20em或50%时，几乎为空的页面不会使整个页面变红。

对于移动应用程序，我只使用vh和vw

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  Title
  Content
  Footer


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

相关讨论

我遇到了同样的问题，但是我无法用上面的Faskbox来解决问题。所以我创建了自己的模板，包括：

  • 具有固定大小元素的报头
  • 页脚
  • 一种侧栏，它有一个占据剩余高度的滚动条。
  • 内容

我使用了flexbox，但更简单的方法是，只使用属性display:flex和flex direction:row_column:

我确实使用角度，我希望我的组件大小是其父元素的100%。

关键是为所有父母设置大小(以百分比为单位)，以便限制他们的大小。在下面的示例中，myapp height具有100%的视区。

主组件有90%的视区，因为页眉和页脚有5%。

我在这里发布了我的模板：https://jsfiddle.net/abreneliere/mrjh6y2e/3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
       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;
    }

Html：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<body>

   
        HEADER
       

   
   
       
            SIDEBAR
           
           
           
           
           
           
           
           
       
       
            CONTENT
       
   
   
        FOOTER
   

</body>

把艾琳先生的想法转嫁出去…

对于支持CSS3的浏览器来说，这似乎比流行的flex-box解决方案更干净。

只需将最小高度(而不是高度)与calc()一起用于内容块。

calc()从100%开始，减去页眉和页脚的高度(需要包括填充值)

使用"min height"而不是"height"特别有用，因此它可以与JavaScript呈现的内容和JS框架(如angular2)一起使用。否则，一旦JavaScript呈现的内容可见，计算将不会将页脚推到页面底部。

这里是一个简单的例子，页眉和页脚都使用了50px的高度和20px的填充。

Html：

1
2
3
4
5
<body>
    <header></header>
   
    <footer></footer>
</body>

Css：

1
2
3
.content {
    min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}

当然，数学可以简化，但你知道…

动态计算回忆屏幕空间，更好地使用javascript。

您可以使用css-in-js技术，如下lib：

网址：https://github.com/cssobj/cssobj

演示：https://cssobj.github.io/cssobj-demo/

在另一方面，它对我来说从来没有起过作用，正如niccai在第一个答案中建议的那样，使用javascript。我正使用这种方法用谷歌地图重新缩放。

以下是如何做到这一点的完整示例(在safari/firefox/ie/iphone/android(与rotation一起工作))：

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

.header {
  height: 100px;
  background-color: red;
}

.content {
  height: 100%;
  background-color: green;
}

JS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function resize() {
  // Get elements and necessary element heights
  var contentDiv = document.getElementById("contentId");
  var headerDiv = document.getElementById("headerId");
  var headerHeight = headerDiv.offsetHeight;

  // Get view height
  var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;

  // Compute the content height - we want to fill the whole remaining area
  // in browser window
  contentDiv.style.height = viewportHeight - headerHeight;
}

window.onload = resize;
window.onresize = resize;

HTML

1
2
3
4
<body>
  Hello
 
</body>

如果唯一的问题是身高，那么仅仅使用沙发床就可以了：

1
2
header content
content content

在一个简单的测试中，标题/内容的宽度在您的示例和我的示例中是不同的，但是我不能从您的帖子中确定您是否关心宽度？

相关讨论