2

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

预期行为

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

重叠的问题

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

  • 让绝对定位菜单“向下”增长？
  • 还是将与底部对齐的边缘设置为某个高度（使其从该点向底部增长）？
  • 或为菜单提供布局使其推送上述元素（我试过玩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/

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

粘性页脚正确下推

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

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

编辑：我认为风是这样吹的： 如何避免固定元素悬停页面内容？ 到此结束： 响应式网站的粘滞页脚

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

好吧，实际上我可以通过mediaqueries来防止这种行为，这很简单。但我想知道是否有“一劳永逸”的解决方案。

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

另外，我已经阅读了CSS Sticky Footer，它似乎也有同样的问题。

我想不出这用纯 CSS 是不可能实现的……我应该放弃吗？

4

2 回答 2

1

让绝对定位菜单“向下”增长？

在您的 <ul> 页脚元素上，替换bottom:0为top: 83%

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

于 2013-04-18T08:55:37.130 回答
-1

确保您的包装器/容器是相对的。在它下面将您的页脚作为相对位置并添加 top:100%

于 2013-04-17T14:31:30.500 回答