有 2 个 div - top和 bottom .
底部应充当“按钮 Pane ”，因此始终可见并“固定”到底部边框。 root div 是一个 Kendo UI 窗口 div(参见 jsbin fiddle)
问题是滚动条仅显示在顶部的 div 上，但也显示在“按钮 Pane ”上。在给定的 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定位。滚动条应该只出现在顶部面板。
元素必须位于内部 <div id='w'/>在 fiddle 中(因为 telerik kendo 窗口调整大小句柄)并且 BE RESIZABLE，所以任何额外的体积都会被分配给顶部 Pane 。但是可以将额外的 div 添加到其中(添加到 div id="w" 中)
我已经尝试玩了几个小时，但缺少一些东西。
最佳答案
我会进行如下调整以提供您想要的那种功能:
<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>
这些调整包括修复 Kendo 窗口的大小，并为顶部面板添加一个具有固定高度和 overflow-y 滚动的内部 div。
我希望这有助于...
关于javascript - CSS top div自动调整高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19383026/