Question

我有一个ASP MVC应用程序，在布局视图文件中我添加了一个图像（400px x 400px）。我将类设置为img-respsonsive并为图像添加了一些填充。

我想包含@RenderBody()方法的div，以自动调整margin-top样式，使其向下移动，具体取决于导航栏标题的高度。

我使用％20％（80px）的maax宽度，并将margin-top设置为有效的最大值。但是如果可能的话，我希望没有这么多的空白。

我该怎么做？

以下是源代码：

<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <img class="img-circle" src="@Url.Content("~/Content/Images/IdeaConTempLogo.png")" style="max-width: 20%; padding: 9px 15px 8px;"/>
            @Html.ActionLink("Brand", "Home", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
            </ul>
        </div>
    </div>
</div>

<!-- TODO: Adjust the top margin to automatically to add space depending on navbar height -->
<div class="container body-content" style="margin-top:80px">
    @RenderBody()
    <hr />
    <footer>
        <p>Copyright &copy; @DateTime.Now.Year - IdeaCon All Rights Reserved</p>
        <p></p>
    </footer>
</div>

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

Answer 1

您可以通过以下方式检查文档就绪功能的高度：

var heightSlider = $('.navbar').height();

然后将其应用于margin-top，如下所示：

$('.body-content').css({ marginTop : heightSlider + 30 + 'px' });

希望有所帮助

根据导航栏高度调整布局文件中的上边距

1 个答案: