CSS   发布时间:2022-04-17  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了css – 使用带有引导程序的flexbox粘性页脚大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用这个粘性页脚:

http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/@H_616_3@

body{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content{
  flex: 1;
}

但它弄乱了<宽度为768像素. 任何简单的CSS修复,以使其适用于所有分辨率? http://jsfiddle.net/2xvv5mod/@H_616_3@

解决方法

您需要为flexbox项目提供100%的宽度.

在这种情况下,那将是.content元素:@H_616_3@

Updated Example@H_616_3@

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}
.content {
    flex: 1;
}
@media only screen and (max-width: 768pX) {
    .content {
        width: 100%;
    }
}

大佬总结

以上是大佬教程为你收集整理的css – 使用带有引导程序的flexbox粘性页脚全部内容,希望文章能够帮你解决css – 使用带有引导程序的flexbox粘性页脚所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。