小编Auk*_*uke的帖子

带滚动区域的嵌套弹性框

我正在尝试在最新的Chrome,Firefox和IE11中实现这种布局:

布局示例

我可以使用以下内容:

html {
  box-sizing: border-box;
}
*, *:before, *:after { 
  box-sizing: inherit;
}

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

p { line-height: 2em; }

header, footer, article { padding: 10px; }

#parent {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    background-color: limegreen;
}

#parent > header {
    flex: none;
    background-color: limegreen;
}

#parent > footer {
    flex: none;
}

#child {
    display: flex;
    flex-direction: column;
    background-color: red;
    height: 100%;
    min-height: 0;
}

#child > header …
Run Code Online (Sandbox Code Playgroud)

css flexbox

6
推荐指数
1
解决办法
2074
查看次数

标签 统计

css ×1

flexbox ×1