个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
27
4
鉴于下面的基本 HTML 结构(我无法更改)，我知道我可以使用此 CSS 扩展主要内容 div:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
#columns {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
}<body>
<header>
HEADER CONTENT
</header>
<div id="columns" class="container">
MAIN CONTENT
</div>
<footer class="footer">
<div class="container"> </div>
<div id="footer-content">
FOOTER CONTENT
</div>
</footer>
</body>但是“列”部分的样式我真的不想扩展到内容下方，所以如果可能的话，我更愿意在页 footer 分。
我已经尝试了所有我能想到的方法，但我是一个 css 初学者，但没有任何效果。
这可以做到吗？
最佳答案
我用 codepen 弄明白了在 SCSS 模式下，所以我可以嵌套选择器。这使得实验变得更加容易。
事实证明我需要两个 flexboxes:一个扩展整个页 footer 分以填充可用空间，另一个在页脚内以同样扩展填充容器。
为了便于说明，以下是添加到每个内容部分的 background-color 代码:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
margin: 0;
}
body header {
background-color: green;
}
body #columns {
background-color: blue;
}
body #footer-content {
background-color: red;
}
body .footer {
flex: 1;
display: flex;
flex-direction: column;
}
body .footer .container {
flex: 1;
}<body>
<header>
HEADER CONTENT
</header>
<div id="columns" class="container">
MAIN CONTENT
</div>
<footer class="footer">
<div class="container"> </div>
<div id="footer-content">
FOOTER CONTENT
</div>
</footer>
</body>关于html - flexbox是否可以通过扩展上一个页 footer 分来使用 'sticky'最后一个页 footer 分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53140911/
27
4
0
鉴于下面的基本 HTML 结构(我无法更改)，我知道我可以使用此 CSS 扩展主要内容 div: html, body { height: 100%; } body { display: fl
这应该类似于 iOS tableview 页脚，也可以在各种网站中看到(粘性页脚)。 我想实现以下目标: A 是具有可变行数的 RecyclerView。 当 A 小于屏幕(或父级)尺寸时，B(页脚)
我有一个 Bootstrap 面板，底部有两个按钮: {{ Form::open( array('route' => array('dogs.edit', $dog->id)
我是一名优秀的程序员,十分优秀！