使用css溢出导致奇怪的行为

我有this website。使用css溢出导致奇怪的行为

我已经设置与position fixed页脚与100%和left:0px和bottom:0px一定height和width。

即使我在上面的div元素上有overflow:auto，当调整浏览器的大小时，页脚上方的内容会在页脚后面被阻止。

下面是浏览器调整大小和内容被阻止时的屏幕截图。

来源

2011-08-07 Abap newbie

那么，你想要什么？ –

@ J-16 SDiZ当您调整页脚时不包括内容。 – Sparkup

内容被停靠了..当我调整浏览器的大小时，滚动条不会出现。我想要滚动条出现。 –

您可以通过在这种情况下让你的包装底边距等于你的页脚的高度+填充，所以解决这个问题：

#wrapper { 
    margin-bottom: 213px; 
    overflow: auto; 
}

的解释是，当你定位的东西使用position:fixed ，您可以按照与position:absolute相同的方式将其从文档流中移除（不同之处在于固定将您的内容固定到视口而不是文档，因此不会滚动）。这意味着通常定位的内容不受其影响，并且就好像它不在那里一样。

就你而言，你的包装div使用了所有可用的空间，其中包括脚注后面的空间。通过在包装的底部添加一个边距，您可以在页脚开始时有效地将其停止，并且如果需要更多空间，将会显示一个滚动条。

来源

2011-08-07 15:12:23 shanethehat

打我冲 - 填充作品也（更好imho） –

谢谢...它的工作可以请你解释它，我不知道它是如何工作的。谢谢.. !! –

@Liam - 我不会使用填充，所以如果他想为包装div添加通用填充，他可以这样做，而不必考虑页脚。另外，从盒子模型的角度来看，我发现它更有意义，但这只是个人偏好。 – shanethehat

-1

图像是越来越停靠，因为它有position: fixed，其中间粘合现货窗口，而不是在页面的整体流量现货上。人们使用这种技术来制作不会随页面滚动的导航页眉和页脚。

对于你想要做的，你应该漂浮你的页面的内容，并将clear: both应用到你的页脚的CSS，这将导致它清除右和左浮动元素，并强制它的底部。使用固定或绝对定位将允许其他元素隐藏在页脚后面。

另一种方法是使用position: absolute而不是position: fixed粘上页脚到页面底部，然后包裹在<div>的主要内容，并给予一个底边距等于页脚的高度。

在另一个说明中，在声明html标签和添加属性时使用小写字符被认为是最佳做法;我注意到你有很多大写字母。将css和javascript卸载到外部文件通常也是一个好主意，然后分别使用<link rel="stylesheet" type="text/css" src="path_to_css_file_from_html_file_location">和<script src="path_to_javascript_file_from_html_file_location" >来导入它们。

来源

2011-08-07 15:10:00

即使没有内容或内容很小，他也希望页脚坐在页面的底部。 – Sparkup

如果没有内容，页脚将成为页面上的唯一内容，并且根据定义，它既位于顶部也位于底部。如果他播放他的内容并告诉页脚清除它，那么无论内容有多小，它都将低于该内容。为什么这是downvoted？这是一个非常有效的解决方案。我甚至给了他一些友好的提示......：/ –

你可能想是这样的：

<body> 
    <div id="page"> 
    <div id="logo">...</div> 
    <div id="head">...</div> 
    <div id="wrapper">...</div> 
    <div id="footerSpacer"></div> 
    <div id="footer">...</div> 
    </div> 
</body>

然后CSS文件：

html, body { 
    height: 100%; 
} 
page { 
    min-height: 100%; 
    position: relative; 
} 
footerSpacer { 
    height: 200px; 
} 
footer { 
    position: absolute; 
    bottom: 0; 
    height: 200px; 
}

这样的页脚是在正常的页面流的地方，如果在网页长。但是，如果页面比窗口高度短，它将停留在窗口的底部。

来源

2011-08-07 15:15:28 Codo

如果只是直接到底部，你是否需要脚注position:fixed;？为什么不只是做position:absolute;？要么是这样，要么降低页脚的z-index，使其落后于内容。

来源

2011-08-07 15:17:08

这是一个不好的答案。固定位置是将页脚固定在屏幕底部以便与内容一起滚动的一种方式。当使用正确的位置：固定在一个元素上可以产生很好的效果，所有的OP需要做的是在页面的底部添加边距或者填充，等于页脚的总高度并且解决。 –

看看内容。真的没有任何滚动。 '位置：绝对;'会工作得很好。 –

假设网站的每个页面的内容都是相同的。 –

你可不可以在body div和footer之间插入一个div，然后给它添加一个class：clear; both;

来源

2011-08-07 16:14:47 Gezzamondo

使用css溢出导致奇怪的行为

回答

相关问题