gpt4 book ai didi

html - div 不会在移动浏览器中占用整个宽度

转载 作者:行者123 更新时间:2023-11-28 03:43:38 24 4
gpt4 key购买 nike

我有一个带有页眉和页脚的简单网页。

这是大致的 html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
@RenderSection("HtmlHeadTags", false)

<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />

@Styles.Render("~/Content/css")
@RenderSection("Analytics", false)
@RenderSection("NortonSafe", false)
</head>

<body>
<div id="page-wrapper">
<header>
<div id="header-navbar">
<div id="header-navbar-active">
<a id="websiteLogo" href="/">
<img src="/Content/ankol-logo.png" alt="logo" />
</a>
<div class="clearfix"></div>
</div>
</div>
</header>
<div id="body-content">
@RenderSection("scripts_body", required: false)
@RenderBody()
</div>
<footer>
<p id="footer-links">
<a href="/Info/About">about</a>&nbsp;
<a href="/Info/Terms">terms</a>&nbsp;
<a href="/Contact/">contact</a>
</p>
<p id="footer-copyright">2017 &copy;</p>
</footer>
</div>
@Scripts.Render("~/bundles/jquery")

</body>
</html>

具有以下(相关)CSS 部分:

#header-navbar {
display: block;
width: 100%;
background-color: #3F51B5;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
color: #FFF;
font-family: Arial;
font-size: large;
position: fixed;
z-index: 1000;
margin-bottom: 20px;
border: 1px solid transparent;
}


#footer-navbar {
display: block;
width: 100%;
background-color: #3F51B5;
color: #FFF;
font-family: Arial;
font-size: large;
margin-top: 70px;
padding-top: 5px;
padding-bottom: 5px;
}

现在,虽然在 PC 浏览器中,页眉和页脚都占用了窗口 100% 的宽度,但在移动浏览器中,页眉和页脚仅占用了部分宽度(我有 Android,但在 Edge 和都显示相同的结果) enter image description here

红色框是页眉,绿色框是页脚。

这可能是什么原因?任何人都可以向我介绍有关 PC 浏览器和移动浏览器之间差异的好教程吗?谢谢。

最佳答案

尝试添加此样式:

body {
width: 100%;
height: 100%;
margin: 0;
}

关于html - div 不会在移动浏览器中占用整个宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44092336/

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