Проблема семантической боковой панели пользовательского интерфейса

Я надеюсь, что фрагмент plnkr иллюстрирует мою проблему.

Когда вы запустите его и нажмете на меню, боковая панель расширится. Все в порядке. У меня проблема в том, что когда вы прокручиваете содержимое, боковая панель не устанавливает высоту, чтобы заполнить пространство. Я пытался изменить атрибуты CSS на боковой панели, но без особого удовольствия. Мне не хватает трюка, и мне нужна помощь.

Я все еще нащупываю семантику и позаимствовал фрагмент с семантического веб-сайта. Хотя я добавил много тегов <p> для создания дополнительного контента.

Спасибо

        $(function() {
          $('.ui.sidebar')
            .sidebar({
              context: '.bottom.attached'
            })
            .sidebar('attach events', '.menu .item');
        })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>React prototype</title>
    <link href="../node_modules/semantic-ui/dist/semantic.css" rel="stylesheet" />
    <link rel="stylesheet" href="/styles/main.css" />
</head>
<body>
    <div class="ui top attached demo menu">
        <a class="item">
            <i class="sidebar icon"></i>
            Menu
        </a>
    </div>
    <div class="ui bottom attached pushable segment">
        <div class="ui inverted labeled icon left inline vertical sidebar menu uncover">
            <a class="item">
                <i class="home icon"></i>
                Home
            </a>
            <a class="item">
                <i class="block layout icon"></i>
                Topics
            </a>
            <a class="item">
                <i class="smile icon"></i>
                Friends
            </a>
            <a class="item">
                <i class="calendar icon"></i>
                History
            </a>
        </div>
        <div class="pusher">
            <div class="ui basic segment">
                <h3 class="ui header">Application Content</h3>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>
                <p>sksksksksks</p>

<!-- begin snippet: js hide: false -->

                <p>sksksksksks</p>
                <p>sksksksksks</p>
            </div>
        </div>
    </div>
    <script src="/node_modules/jquery/dist/jquery.js"></script>
    <script src="../node_modules/semantic-ui/dist/semantic.js"></script>
    <script>
        $(function () {
            $('.ui.sidebar')
                          .sidebar({ context: '.bottom.attached' })
                          .sidebar('attach events', '.menu .item');
        })
    </script>
</body>
</html>

javascript css semantic-ui

Gavin Downs 20.04.2016 источник

Ответы (1)

arrow_upward
0
arrow_downward

Это связано с классом height:100% from pushable css в <div class="ui bottom attached pushable segment">. Я не уверен, что это элегантное решение... в любом случае, в качестве обходного пути вы можете установить height этого элемента, где DOM готов (я не проверяю, есть ли какой-либо побочный эффект). Итак, в вашем сценарии добавьте:

$(document).ready(function(){
  $('.pushable').css('height', 'auto');
})

См. модифицированную скрипку здесь.

Надеюсь, поможет,

albciff 21.04.2016

Проблема семантической боковой панели пользовательского интерфейса

Ответы (1)

Похожие вопросы