我使用了“圣杯”布局没有任何问题,并设法得到一个固定标题的粘性页脚。样式取自https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/。
.HolyGrail {
display: flex;
height: 100%; /* 1, 3 */
flex-direction: column;
}
.HolyGrail-header,
.HolyGrail-footer {
flex: none; /* 2 */
color: #FFFFFF;
height: 48px;
background-color: #222222;
}
.HolyGrail-body {
display: flex;
flex: 1 0 auto; /* 2 */
flex-direction: row;
padding: var(--space);
}
.HolyGrail-content {
flex: 1;
margin-top: var(--space);
background-color: #AAAAAA;
}
.HolyGrail-nav {
order: -1;
}
.HolyGrail-nav,
.HolyGrail-ads {
flex: 0 0 10%;
padding: 1em;
background: rgba(147, 128, 108, 0.1);
}
但是,我需要将页脚移动到内容下方,但旁边是侧边栏。将页脚移动到主块内部可能不是我想要的方法,因为我猜我需要一个围绕内容和页脚的包装器。但是,我不确定我应该在包装器中做什么。这就是我现在所拥有但不起作用的。
.HolyGrail-content-wrapper {
flex: 1;
}
html是:
<body>
<div class="HolyGrail">
<header class="HolyGrail-header">
Header.
</header>
<div class="HolyGrail-body">
<div class="HolyGrail-content-wrapper">
<main class="HolyGrail-content">
<p>Line of text.</p>
<p>Line of text.</p>
<p>Line of text.</p>
<p>Line of text.</p>
<p>Line of text.</p>
<p>Line of text.</p>
</main>
<footer class="HolyGrail-footer">
Footer.
</footer>
</div>
<nav class="HolyGrail-nav">
Sidebar.
</nav>
</div>
</div>
</body>
请参阅此plunkr:http://plnkr.co/edit/QWttptvPRplvHLk8MFRt?p=preview
答案 0 :(得分:0)
height:100%
必须从html
继承,否则它是100%没有(身体没有高度设置)。
你HolyGrail-content-wrapper
也需要成为弹性箱。
以完整页面模式运行以下代码段
html, body,.HolyGrail {
height: 100%;
margin:0;
}
.HolyGrail {
display: flex;
/* 1, 3 */
flex-direction: column;
}
.HolyGrail-header,
.HolyGrail-footer {
flex: none;
/* 2 */
color: #FFFFFF;
height: 48px;
background-color: #222222;
}
.HolyGrail-body {
display: flex;
flex: 1 0 auto;
/* 2 */
flex-direction: row;
padding: var(--space);
}
.HolyGrail-content {
flex: 1;
margin-top: var(--space);
background-color: #AAAAAA;
}
.HolyGrail-nav {
order: -1;
}
.HolyGrail-nav,
.HolyGrail-ads {
flex: 0 0 10%;
padding: 1em;
background: rgba(147, 128, 108, 0.1);
}
.HolyGrail-content-wrapper {
flex:1;
display:flex;
flex-flow:column;
}
&#13;
<div class="HolyGrail">
<header class="HolyGrail-header">
Header.
</header>
<div class="HolyGrail-body">
<div class="HolyGrail-content-wrapper">
<main class="HolyGrail-content">
<p>Line of text.</p>
<p>Line of text.</p>
<p>Line of text.</p>
<p>Line of text.</p>
<p>Line of text.</p>
<p>Line of text.</p>
</main>
<footer class="HolyGrail-footer">
Footer.
</footer>
</div>
<nav class="HolyGrail-nav">
Sidebar.
</nav>
</div>
</div>
&#13;