0

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

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

非常感谢提前！

这是正常的样子 普通的

这是缩短浏览器高度时的样子 在此处输入图像描述

4

1 回答 1

0

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

于 2013-07-01T18:17:14.367 回答