html - CSS - 页脚正在使用全局页脚在网站的其他页面上自行切断

标签 html css

此网站是使用称为 Zoo Printing 的后端网络打印服务制作的。我工作的客户不喜欢他们的原始设计,所以我受雇与他们处理后端的开发团队一起重新设计它。我们找不到页脚(全局的)在除首页以外的所有其他页面上被截断的原因。他们的开发人员指责我的代码,不会告诉我问题出在哪里。你们中的一位可以检查我的代码,并告诉我是什么导致了这种情况吗?

网址是Advanced Litho .

首页看起来非常适合页脚,但当您转到另一页时,您会看到它在底部被截断的情况。

    <div id="footer">
    <div class="content_width"> 
        <h1>The Largest Selection of Offset & Digital Products in the Market Today</h1>
            <a href="https://www.facebook.com/AdvancedLithoPrinting" target="_blank"><img src="http://www.offsetprinting.com/img/custom_images/facebook_icon.png" /></a> <!-- Facebook Link -->
            <a href="https://www.linkedin.com/pub/advanced-litho-printing-bindery/42/556/a54" target="_blank"><img src="http://www.offsetprinting.com/img/custom_images/linkdin_icon.png" /></a> <!-- Linkdin Link -->
            <a href="x"><img src="http://www.offsetprinting.com/img/custom_images/instagram_icon.png" target="_blank" /></a> <!-- Instragram Link -->

        <ul> <!-- Footer Navigation Menu -->
            <li><a href="http://www.offsetprinting.com/">Home</a></li>
            <li><a href="http://www.offsetprinting.com/account/contact">Contact</a></li>
            <li><a href="https://secure.offsetprinting.com/account/estimate">Quotes</a></li>
            <li><a href="http://www.offsetprinting.com/helpcenter">Help Center</a></li>
            <li><a href="https://secure.offsetprinting.com/samples">Samples</a></li>
        </ul>

        </div>

        <div id="terms_policy">
            <a href="http://www.offsetprinting.com/pages/terms-and-conditions" target="_blank">TERMS & CONDITIONS</a>&nbsp;|&nbsp;<a href="http://www.offsetprinting.com/pages/privacy-policy" target="_blank">PRIVACY POLICY</a>
        </div>


</div>  <!-- End of Footer -->

<div id="copyright"> <!-- Copy Right at Lower of Footer -->
    <h4>© <a href="www.advancedlitho.com">2015 Advanced Litho Printing & Bindery</a> + 20996 Bake Parkway, Suite 112 + Lake Forest CA 92630-2169 + (949) 215-9060 + Fax (949) 215-9181</h4> 
 </div>

    #terms_policy  {
    margin:0px auto;
    width:259px;
    color:#FFF;
}
#terms_policy a {
    color:#FFF; 
}

#terms_policy a:hover {
    color:red;
    text-decoration:none;
}
#footer {
    height:190px;
    border-top: 1px solid #000;
    clear: both;
    background-color:#343232;
}

#footer .content_width {
    height:150px;
    background-color:#343232;
    padding-top: 14px;
    text-align: center;
    color: #333333;
}
#copyright {
    border-top: 1px solid #000;
    clear:both;
    height:47px;
    background-color:#cec41e;
}
#copyright h4 {
    text-align: center;
    width:100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */   
}
#copyright a {
    color:#000;
    text-decoration:none;
}

#copyright a:hover {
    color:red;  
}   
#footer h1 {
    padding:0px;
    margin:0px;
    font-family: 'Open Sans', sans-serif;
    font-size:14px;
    color:#FFF;
}
#footer img {
    margin-top:25px;
    margin-right:5px;   
    height:40px;
    -webkit-transition-duration:0.8s;
    -moz-transition-duration:0.8s;
    -o-transition-duration:0.8s;
    transition-duration:0.8s;
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
    overflow:hidden;
}
#footer img:hover  {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    transform:rotate(360deg);
}  
#footer li {
    display:inline-block;
    border-right:1px solid #FFF;
    float:left;
    margin:0px;
    padding: 0 8px;
}
#footer li:nth-child(1) {
    border-left:1px solid #FFF;

}
#footer ul {
    margin-left:250px;
}
#footer li a {
    font-family: 'PT Sans Narrow', sans-serif;
    font-size:18px; 
    color:#FFF;
}

最佳答案

main.css 中的这段代码导致它不显示:

body > div:nth-child(4) { /*Removes The Invisible Navigation*/
    position:absolute;
    left: -1000px;  
}

关于html - CSS - 页脚正在使用全局页脚在网站的其他页面上自行切断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31059183/

相关文章:

html - 如何在 Bootstrap 中一行应用这个小部件

html - 如何确保此页面的样式正确流动?

html - 在html中拟合图像

javascript - md-sidenav Angular Material 防止点击外部关闭

javascript - Datetimepicker jQuery 自定义 CSS

javascript - 将表单字段重置为初始状态

python - 如何知道哪个表单提交到flask web服务器

html - 包含 SWF 的 DIV

javascript - 通过单击背景关闭叠加层

c# - .net 核心网站不呈现 CSS