Sem barra de rolagem horizontal no flutuador direito

StackOverflow https://stackoverflow.com/questions/1633971

  •  06-07-2019
  •  | 
  •  

Pergunta 

<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>

Remova o comentário da primeira bóia deixou id com o flutuador caminho certo e você vai ver. Eu deixei meu soluções experimentadas comentada também.

Você deve ter uma repro completo a partir de uma cópia e colar.

Foi útil?

Solução

Eu não acredito que há alguma maneira de contornar isso sem usar javascript. O navegador renderiza uma página em relação ao canto superior esquerdo da página, então qualquer coisa posicionado acima ou à esquerda do que 0,0 ponto é efetivamente fora da tela. Todos estouro acontece ao fundo e à direita. É da mesma forma com dentro do conteúdo de qualquer elemento de bloco. Então se você tem um item posicionado em relação ao lado direito da página, maior que a largura de 100%. A parte à esquerda do ponto de origem 0,0 será simplesmente fora da tela.

Eu adoraria que alguém me provar que errado.

Aqui está uma solução javascript que funciona: 

<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>

Outras dicas

Eu tinha (o que eu acho que pode ser) um problema semelhante onde eu queria-align direito um elemento de tela que é mais largo então o div que o detém. O div é sobre 300px, o elemento canvas cerca de 1000px.

Usando float: right, a tela foi alinhado à direita, mas as barras de rolagem no div desapareceu.

Eu resolvi isso com jQuery usando scrollLeft() para definir o deslocamento inicial com base nos div e lona larguras, semelhante a: 

$("#div").scrollLeft(canvas.width() - div.width() )
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top