html - 每当我更改时缩短我的着陆页元素重叠的浏览器高度

Question

出于某种原因，每当缩短浏览器的高度时，元素就会开始重叠。

我尝试在 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/

非常感谢!

这是正常情况下的样子

这是当您缩短浏览器高度时的样子

Answer 1

基本上，这听起来像是您希望页脚具有“粘性”，即始终位于页面底部。 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