セマンティックuiサイドバーの問題

plnkr snippetが私の問題を示してくれることを願っています。セマンティックuiサイドバーの問題

メニューを実行してメニューをクリックすると、サイドバーが展開されます。これで大丈夫です。私が抱えている問題は、コンテンツをスクロールすると、サイドバーがスペースを埋めるために高さを設定していないことです。サイドバーの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>

出典

2016-04-20 Gavin Downs

これは<div class="ui bottom attached pushable segment">にheight:100%pushableからCSSクラスによるものです。私はこれがエレガントな解決策であるとは確信していません...とにかく、回避策としてDOMの準備ができていればこの要素のheightを設定することができます（副作用があるかどうかはチェックしません）。だからあなたのスクリプトに追加します。

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

を参照してくださいあなたの

fiddle hereは、それが役に立てば幸い修正

出典

2016-04-21 10:50:13 albciff

セマンティックuiサイドバーの問題

答えて

関連する問題