фон css 100% ширина горизонтальной прокрутки проблема

Пожалуйста, ознакомьтесь с проблемой

Я сталкиваюсь с этой проблемой, когда я прокручиваю окно по горизонтали, а нижний колонтитул и верхний колонтитул ломаются.

Пожалуйста, помогите с 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>

background-color css footer width horizontal-scrolling
person shahhardik.in    schedule 10.07.2013    source источник
comment
Это потому, что ширина 100% - это ширина окна, а не фактического документа.   -  person user2067005    schedule 10.07.2013
comment
‹!DOCTYPE html › ‹html lang=en xmlns=w3.org/1999/xhtml› ‹head› ‹meta http-equiv=Content-Type content=text/html; кодировка=UTF-8 /›   -  person Falguni Panchal    schedule 10.07.2013
comment
тело {переполнение-x: скрыто;}   -  person Kamaro Lambert    schedule 26.04.2016

Ответы (4)


arrow_upward
10
arrow_downward

Лучший способ решить эту проблему — через CSS.

Примените min-width к его родительскому контейнеру и убедитесь, что его дочерние элементы имеют width: 100%. Смотри ниже:

.containerMain {
    width: 100%;
    min-width: 900px;
}
.footer {
    width: 100%;
}
person Oriol    schedule 25.09.2013

arrow_upward
1
arrow_downward

Я предлагаю вам одно решение с jquery:

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

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

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

}

Поместите в функции div, которые вы хотите подогнать под ширину документа, и добавьте в body атрибут onload="resizeHandler()".

person BuDen    schedule 10.07.2013
comment
Нет нет это ужасно. Никто не делает этого - person Trip; 08.01.2014

arrow_upward
0
arrow_downward

Ниже свойства CSS должны быть в состоянии решить эту проблему.

.divwithbackground{ overflow-x: hidden;}
person Kamaro Lambert    schedule 26.04.2016

arrow_upward
-1
arrow_downward

Это не может быть достигнуто только css. У вас должна быть интеграция с jquery.

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

Попробуй это. Должно сработать!

person Enziz    schedule 01.12.2013