CSS top div自動調整高度

有2個div - top和bottom。CSS top div自動調整高度

底部應該作爲'按鈕窗格'，在任何時候都可以看到並固定到底部邊框。根div是一個Kendo UI窗口div（請參閱jsbin小提琴）

問題是滾動條沒有顯示只有頂部div，但'按鈕窗格'以及。在給定的jsbin窗口垂直調整下來，所以會出現滾動條：

<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面板上。

元素必須是在撥弄定位INSIDE<div id='w'/>（因爲Telerik的劍道窗口的大小控制）和可調整大小，所以任何額外的容量將被賦予到頂部面板。但額外的div可以添加到它（到div id="w"）

我一直試圖玩幾個小時，東西丟失。

來源

2013-10-15 Max Grass

啊好吧我的壞，我已經更新了我的代碼，以允許這... –

@NeilHibbert這是部分可以接受的變體。窗口不只是一些編輯窗體，許多事情發生在窗口/頂部窗格內，所以它應該有滾動條以便隨時訪問所有功能。再次感謝！ –

我會調整如下，提供你想要的那種功能：

<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-15 14:01:18

它必須可調整大小。謝謝 –

屬性min-height: 500px;是導致窗口顯示滾動條。你會希望把兩個div在另一個DIV與固定min-height然後給兩個div固定min-height

編輯： 編輯你的提琴，看看是否是你所需要的。 http://jsbin.com/efOgoVE/10/edit

來源

2013-10-15 14:16:30

這是相對我結束了，仍然試圖修復滾動條，只是丟失在底部窗格背後..邊距和填充是棘手.. –

CSS top div自動調整高度

回答

相關問題