Question

我遇到了一个令我愚蠢的问题...我尝试使用css'right：0px'在页面的绝对右侧放置一个元素。但是看起来我的元素实际上放置的几个像素比预期的更远，我失去了一部分。

为了追捕这个问题，我已将我的案例简化为下面的HTML。

看起来宽度为100％的元素（也是正文！）实际上比视口宽（但是触发了scollbars）。我很傻。我在这里俯瞰什么？

<!DOCTYPE html>
<HTML>
<head>
    <STYLE>

        body{
            overflow: auto;
        }

        #div1{
            position:       absolute;
            top:            50px;
            left:           0px;
            width:          100px;
            height:         145px;
            background-color:   red;
        }

        #div2{
            position:       absolute;
            top:            250px;
            left:           0px;
            width:          100%;
            height:         145px;
            background-color:   red;
        }

        .block{
            position:       absolute;
            width:          30px;
            height:         20px;
            background-color:   yellow;
        }

        .sub0{top:0px; right:0px;}
        .sub1{top:25px; right:1px;}
        .sub2{top:50px; right:2px;}
        .sub3{top:75px; right:3px;}
        .sub4{top:100px; right:4px;}
        .sub5{top:125px; right:5px;}


    </STYLE>

<body>


    <div ID="div1"> 

        <div class="block sub0">0PX</div>
        <div class="block sub1">1PX</div>
        <div class="block sub2">2PX</div>
        <div class="block sub3">3PX</div>
        <div class="block sub4">4PX</div>
        <div class="block sub5">5PX</div>

    </div>

    <div ID="div2"> 

        <div class="block sub0">0PX</div>
        <div class="block sub1">1PX</div>
        <div class="block sub2">2PX</div>
        <div class="block sub3">3PX</div>
        <div class="block sub4">4PX</div>
        <div class="block sub5">5PX</div>

    </div>


</body>

</HTML>

Answer 1

好的，很抱歉打扰了你...这个问题太傻了，这让我想把头靠在墙上......

更多的研究问题似乎只出现在我的双显示器设置的左侧显示器上的最大化浏览器窗口上...

显示器的'自动调整'解决了它......不再失去正确的2像素......

DUH！

困惑，定位正确，身体宽，然后视口？

1 个答案: