更改页面宽度后,页脚消失了。

我希望页面缩小后能以列显示。 我的页脚不在容器中,因为当我将其设置为容器时,它位于容器中第四个元素的右边。 我不知道如何放置在正确的位置(页面底部)。

.container > *{
  padding: 10px;
  flex: 1
}
.container{
  display: flex;
  height: 400px;
}

@media screen and (max-width: 800px) {
.container{
  flex-direction: column;
}
}

<div class="header">
</div>
<div class="container">
      <div class="lol first"> 
          <div class="list">
          </div>
      </div>
       <div class="lol second"> 
       </div>
        <div class="lol third"> 
        </div>
         <div class="lol fourth">
         </div>
</div>
      <div class="footer">  
      </div>
</div>

#1楼 票数:0

您可以在.lol而非容器上放置高度:

.container{
  display: flex;
  flex-wrap: ;
}
.lol {
  height: 400px;
}

https://codepen.io/jfitzsimmons/pen/gOYBdrq

  ask by Korneliusz Burian translate from so

未解决问题?本站智能推荐:

2回复

页脚看不到 flexbox,因此它位于图像的顶部。 如何响应式地将页脚放到网页底部? [关闭]

关闭。 这个问题需要细节或清晰。 它目前不接受答案。 想改
5回复

CSS页脚不会在小屏幕尺寸的底部停留

我在我的网站上遇到一个问题,即我的页脚在较小的屏幕尺寸上没有停留在页面底部。 图片: https : //prnt.sc/zzjral 指数: 页脚: CSS: *注意:我尝试了以下方法: 并没有工作。 我尝试了 .main 上的相对位置和页脚上的绝对位置,但没有奏效。
3回复

页脚 flexbox 功能不工作

几个月前我刚刚开始做前端 Web 开发,并且仍然习惯于所有属性的工作方式。 出于某种原因,我的页脚没有显示内联图标,而是将它们与文本装饰一起保持垂直 这是我的网站:jarrelthomas.com 和代码 HTML CSS
1回复

Flex Box粘滞页脚内容溢出

似乎有很多这种情况。 这是一个简单的jsfiddle,其中页脚停留在底部,但是当内容溢出时,页脚不会移到底部。 当内容扩展时,我希望页脚移至底部。 HTML: CSS: http://jsfiddle.net/deadpickle/njvzjgje/2/
1回复

页脚出现在较小的屏幕中

我有一个html页面,其中在其中显示一个表格,其中包含来自数据库的数据以及页面底部的页脚。 问题在于,对于较小的屏幕(大约小于760像素),页脚而不是在底部,而是向上移动 ,从而重叠并隐藏了部分显示数据 。 无论屏幕大小如何,我都希望页脚始终位于页面底部。 我的代码段在下面提到
3回复

删除页脚下的小空白

我一直在寻找解决方法,以解决出现在页脚下方的一小部分空白,但似乎无济于事。 我试过操纵margin-bottom padding-bottom无济于事。 带有页脚的网站位于: 网站 该页脚的类名称为“ footerWrapper”,我希望使用浏览器DOM编辑器可以使您对情况有更好的
1回复

页脚隐藏在简单的1列夹层CSS布局中的内容

我试图让一种看似简单的机制仅与CSS一起使用,而我一直碰壁。 总体布局是我有一个带有页眉和页脚的单列布局。 我希望页眉和页脚保持“固定”在视口的顶部和底部,并且如果内容太多,我希望中间部分进行调整以用垂直滚动条填充其余空间。 我觉得我已经很接近了,但是问题是中央div延伸到页脚后面
1回复

IE8中具有100%内容高度的页眉/页脚布局

我一直试图想象如何在没有JavaScript和填充的情况下实现这一点,到目前为止,这是不可能的任务。 有没有人知道是否有任何方式使用纯CSS和div来实现简单的布局: http://jsfiddle.net/zLzg8v3s/1/ 这正是我想要做的但是使用div和CSS: