Question

工具：CSS和Flexbox

注意：这个问题严格来说是一个CSS / Flexbox美学问题

问题：这些天我的页脚不会被种植。当你垂直调整大小时，它会缩小并从页面上滑落。

我使用了一个很好的Holy-Grail layout，当你在中间内容让路的时候垂直缩小窗口时，页眉和页脚停留在他们的位置。

生活很棒 - 直到我将我的CSS翻译成React的JSX风格，其中迫使我在我的页脚周围包含额外的div。

在生活很美好之前：

<div class="main-container"> /*flex-direction:column
     <div class="header">
     <div class="canvas">   /*my pretty flex rows*/
     <div class="footer">

翻译破坏了我的一周后：

<div class="main-container"> /*flex-direction:column
     <div class="header">
     <div class="extra-container"> /*dang you React*/
        <div class="canvas">   
        <div class="footer">

您可以在http://jsfiddle.net/wd6o22dr/

查看此谜题

前锋大师的脑筋急转弯：

考虑到保持“额外容器”是必须的，当你垂直调整页面大小时，如何防止页脚缩小并从页面上滑落？

Answer 1

考虑到保持“额外容器”是必须的，你是怎么做的在调整大小时，防止页脚缩小并从页面上滑落页面垂直？

您拥有的一个选择是绝对定位。

HTML

没有变化。

CSS

向现有声明块添加四条规则。

#footer {
    height: 50px;
    border: 1px solid black;
    background-color: black;
    position: absolute; /* NEW */
    bottom: 0;  /* NEW */
    z-index: 1;  /* NEW */
    width: 100%;  /* NEW */
}

DEMO：http://jsfiddle.net/wd6o22dr/1/

CSS和Flexbox：让页脚粘贴

1 个答案: