logo标签列表

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

csswidthfooterbackground-colorhorizontal-scrolling
7

请查看问题

当我将窗口滚动到水平位置时，页眉和页脚会发生错误。

请使用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;
    }

Sorry, I need the content that you want me to translate.
    <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>
这是因为宽度100％是窗口的宽度，而不是实际文档的宽度。 - user2067005
<!DOCTYPE html > <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> - Falguni Panchal
body{ overflow-x: hidden;} - Kamaro
4个回答
10

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

对其父容器应用 min-width，并确保其子元素具有 width: 100%。参见下文：

.containerMain {
    width: 100%;
    min-width: 900px;
}
.footer {
    width: 100%;
}
1
我为您提供一个使用jquery的解决方案：

我建议您使用jQuery：

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

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

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

}

将想要适应文档宽度的 div 放入函数中，并在 body 上添加 onload="resizeHandler()" 属性。
1
不行，这太糟糕了。没人要这样做。 - Trip
0

以下 CSS 属性应该可以解决问题。

.divwithbackground{ overflow-x: hidden;}
-1

这不能仅通过 CSS 实现。您需要进行 jQuery 集成。

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

试试这个。应该可以工作！

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接