清除页脚以防止内容重叠

我找到了一种放置我喜欢的页脚的方法，除了页面调整大小时页脚与内容重叠的事实。清除页脚以防止内容重叠

我已经使用了结构和格式，我该如何“清除”页脚，以便在页面调整时避免掉落（避免#content的重叠）？

我试过clear: left，这对此无能为力。

基本上，我希望页脚始终可见，并且只要空间允许，就附加到窗口的左下角;但是，当窗口变小时，我不希望页脚重叠我的内容。

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 
html { 
    height: 100%; 
} 
body { 
    background-size: cover; 
    margin: 0; 
    height: 100%; 
} 
#wrapper { 
    min-height: 100%; 
    height: 100%; 
    min-width: 900px; 
    overflow: hidden; 
} 
.main_nav { 
    margin: 0; 
    width: 160px; 
    float: left; 
    padding-left: 40px; 
    overflow: hidden; 
} 
#content { 
    float: left; 
    width: 750px; 
    height: 600px; 
} 
#footer { 
    position: absolute; 
    bottom: 0px; 
    width: 100%; 
    height: 50px; 
}

HTML：

<body> 
<div id="wrapper"> 
    <div id="header"> 
    <h1></h1> 
    <ul class="main_nav"> 
     <li></li> 
    </ul> 
    </div> 
    <div id="content"> 
    </div> 
</div> 
<div id="footer"> 
    <div id="footer_content"></div> 
</div> 
</body>

来源

2013-05-06 pianoman

请纠正我。您希望在调整浏览器窗口大小时隐藏页脚？ – Ankur 2013-05-06 06:02:23

不，我希望页脚在空间允许时始终可见;但是，当窗口调整大小（较小）并且没有足够的页脚空间时，我不希望它重叠内容。 – pianoman 2013-05-06 06:30:06

答案已经被选中，但我想给一个替代方案。

“包装器”包含“标题”和“内容”，而“页脚”在其外部。你可以，例如，添加

z-index:10;

到包装的CSS和

z-index:1;

页脚的CSS。

这最后一个不是真的需要，但它是为了完整性。这样，每当他们进入“触摸”时，具有较高Z指数的那个将保持在前景上（即，在z轴上的较高水平，即垂直于屏幕表面的轴），并且其他元素将在后面滑动，根据自己的指数。

来源

2013-05-06 07:01:20

这个问题是因为宽度。您的宽度在每种情况下都不同，即内容，页脚&包装也是如此。我创建了一个jsfiddle

[http://jsfiddle.net/jvaibhav/xncuF/37/]

试试这个。

来源

2013-05-06 06:02:15

由于浮动菜单，这不起作用。 – pianoman 2013-05-06 06:19:11

清除页脚以防止内容重叠

回答

相关问题