플로트 오른쪽에 가로 스크롤 막대가 없습니다.

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

  •  06-07-2019
  •  | 
  •  

문제 

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

첫 번째 float 왼쪽 ID와 float 오른쪽 ID의 주석 처리를 제거하면 표시됩니다.시도한 솔루션도 주석 처리했습니다.

복사하여 붙여넣기한 전체 재현본이 있어야 합니다.

도움이 되었습니까?

해결책

자바스크립트를 사용하지 않고는 이 문제를 해결할 수 있는 방법이 없다고 생각합니다.브라우저는 해당 페이지의 왼쪽 위 모서리를 기준으로 페이지를 렌더링하므로 해당 0,0 지점 위나 왼쪽에 있는 모든 항목은 사실상 화면을 벗어납니다.모든 오버플로는 아래쪽과 오른쪽에서 발생합니다.블록 요소 내부의 콘텐츠와 동일한 방식입니다.따라서 페이지 오른쪽을 기준으로 항목이 배치된 경우 너비가 100%보다 넓습니다.0,0 원점 왼쪽 부분은 단순히 화면 밖에 표시됩니다.

그래도 누군가가 내가 틀렸다는 것을 증명하고 싶습니다.

작동하는 자바스크립트 솔루션은 다음과 같습니다.

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

다른 팁

나는 (내가 생각하는 것) (내가 생각하는) 비슷한 문제를 가지고 있었는데, 그것을 보유하는 div보다 더 넓은 캔버스 요소를 올바른 정렬하고 싶었던 비슷한 문제를 가졌다. DIV는 약 300px, 캔버스 요소는 약 1000px입니다.

사용 float: right, 캔버스는 오른쪽으로 정렬되었지만 DIV의 스크롤 바는 사라졌습니다.

나는 이것을 jQuery를 사용하여 해결했습니다 scrollLeft() div 및 캔버스 너비를 기준으로 초기 스크롤을 설정하려면 다음과 유사합니다.

$("#div").scrollLeft(canvas.width() - div.width() )
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top