Html 部门不'；不要在移动浏览器中使用全部宽度_Html_Css_Mobile

Html 部门不'；不要在移动浏览器中使用全部宽度

html css mobile

Html 部门不'；不要在移动浏览器中使用全部宽度,html,css,mobile,Html,Css,Mobile,我有简单的网页与页眉和页脚这大致就是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="

我有简单的网页与页眉和页脚

这大致就是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>

现在，在pc浏览器中，页眉和页脚都消耗了窗口宽度的100%，而在移动浏览器中，页眉和页脚只消耗了窗口宽度的一部分（我有Android，但在Edge上的几个模拟器上进行了检查，都显示了相同的结果）

红色框为页眉，绿色框为页脚

原因可能是什么？？有人能给我介绍一个关于pc浏览器和移动浏览器之间区别的好教程吗？谢谢。

尝试添加此样式：

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

试着把位置：绝对对双方。“没有必要与这些结构有关联。”CarlosAlexandre我以前试过，现在又试过。“绝对”没有效果。谢谢。你能把你的代码输入代码笔来帮我吗？@CarlosAlexandre我以前从来没有这样做过。我现在就试试。我做完后会告诉你的。谢谢。

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