两列布局中的粘性页脚位置

此主题是this one的更新版本。我会尽力解释我的问题，而不是我在另一篇文章中解释的问题。这个问题与两种情况下页脚的位置有关。两列布局中的粘性页脚位置

情况1：

第一种情况是当身体的内容是不够的，以填补浏览器的高度，所以页脚必须固定在的底部浏览器。

情况2：

第二种情况是当所述主体的所述内容的高度高和溢出。在这里，我不希望页脚固定在底部，所以页脚必须位于内容的底部。

第一种方法和链接到小提琴的例子是在另一篇文章的上述链接。

顺便说一句。我知道这可以使用JavaScript来完成，但我只想使用CSS规则。任何想法？

来源

2016-11-24 Apalabrados

你为什么不继续这是你原来的线程？ – mlegg

http://codepen.io/paulobrien/full/rxyEMN/ –

所有你需要的是谷歌的“粘脚”。但让我介绍一下我以前使用过的两种解决方案，对我来说工作正常。第一个使用CSS 2.1 http://ryanfait.com/sticky-footer/，第二个使用Flexbox https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ – ed1nh0

我建议使用嵌套Flexbox的，下面的例子：

jsFiddle

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
    margin: 0; 
 
} 
 
.container { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 
.content { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
}

<div class="header">header</div> 
 
<div class="container"> 
 
    <div class="sidebar">sidebar</div> 
 
    <div class="content"> 
 
    <div class="main"> 
 
     conent<br>conent<br>conent<br>conent<br>conent<br> 
 
     conent<br>conent<br>conent<br>conent<br>conent<br> 
 
     conent<br>conent<br>conent<br>conent<br>conent<br> 
 
     conent<br>conent<br>conent<br>conent<br>conent<br> 
 
    </div> 
 
    <div class="footer">footer</div> 
 
    </div> 
 
</div>

来源

2016-11-24 17:57:37 Stickers

两列布局中的粘性页脚位置

回答

相关问题