html - 每当我更改时，请缩短目标网页元素上的浏览器高度重叠

由于某种原因，只要缩短浏览器的高度，元素就会开始重叠。

我尝试在Firebug中将其拉起并对其进行故障排除..但是没有运气。希望你们中的一个可以帮助我！

编辑：

注意自从我添加视频以来，它一直在这样做

的HTML

<section id="video">
    <video width="745px" height="414px" controls="controls" poster="video/video-poster.png">
        <source src="video/intro-video.mp4">
        <source src="video/intro-video.ogv">
        <source src="video/intro-video.webm">
        <iframe width="745" height="414" src="//www.youtube.com/embed/Dhqnn3bA7LU" frameborder="0" allowfullscreen></iframe>
    </video>
</section>

的CSS

#video {
    position: relative;
    margin: 0 auto;
    margin-bottom: 15px;
    text-align: center;
    max-width: 745px;
    width: 100%    !important;
    height: auto   !important;

}

video {
    max-width: 745px;
    width: 100%    !important;
    height: auto   !important;
}

链接：http://kmgp.us/clients/stackoverflow/

提前非常感谢！

这是正常的样子


这是缩短浏览器高度时的外观

最佳答案

基本上，这听起来像您希望页脚是“粘性”的，即始终位于页面底部。 This css-tricks文章概述了您应该做的事情，但是您首先应该将<footer>移到<div id='#container'>之外，然后应用以下CSS：

#container {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -32px;
}
#container:after {
  content: "";
  display: block;
}
footer, #container:after {
 /* .push must be the same height as footer */
  height: 32px;
}

另外，正如您所指出的，您的背景也被扭曲了。那是因为您要将box-shadow应用于body元素。尝试将其附加到您的#container

关于html - 每当我更改时，请缩短目标网页元素上的浏览器高度重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17410894/