页面内容显示在固定标题上方答案

【问题标题】：Page content is showed above the fixed header页面内容显示在固定标题上方
【发布时间】：2022-01-25 14:23:18
【问题描述】：

我在我的主布局页面中使用了一个固定位置的标题。但是当我从锚标记调用 html 页面时，它总是显示在标题上方。如何从所有页面显示“Renderbody()”内的内容。这是'_Layout.cshmtl'中的代码

<!DOCTYPE html>
<html lang="en">


<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MyCompany</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="~/css/owl.carousel.min.css" />
    <link rel="stylesheet" href="~/css/owl.theme.default.min.css" />

</head>    
<body data-spy="scroll" data-target="#main-nav" id="home">
        <header id="header">
            <div class="fixed-top">
        </div>
        </header>
        <div class="body-container">
                 @RenderBody()
            </div>
   </body>
    <footer>
    </footer>

我的默认页面是“Index.cshmtl”，如下所示。该索引页面显示在“Renderbody”部分。但是当我从索引页面调用另一个页面 'projectdetails 时，它显示在布局的标题部分上方。项目详细信息的内容应显示在标题部分之后，在 Renderbody() 部分内。如果我从 layout 中删除 'fixed-top' ，它将正确显示。使用固定顶时如何在渲染主体部分显示视图。

@{
    ViewData["Title"] = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div>
    <a asp-controller="Home" asp-action="Projectdetails" asp-route-itemId= 1 class="card-link ">Read More</a>
</div>

【问题讨论】：

标签： html asp.net-core layout

【解决方案1】：

如果我从 layout 中删除 'fixed-top' ，它将正确显示。如何我可以在使用时显示渲染主体部分内的视图吗固定顶。

将元素定位在视口的顶部，从边到边。确保您了解项目中固定位置的影响；请注意，固定顶部标题将覆盖您的其他内容。

要解决此问题，您可能需要添加额外的 CSS，添加等于或大于固定顶部标题高度的 margin-top（到内容）。

尝试在 _Layout.cshtml 中添加以下代码。

           <style>
                .body-container {
                    /*  */
                    /* top: 0;*/
                    bottom: 0;
                    right: 0;
                    left: 0;
                    margin-top: 200px;
                }
            </style>

一个类似的Demo来满足你的需求：

_Layout.cshtml：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - MyCompany</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="~/css/owl.carousel.min.css" />
    <link rel="stylesheet" href="~/css/owl.theme.default.min.css" />

</head>
<body data-spy="scroll" data-target="#main-nav" id="home">
    <header id="header">
   
        <div class="fixed-top">

            <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">MyCompany</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
                    </li>
                </ul>
            </div>
        </div>

        <style>
                .body-container {
                    /*  */
                    /* top: 0;*/
                    bottom: 0;
                    right: 0;
                    left: 0;
                    margin-top: 200px;
                }
            </style>

    </header>

    <div class="body-container">
        @RenderBody()
    </div>

</body>
</html>

Index.cshtml：

@{
    ViewData["Title"] = "Home Page";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


    w  index


<div>
    <a asp-controller="Home" asp-action="Projectdetails" asp-route-itemId=1 class="card-link ">Read More</a>
</div>

结果：

1.索引：

2.点击阅读全文：

【讨论】：