Question

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

这大致是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上的几个模拟器上检查过它）都显示相同的结果）

红色框是标题，绿色框是页脚。

可能是什么原因？有谁可以向我推荐一个关于pc浏览器和移动浏览器之间差异的好教程？感谢。

Answer 1

尝试添加此样式：

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

divs不会在移动浏览器中消耗全宽

1 个答案: