Горизонтальная полоса прокрутки справа отсутствует - PullRequest
Новая
       10

Горизонтальная полоса прокрутки справа отсутствует

3 голосов
/ 28 октября 2009 
<html>
<head>
<style type="text/css" rel="stylesheet">
    * {margin:0;padding:0;}

    div#box {background-color:green;width:1000px;}

    /* #box {position:absolute;top:0;right:0;} */
    /* #box {position:absolute;top:0;left:0;} */
    /* #box {float:right;} */
    #box {float:left;}

    .clearer {clear:both;}
</style>
</head>
<body>
    <div id="box">
        asdafdsf
    </div>
    <div class="clearer"></div>
</body>
</html>

Раскомментируйте первый идентификатор с плавающей точкой справа, и вы увидите. Я также оставил свои закомментированные решения закомментированными.

Вы должны получить полное повторение из копии и вставки.

Ответы [ 2 ]

2 голосов
/ 28 октября 2009

Я не верю, что можно обойтись без использования javascript. Браузер отображает страницу относительно верхнего левого угла этой страницы, поэтому все, что находится выше или слева от этой точки 0,0, фактически находится за пределами экрана. Все переполнения происходит снизу и справа. То же самое происходит с содержимым внутри любого элемента блока. Поэтому, если у вас есть элемент, расположенный относительно правой стороны страницы, ширина которого больше 100%. Часть слева от исходной точки 0,0 будет просто за кадром.

Хотелось бы, чтобы кто-то доказал, что я не прав.

Вот решение javascript, которое работает: 

<html>
<head>
<style type="text/css" rel="stylesheet">
    * {margin:0;padding:0;}
    div#box {background-color:green;width:1000px;}
    #box {position:absolute;top:0;left:0;}
    .clearer {clear:both;}
</style>
</head>
<body>
    <div id="box">
        asdafdsf
    </div>
    <div class="clearer"></div>
    <script type="text/javascript">
        function layout() {
            if( typeof( window.innerWidth ) == 'number' )
                this.screenWidth = window.innerWidth;   
            else //patch for IE
                this.screenWidth = document.body.clientWidth;
            this.el = document.getElementById('box')
            if (this.el.offsetWidth > this.screenWidth)
                window.scroll(this.el.offsetWidth,0);
            else
                this.el.style.left = (this.screenWidth - this.el.offsetWidth) + 'px';
        }
        function eventListener(el,action,func) {
            if (el) {
                if (el.addEventListener)
                    el.addEventListener(action, func, false);
                else if (el.attachEvent)
                    el.attachEvent('on' + action, func);
            }
        }
        eventListener(window,'resize',layout);
        layout();        
    </script>
</body>
</html>
0 голосов
/ 31 марта 2015

У меня (как мне кажется, может быть) похожая проблема, когда я хотел выровнять элемент холста вправо, который шире, чем div, в котором он находится. Div - около 300px, элемент canvas - около 1000px.

Используя float: right, холст был выровнен по правому краю, но полосы прокрутки на div исчезли.

Я решил это с помощью jQuery, используя scrollLeft(), чтобы установить начальную прокрутку на основе ширины div и canvas, аналогично: 

$("#div").scrollLeft(canvas.width() - div.width() )
...