Question

我在MVC 5项目中有以下“layout.cshtml”文件：

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

</head>

<body style="background-image: url('/Content/images/background.png')">
<div id="master" style="padding: 20px; width: 100%; position: fixed; height: 75px; z-index: 9999;">
    bunch of stuff removed for clarity
</div>

    @RenderBody()

    @RenderSection("scripts", required: false)

</body>
</html>

“master”div包含一个工具栏，该工具栏通过JS填充并位于页面顶部，它保留在所有内容的顶部，并忽略页面的滚动，以便始终可见。那部分似乎工作正常。

问题是我的页面的其余部分（通过@RenderBody（）调用填写的内容）将在工具栏下滚动。我想保持该部分的顶部不高于工具栏的底部。我尝试将@RenderBody（）置于其自己的div中，并尝试各种“位置”（固定，相对，绝对）。我甚至试过围绕那个div的div，两种“位置”的各种组合。我要么得到一个根本不会滚动的主体，要么滚动到工具栏下面。

有什么办法可以做我想做的事吗？

谢谢，

安德鲁

Answer 1

因为id ='master'的div将位置样式设置为fixed，它将显示在相对于浏览器窗口的固定位置。为了移动它显示在“下面”的内容，你应该设置

style="margin-top:75px"

到此div后面的元素/容器。这会将它从主div后面推下来，这样它就不会重叠了。

示例：

<div style="margin-top:75px">
    @RenderBody()

    @RenderSection("scripts", required: false)
</div>

第二个选项：您可能还想考虑设置

position:relative

而不是

position:absolute

更新（见下面的评论）：

尝试将子标题（脚本部分）div的位置设置为固定，就像主标题部分一样，然后将'top'属性设置为75px。这会将其锁定到主标题的基础：

<div style="position:fixed; top:75px;">
    @RenderBody()

    @RenderSection("scripts", required: false)
</div>

更新2：在标题和正文上设置此样式。首先，这将隐藏通常在标题按钮后面可见的内容。其次，这会将两个容器的背景锁定在一起，因此滚动不会导致它们之间出现接缝。这使得中心内容在到达标题的下边缘时消失的效果。

background: url("/Content/images/background.png") repeat fixed 0% 0% transparent;

如何防止页面正文在标题下滚动

1 个答案: