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

我正在制作液体页面，并且我有一个水平菜单栏（ul）绝对定位到底部（粘性页脚）。响应式网页中的粘性页脚 - 当窗口调整大小时重叠内容

Expected behaviour

这个东西没有问题，但是当我调整浏览器，明显向上堆叠彼此菜单内元素，使得菜单过高和主要内容重叠。

The problem with the overlap

有什么办法（以下任一）

使绝对postioned菜单成长 “向下”？
或设置在一定高度对齐底部的边缘（以使它从该点到底部增长）？
或给布局的菜单，使其推动上述元素（我试过玩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/

若y你可以写更多的段落，菜单正好顺着他父亲的底部。

Sticky footer properly push down

但调整框架的时候可以看到的重叠效应。

在此先感谢。网络应该只在现代浏览器中工作，如果可能的话，使用纯CSS（无JS）。

编辑：我觉得风在吹以下方式： How to avoid fixed element from hovering page contents? 要结束这个： Sticky Footer for Responsive Site

但目前还没有有用的答案...

好吧，其实我可以通过媒体查询来防止这种情况，这很简单。但我想知道是否有“一劳永逸”解决方案。

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

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

我不知道这是不可能实现与纯CSS ...我应该放弃吗？

来源

2013-03-13 Arkana

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

在您<UL>页脚元素，top: 83%

更换bottom:0或者，如果你想按像素控制它，用top: 100%; margin-top: -54px;

来源

2013-04-18 08:55:37 sphair

感谢您的回答。我试图避免像素单位，因为网络被认为是液体。在这个具体的例子中，你的解决方案是有效的，但不够好，因为如果第二列增长，页脚不再粘在底部。有一个[小提琴]（http://jsfiddle.net/KQhLs/7/）实施你的建议。 – Arkana

好吧，所以百分比是我认同的黑客。像素边距的第二个解决方案在你的例子中工作正常，如果你想让页脚位于页面底部并向下增长（这是你想要的，还是应该固定在屏幕底部？），但是如果你想要避免使用像素来定义页脚的高度我没有选择:) – sphair

如何使用position：fixed？ – sphair

-1

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

来源

2013-04-17 14:31:30 DiederikEEn

如果你看到小提琴，容器是相对的又更换bottom:0 ..如果我明白你的意思，那么把粘脚放在容器下面就行了。 [（Fiddle）]（http://jsfiddle.net/KQhLs/4/） – Arkana

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

回答

相关问题