如何防止div容器调整大小

时间:2016-04-14 04:10:13

标签: javascript jquery html css

我使用div容器作为可删除元素,因此我将按钮元素动态添加到此div容器中。如果我添加超出其大小的按钮,如果要避免这种情况,Div大小会调整大小吗?

注意:此问题仅在Firefox中出现

sample:fiddle

#divContainer{
    width:100%;
    height:40%;
    overflow:auto;
    border:1px solid;
    display:inline-block;
}
#click{
    width:100px;
    height:30px;
}
table{
    border:1px solid;
}
body{
    height:1000px;
}

// HTML

<button id="click">ClickME</button>
<table style="width:20%; height:30%">
    <tr>
        <td>
            <div id="divContainer">
            </div>
        </td>
    </tr>
</table>

//脚本

 $(function () {

        $("#click").on("click", function () {

            $("#divContainer").append($("#click").clone());
        });
    });

2 个答案:

答案 0 :(得分:0)

试试这个..

public static int maxProfit(List<Integer> in) {
    int min = in.get(0), max = 0;
    for(int i=0; i<in.size()-1;i++){

        min=Math.min(min, in.get(i));

        max = Math.max(in.get(i) - min, max);
     }

     return max;
 }
}

答案 1 :(得分:0)

由于您使用的是表格,因此在不同浏览器的%值中,表格元素的效果不佳,他们会根据内容调整宽度/高度。因此,使用max-widthmin-width值(也以像素为单位)更好,因此跨浏览器不会为您的设计造成任何混乱 -

请尝试以下css代码:

#divContainer{
    width:100%;
    min-height:100px;
    height:40%;
    max-height:100px;
    overflow:auto;
    border:1px solid;
    display:inline-block;
}
#click{
    width:100px;
    height:30px;
}
table{
    border:1px solid;
}
body{
    height:1000px;
}

更新了小提琴链接 - https://jsfiddle.net/cpqz01ct/3/