Bootstrap 4 Фиксированная правая боковая панель - PullRequest
Новая
       23

Bootstrap 4 Фиксированная правая боковая панель

0 голосов
/ 20 декабря 2018

Пожалуйста, кто-нибудь может посоветовать, я использую веб-формы с мастер-страницей.На моей странице контента я пытаюсь иметь статическую боковую панель с правой стороны.Я нашел несколько примеров, которые в основном работают, но в идеале эта боковая панель будет иметь полный размер страницы содержимого.

В настоящее время она выглядит так:

снимок экрана

enter image description here

А уровень страницы: 

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

Любые предложения будут отличными.

Большое спасибо

1 Ответ

0 голосов
/ 20 декабря 2018

Только подумайте: высота составляет 100% от чего именно?В любом случае, вы можете использовать height: 100vh; (в сочетании с calc, если needed), который является контекстно-независимым параметром - но он будет иметь некоторые совместимость ограничения

...