CSS Android 和 iOS 问题

发布于 2024-10-29 00:19:56 字数 811 浏览 1 评论 0原文

当我尝试将 div 拉伸 100% 时,iOS 和 Android 的末尾会出现一条小线。这是更好的视图图片:

screenshot

我在网上搜索,但没有找到解决方案。

<html>  
<head>  
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=0.666" />  
<style>  
html, body {  
    position:relative;  
    height:100%;  
    width:100%;  
    padding:0;  
    margin:0;  
    overflow-x:hidden; 
}  
header {  
    width: 100%;  
    background: red;  
    height: 50px;  
    display: block;  
    margin: 0;  
    padding: 0;  
    overflow-x:hidden;  
}  
</style>  
</head>  
<body>  
<header>asdasd</header>  
</body>  
</html>

When i try to stretch a div 100% there is a little line at the end in iOS and Android. Here's a pic for better view:

screenshot

I searched all over the net but i didn't find a solution.

<html>  
<head>  
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=0.666" />  
<style>  
html, body {  
    position:relative;  
    height:100%;  
    width:100%;  
    padding:0;  
    margin:0;  
    overflow-x:hidden; 
}  
header {  
    width: 100%;  
    background: red;  
    height: 50px;  
    display: block;  
    margin: 0;  
    padding: 0;  
    overflow-x:hidden;  
}  
</style>  
</head>  
<body>  
<header>asdasd</header>  
</body>  
</html>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

孤城病女 2024-11-05 00:19:56

这可能是为滚动条保留的空间。

That's probably the space reserved for a scrollbar.

客…行舟 2024-11-05 00:19:56

试试这个:

header {  
    width: 100%;  
    background: red;  
    height: 50px;  
    display: block;  
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    overflow-x:hidden;  
} 

然后,为了确保您的内容不会由于绝对定位而出现在标题下方,请为正文标记提供与标题高度相同的顶部填充:

html, body {  
    position:relative;  
    height:100%;  
    width:100%;  
    padding:50px 0 0;  
    margin:0;  
    overflow-x:hidden; 
} 

Try this:

header {  
    width: 100%;  
    background: red;  
    height: 50px;  
    display: block;  
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    overflow-x:hidden;  
} 

Then to make sure your content doesn't wind up under the header due to absolute positioning, give the body tag the same top padding as the height of the header:

html, body {  
    position:relative;  
    height:100%;  
    width:100%;  
    padding:50px 0 0;  
    margin:0;  
    overflow-x:hidden; 
} 
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文