0

我正在尝试创建一个具有设定高度的页眉和页脚的弹性框，并具有一个灵活的内容区域，该区域可能会或可能不会滚动，具体取决于其中的内容量。

你可以在这里看到我的小提琴http://jsfiddle.net/evilbuck/EtQXf/3/

这适用于 FF、chrome，但不适用于 IE10。IE10 似乎不尊重溢出属性并渗入下面的内容。

我的期望是 .content 区域将扩展以填充其父级的剩余空间并在必要时滚动。

<div class="container">
  <header>A header</header>
  <div class="content">Some content that will overflow or not.</div>
  <footer>A footer</footer>
</div>

.container {
    margin: 10px auto;
    width: 300px;
    height: 350px;

    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;

    flex-direction: column;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
}

header, footer {
    border: 1px solid grey;
    height: 30px;
    padding: 5px;
    text-align: center;
    clear: both;
}



.content {
   flex: 1;
   -webkit-flex: 1;
   -moz-flex: 1;
   -ms-flex: 1;
    overflow: auto;
}

我在这里做错了什么？

4

1 回答 1

0

我会把这个留给其他人，但缺点是我需要使用

display: -ms-flexbox;

更新的小提琴：http: //jsfiddle.net/EtQXf/4/

于 2013-10-04T23:54:26.683 回答