gpt4 book ai didi

html - 困惑,定位正确, body 比视口(viewport)宽?

转载 作者:行者123 更新时间:2023-11-28 03:39:59 25 4
gpt4 key购买 nike

我遇到了一个让我目瞪口呆的问题...我尝试使用 css 'right: 0px' 将一个元素定位在页面的绝对右侧。但似乎我的元素实际上被放置在比预期更靠右的几个像素处,我丢失了一部分。

为了找出问题所在,我将案例简化为以下 HTML。

看起来宽度为 100% 的元素(也是主体!)实际上比视口(viewport)宽(但会触发滚动条)。我目瞪口呆..我在这里忽略了什么?

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

最佳答案

好的,很抱歉打扰你了...这个问题太愚蠢了,我想用头撞墙...

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

显示器的“自动调整”解决了问题...不再丢失正确的 2 个像素...

呃!

关于html - 困惑,定位正确, body 比视口(viewport)宽?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11740534/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com