gpt4 book ai didi

html - 防止移动浏览器显示 body 外的元素?

转载 作者:行者123 更新时间:2023-11-28 08:02:44 25 4
gpt4 key购买 nike

我正在制作一个网站,其中右上角有一个旋转 45 度的正方形,其中一些在正文之外。在桌面上你看不到它,但当我在移动设备上时,我可以缩小并且 body 的正确位置会变大。

红色是您可以在屏幕上看到的内容,这是它在桌面上的外观以及我希望它在移动设备上的外观。

http://imgur.com/ktPDPAN

但是在手机上它看起来像这样,同样是红色的地方

http://imgur.com/XAFILRd

我在 body 上隐藏了 overflow-x,所以没有滚动条,但用户仍然可以缩小并在移动设备上看到该网站,就像第二张图片一样。

我尝试使用 meta 标记,但它并没有什么不同,只是网站开始放大,但用户仍然可以缩小。喜欢:

HTML

<body class="bg">
<div id="box-top-right">
<a href="#">SOME TEXT</a>
</div>
<div id="wrapper">
</div>
</body>

CSS

body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: scroll;
}

.bg {
background: url('../gfx/bg.png') top left;
}

#box-top-right {
position: absolute;
top: 75px;
right: -97px;
width: 400px;
height: 60px;
line-height: 60px;
text-align: center;
background: #ce180b;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color:white;
}

#wrapper {
width: 1200px;
position: absolute;
margin-top: -50px;
}

最佳答案

我只是将一个容器放入体内并将其设置为 overflow:hidden;将旋转后的正方形保留在容器 div 中。将容器的宽度保持在您需要的任何宽度,

<html>
<body>
<div class="container">
<div class="rotated-thingy">

和CSS:

html,body{
width:100%;
height:100%;
}
.container{
width:100%;
height:100%;/* depends, maybe it could be stretched by something else? */
overflow-x:hidden;
position:relative;
}
.rotated-thingy{
position: absolute;
top: 10px;
right: 10px;/* or whatever appropriate here */
}

有时元素 html 和 body 的处理方式与 div 的处理方式并不完全相同。

关于html - 防止移动浏览器显示 body 外的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29653918/

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