Question

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

当前显示如下：

屏幕截图

页面级别为：

<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>

任何建议都会很棒。

非常感谢

Answer 1

只需考虑：高度是什么的100％？无论如何，您可以使用height: 100vh;（如果是needed则与calc结合使用），这是一个与上下文无关的设置-但它会受到compatibility的限制

Bootstrap 4固定的右侧边栏

1 个答案: