0

2 つの div があります -topとbottom.

下部は「ボタン ペイン」として機能する必要があるため、常に表示され、下部の境界線に「固定」されます。ルート div は Kendo UI Window div です (jsbin フィドルを参照)

問題は、スクロールバーがトップ div だけに表示されているのではなく、「ボタン ペイン」にも表示されていることです。指定された jsbin で、ウィンドウを垂直方向にサイズ変更して、スクロールバーが表示されるようにします。

http://jsbin.com/UrasoKi/3/edit

<style scoped>
    #top{
      min-height: 500px; 
      width: 100%; 
      background-color: blue
    }
    #bottom{
      height: 50px; 
      width: 100%; 
      background-color: green; 
      position: absolute; 
      bottom: 0px;
      /*kendo specific margin indentation, ignore*/
      margin: 0 0 0 -9px;
    }    
  </style>
 <div id="w">
  <div id="top">TOP PANE</div>
  <div id="bottom">BOTTOM PANE</div>
 </div>

cssで明確なボトムdivの配置を実現したいと思います。スクロールバーは TOP パネルのみに表示されます。

要素はフィドルの内側に配置する必要があり (テレリック剣道ウィンドウのサイズ変更ハンドルのため)、サイズ変更可能である必要があるため、余分なボリュームが上部ペインに与えられます。ただし、余分な div を追加することができます (に) <div id='w'/>div id="w"

私は何時間も遊んでみましたが、何かが欠けています。

4

2 に答える 2

1

必要な機能を提供するために、次のように調整します。

<body>
  <style scoped>
    #top{
      height: 100%; 
      width: 100%; 

    }
    #bottom{
      height: 50px; 
      width: 100%; 
      background-color: green; 
      position: absolute; 
      bottom: 0px;
      /*kendo specific margin indentation, ignore*/
      margin: 0 0 0 -9px;
    }    
    #inner {
      overflow-y:scroll;
      height: 100%;
      background-color: blue
    }
  </style>
 <div id="w">
   <div id="top"><div id="inner">TOP PANE</div></div>  <div id="bottom">BOTTOM PANE</div>
 </div>
 <script>  
   $(document).ready(function() {
     $('#w').kendoWindow({
       width: '450px'
     });

     $('.k-window-content').css({'overflow':'hidden', scrollable: false })
   });
 </script>  
</body>

微調整には、剣道ウィンドウのサイズの修正と、上部パネルの固定高さとオーバーフロー y スクロールを備えた内部 div の追加が含まれます。

これが役立つことを願っています...

于 2013-10-15T14:01:18.543 に答える