Question

我正在制作一个液体页面，我有一个水平菜单栏（ul）绝对定位到底部（粘性页脚）。

Expected behaviour

这个东西没有问题，但是当我调整浏览器大小时，显然菜单中的内部元素相互堆叠，使菜单太高并且与主要内容重叠。

The problem with the overlap

有没有办法（以下任何一种）

让绝对位置的菜单“向下”增长？
或设置与底部对齐的边缘处于某个高位（使其从该点向下生长）？
或给菜单布局，使其推动上述元素（我尝试过玩overflow但不起作用对我来说？？

那是html：

<div class="container">
    <div class="izda">
        Foo
    </div>
    <div class="dcha">
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum dolor</p>
        <p>Lorem ipsum dolor</p>

        <p>Lorem ipsum dolor LAST</p>
        <ul>
            <li>Item</li>
            <li>Another</li>
            <li>More</li>
            <li>Item</li>
        </ul>
    </div>
</div>

和css：

.container {position:relative}
.izda {background:red;
       height:20em; 
       display:inline-block; 
       width:20%; 
       vertical-align:top;
}
.dcha {background:gold; 
       display:inline-block; 
       width:78%; 
       margin-bottom:3em;
}
ul {position:absolute;
    bottom:0;
    background:pink;
    margin:0;
    padding:0;
    max-width:100%;
}
ul li {float:left; 
       list-style:none;
       border:1px solid black;
       margin:0 1em;
       padding:1em;
}

这里有一个工作示例：http://jsfiddle.net/KQhLs/2/

如果你写了更多的段落，由于父亲的边缘底部，菜单会正常下降。

Sticky footer properly push down

但是在调整框架大小时，您可以看到重叠效果。

提前致谢。网络应该只在现代浏览器中工作，如果可能的话，用纯css（没有JS）。

编辑：我认为风在吹这些方式： How to avoid fixed element from hovering page contents? 结束于此： Sticky Footer for Responsive Site

但是没有有用的答案......

嗯，实际上我可以使用 mediaqueries 来阻止这种行为，这很简单。但我想知道它是否存在“一劳永逸”的解决方案。

EDIT2：我刚读过A list apart - Exploring footers。除了JS解决方案，我尝试了所有，但问题仍然存在 - 如果你在页脚中放置浮动元素，它会与主要内容重叠。

此外，我已阅读CSS Sticky Footer，似乎也有同样的问题。

我无法想象用纯粹的CSS来实现这个目标......我应该放弃吗？

Answer 1

使绝对位置菜单“向下”增长？

在你的＆lt; ul＆gt;上页脚元素，将bottom:0替换为top: 83%

或者如果您想以像素方式控制它，请将bottom:0替换为top: 100%; margin-top: -54px;

Answer 2

确保您的包装/容器是相对的。在它下面放置你的页脚作为亲戚并添加顶部：100％

响应式网页中粘性页脚 - 窗口调整大小时重叠内容

2 个答案: