背景 css 100% 宽度水平滚动问题

Posted 2023-02-21

【中文标题】背景 css 100% 宽度水平滚动问题

【英文标题】：background css 100% width horizontal scroll issue

【发布时间】：2013-07-08 01:47:40

【问题描述】：

当我将窗口滚动到水平然后页脚和页眉中断时，我遇到了这个问题。

请帮忙处理 CSS

您可以在这里查看现场演示http://yeszindagi.com/

    body 
        font-family: Arial, Helvetica, sans-serif;
        font-size:1.3em;
        min-height:100%;
    


    .containerMain 
        min-height:100%;    
        width: 100%;
    


    .full 
    width:100%;
    

    .fixed 
    width:900px;    
    


    .footer 
        border-top:1px dashed #000;
        margin-top:5px;
        height:50px;
        background-color:#F7B200;
        bottom:0px;
        position:relative;
    

-------------- html 代码 ----- ----------------------

    <div class="containerMain">
    ....
    .....
    .........
    <div class="full footer clear ">
        <div class="fixed center">
            <div class="left">
                <ul class="links">
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </div>    
            <div class="social right">
                <a href="#" target="_blank" title="Facebook"><span class="facebook-mini"></span></a>
                <a href="#" target="_blank"><span class="twitter-mini" title="Twitter"></span></a>
                <a href="#" target="_blank"><span class="pinterest-mini" title="Youtube"></span></a>
                <a href="#" target="_blank"><span class="linkedin-mini" title="Linkedin"></span></a>
            </div>
        </div>
    </div>
    </div>

【问题讨论】：

这是因为width 100%是窗口的宽度，而不是实际的文档

w3.org/1999/xhtml">

body overflow-x: hidden;

【参考方案1】：

解决此问题的最佳方法是通过 CSS。

将min-width 应用于其父容器并确保其子容器具有width: 100%。见下文：

.containerMain 
    width: 100%;
    min-width: 900px;

.footer 
    width: 100%;

【参考方案2】：

我建议你使用 jquery 的一种解决方案：

$(window).bind('resize', resizeHandler);

function resizeHandler()
var newWidth = $(document).width();

$('.footerWrapper').css('width', newWidth);

将你想要适合文档宽度的函数 div 添加到 body onload="resizeHandler()" 属性中。

【讨论】：

不不，这太可怕了。没有人这样做

【参考方案3】：

下面的CSS属性应该可以解决的。

.divwithbackground overflow-x: hidden;

【参考方案4】：

这不能仅通过 css 来实现。您需要有 jquery 集成。

$('.footer').css(width:$('html').outerWidth()+$(window).scrollLeft());

试试这个。应该可以！