时间戳

首页 > 解决方案 > Bootstrap 4 固定右侧边栏

asp.net - Bootstrap 4 固定右侧边栏

问题描述

请有人建议，我使用带有母版页的网络表单。在我的内容页面上，我试图在右侧有一个静态侧边栏。我发现了一些最有效的示例，但理想情况下，此侧边栏将是内容页面的完整大小。

它目前显示如下：

截屏

在此处输入图像描述

页面级别是：

<style type="text/css">

    #sidebar {
        background-color: #eee;
        height: 100%;
        width: 20%;
        position: fixed;
        right: 0;
    }

</style>


<div class="row">

<div class="column col-xs-9" id="main">              

  <p>Details</p>
  <p>Details</p>

  </div>

        <div class="column col-xs-3" id="sidebar">

            <nav>
                <ul class="nav flex-column list-style-icons">

                    <li class="nav-item"><a class="nav-link " href="#Identity"><i class="fa fa-share-alt"></i><b>Section 1:</b> info</a></li>
                    <li class="nav-item"><a class="nav-link " href="#Body"><i class="fa fa-flask"></i><b>Section 2: </b>info</a></li>
                    <li class="nav-item"><a class="nav-link " href="#Body"><i class="fa fa-flask"></i><b>Section 3: </b>info</a></li>
                    <li class="nav-item"><a class="nav-link " href="#Body"><i class="fa fa-flask"></i><b>Section 4: </b>info</a></li>
                    <li class="nav-item"><a class="nav-link " href="#Body"><i class="fa fa-flask"></i><b>Section 5: </b>info</a></li>
                    <li class="nav-item"><a class="nav-link " href="#Body"><i class="fa fa-flask"></i><b>Section 6: </b>info</a></li>
                    <li class="nav-item"><a class="nav-link " href="#Body"><i class="fa fa-flask"></i><b>Section 7: </b>info</a></li>
                    <li class="nav-item"><a class="nav-link " href="#Body"><i class="fa fa-flask"></i><b>Section 8: </b>info</a></li>

                    <li class="nav-item"><i class="fa fa-pencil"></i>Notes:</li>
                    </ul>
                    </nav>

            </div>
  </div>

任何建议都会很棒。

非常感谢

标签： asp.nettwitter-bootstrapsidebar

解决方案

想一想：高度是什么的 100%？无论如何，您可以使用height: 100vh;（与 calc if 结合needed）这是一个与上下文无关的设置 - 但它会有一些兼容性限制

推荐阅读