Question

我正在尝试创建一个具有固定高度的容器div，其中包含两个div，一个标题div和一个内容div。标题可以动态增长，我希望内容div占用剩余的空间。容器div不应超过指定的大小，如果内容增长很多，则内容div应滚动。

我目前的代码如下，但无效：

<div id="container">
   <div id="header">
        <button id="btnHeader" type="button">Increase Header</button>MY HEADER</div>
<div id="content">
    <button id="btnContent" type="button">Increase Content</button>MY CONTENT</div>
</div>

#container {
     height: 300px;
     width: 400px;
     max-height: 300px;
     background-color: grey; 
}
#header {
     width: 100%;
     height: auto;
     background-color: blue;
}
#content {
     width: 100%;
     height: 100%;
     overflow-y: scroll;
     background-color: red;
}

此处示例：http://jsfiddle.net/ep1qab0v/

发生的事情是内容div始终保持相同的大小，从而使容器div增长。有什么想法吗？

Answer 1

http://jsfiddle.net/ep1qab0v/3/，

我在容器div上用overflow:hidden更新了小提琴。它保持相同的大小。内容增加会向内容div添加滚动条并增加标题会将内容div向下推。如果我已正确理解您的要求，那么您正在寻找什么？

Answer 2

我已经弄清了答案，但我也会尝试解释。 jsfiddle Example

对于该级别的动态调整，您必须使用javascript。由于内容是可滚动的而标题不是，因此每次标题大小更改时都必须创建一个对象或函数。这样，您可以针对主容器测试标题的高度，并更改内容框以适应。

我创建了一个简单的对象，您可以在页面加载时初始化框。此外，您可以在每次调整页面大小或更改标题大小时调用。

var sizing = {
    height: null,
    header: null,
    content: null,

    //Initializes whatever you need
    //just cacheing the header and content
    //and setting the height restriction
    init: function(){
        //Set the height of the users window
        //you can change this to whatever you want
        //but this is dynamic to the browser window
        this.height = window.innerHeight ? window.innerHeight : $(window).height();
        //Set header and content elements
        //for later use
        this.header = $('#header');
        this.content = $('#content');

        this.resize();
    },

    //Ressize the boxes to fit
    //this needs to be called after
    //  every change to the header
    resize: function(){
        this.content.css({
            height: (this.height - this.header.height()) + "px"
        });
    }
};

当页面加载

时，您需要调用.init()来初始化对象

$(document).ready(function(){
    //Whatever you need to do

    //Initialize the sizing
    sizing.init();
});

然后你可以从内部事件中调用它

$('body').on('click', '#some-element', function(e){
    //Do some stuff

    //Then resize the divs
    sizing.resize();
});

希望有所帮助！

Div具有动态标题大小和带滚动条的内容

2 个答案: