腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >不尊重我的最小身高: 100%使用柔性盒

问不尊重我的最小身高: 100%使用柔性盒
EN

Stack Overflow用户

提问于 2014-10-27 13:04:26

回答 6查看 18.8K关注 0票数 18

我一直在寻找所有的最小高度: 100%的解决方案在StackOverflow和网络上，我似乎找不到一个适合我(相对简单)的需要。

我想要的是：

我有一个两列容器，两列都应该伸展到等高。
当内容没有填充屏幕时，列应该伸展到整个窗口的高度。
我很乐意使用flex-box，但如果可能的话，我宁愿不使用JS黑客。

示例代码：

http://codepen.io/anon/pen/dwgDq?editors=110

<!DOCTYPE html>
<html>
  <body>
    <div class="container">
      <div class="nav">
        <p>Item 1</p>
        <p>Item 2</p>
        <p>Item 3</p>
        <p>Item 4</p>
        <p>Item 5</p>
      </div>
      <div class="content">
        <p>Content 1</p>
        <p>Content 2</p>
        <p>Content 3</p>
        <p>Content 4</p>
        <p>Content 5</p>
        <p>Content 6</p>
        <p>Content 7</p>
        <p>Content 8</p>
      </div>
    </div>
  </body>
</html>

html, body { height: 100%; margin: 0; }

.wrapper {
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.container {
  display: flex;
  align-items: stretch;
  min-height: 100%;
}

.nav {
  background: grey;
  width: 200px;
}

.content {
  flex-grow: 1;
  background: yellow;
}

这在Safari和Chrome中非常有效。

似乎IE (在我的例子中是v11)不尊重我的最小高度，因此，列没有填充屏幕的高度。据我所读，IE6+7在将高度视为最小高度时存在问题，但这是过去的遗物，在使用HTML5文档类型时早已消失。

我怎样才能使我的最小身高获得荣誉呢？

我如何使这个布局工作？

css

html

internet-explorer

height

回答 6

Stack Overflow用户

回答已采纳

发布于 2015-02-11 06:26:58

以下是解决办法：

HTML

<body>
  <header>Header</header>
  <main>Here comes the content ...</main>
  <footer>Footer</footer>
</body>

CSS

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
header, footer {
  flex-shrink: 0;
}
main {
  flex: 1 0 auto;
}

小提琴手：http://jsfiddle.net/d5syw3dc/

票数 21

Stack Overflow用户

发布于 2015-08-10 00:44:29

这个问题还有另一个解决办法。

在这种情况下，可以使用伪元素拉伸行：

首先，使用100 of 而不是100%

.container {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

之后，只需将伪元素添加到具有完全相同高度值的.container中。

.container::after{
  content: '';
  height: 100vh;
  visibility: hidden;
}

这里，见我的代码http://codepen.io/anon/pen/LVazgQ

票数 5

Stack Overflow用户

发布于 2016-09-02 08:16:15

当min-height与flex布局相关联时，它在IE10/11中无法工作(请查看错误报告)。使用另一个flex容器来修复它。

编辑：刚刚发现我没有回复原来的帖子，只是被投票结果误导了。所以我们开始：

双列布局

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="sidebar"></div>
        <div id="content"></div>
    </div>
</div>

CSS

.ie-fixMinHeight{
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
}

#content {
    flex-grow:1;
}

不要直接在body上使用柔性盒布局，因为它破坏了通过jQuery插件插入的元素(自动完成、弹出等等)。

这里是基于您的代码的固定布局。

粘脚

HTML

<div class="ie-fixMinHeight">
    <div id="page">
        <div id="header"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </div>
</div>

CSS

.ie-fixMinHeight {
    display:flex;
}

#page {
    min-height:100vh;
    width:100%;
    display:flex;
    flex-direction:column;
}

#content {
    flex-grow:1;
}