Html CSS高度100%使元素高度超过100%_Html_Css_Flexbox

Html CSS高度100%使元素高度超过100%

html css

Html CSS高度100%使元素高度超过100%,html,css,flexbox,Html,Css,Flexbox,下面的HTML很简单，可以满足我的需要。绿色主体向下延伸以填充窗口 <body style="margin:0"> <div style="height:100%;display:flex;flex-direction:column"> <div style="background:#d0d0ff"> This is a header </div> <div st

下面的HTML很简单，可以满足我的需要。绿色主体向下延伸以填充窗口

<body style="margin:0">
    <div style="height:100%;display:flex;flex-direction:column">
        <div style="background:#d0d0ff">
            This is a header
        </div>
        <div style="background:#d0ffd0;flex-grow:1">
            This is the body.
        </div>
    </div>
</body>

我愿意这样做

这为您提供了更好的html结构和可维护性

这个呢？-


正文，html{边距：0；高度：100%；宽度：100%；填充：0}
这是一个标题
第1列
第2列

我已更新了您的代码，如果这对您有帮助，请尝试。将高度设置为

100vh

获得垂直滚动条的原因是，您告诉

col1

和

col2

的div父级为

高度：100%

。这本身就提供了视口的完整高度

从您的代码：

<>而不是使用定义的高度，考虑让FrasBox完成这项工作。默认情况下，弹性项沿横轴展开容器的全长

因此，通过简单地声明

display:flex

，子元素将扩展以填充所有可用空间（没有垂直滚动）。但是由于

height

规则将覆盖此弹性设置，因此我们需要从任何弹性项中删除

height:100%

html，正文{高度：100%；}


这是一个标题
第1列
第2列

你能提供一个提琴吗，谢谢你的代码为我生成了一个不同于你截图的输出：Ug。。。非常抱歉。。。我忘了那个，我处于怪癖状态。没关系…你的代码可以工作，但我的问题是为什么，所以让我明白：你说的高度：100%使它100%的视口。这是有道理的，但我认为高度：100%意味着100%的父块元素？百分比高度基于父对象的高度工作。你说得对。除非父对象也是百分比高度，否则它必须查看其父对象。这个循环一直持续到它到达根元素（

html{height:100%；}

）。这是视口高度。所以，除非你设置，比如说，

height:250px

，否则所有的百分比高度都会在树的上方寻找指导。好的，但这不是我的示例代码所做的。

newdiv

的父级没有

height

样式。您的示例代码没有复制您发布的图像。

高度：100%

什么也没做。这是你的密码：对不起，我的朋友。fiddle中没有bug（由它使用的浏览器提供动力）。Chrome、FF和IE11中的行为相同。它符合标准。请看我的回答：

<body style="margin:0">
    <div style="height:100%;display:flex;flex-direction:column">
        <div style="background:#d0d0ff">
            This is a header
        </div>
        <div style="background:#d0ffd0;flex-grow:1">
            <!-- The new part -->
            <div id='newdiv' style="display:flex;flex-direction:row; height:100%">
                <div style="background:#ffd0d0"> Col 1 </div>
                <div> Col 2 </div>
            </div>
        </div>
    </div>
</body>

<body>
   <header>Header</header>
   <div class="body">
     <aside>abc</aside>
     <div class='inner'>content here</div>
   </div>
</body>

html,body{
  height: 100%;
}

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

}


.body{
  flex-grow:1;
  display: flex;
  align-items: stretch;

}

.inner{
  flex-grow: 1;
}

<style>
 body, html {margin:0;height:100%;width:100%;padding:0}
</style>
<body>
  <div style="height:100%;display:flex;flex-direction:column">
    <div style="background:#d0d0ff">
      This is a header
    </div>
    <div style="background:#d0ffd0;flex-grow:1;display:flex;flex-direction:row; height:100%;-webkit-align-items:stretch">
      <div style="background:#ffd0d0"> Col 1 </div>
      <div style="background:red"> Col 2 </div>
    </div>
  </div>
</body>

<div id='newdiv' style="display:flex; flex-direction:row; height:100%">
    <div style="background:#ffd0d0"> Col 1 </div>
    <div> Col 2 </div>
</div>

100% + (computed height of header div) > viewport height = vertical scrollbar