[英]How to prevent div container being resizing
I am using div container as a drop-able element, so I am adding buttons elements dynamically in to this div container.我将 div 容器用作可放置元素,因此我将按钮元素动态添加到此 div 容器中。 Div size is resizing if I am adding buttons beyond its size how to avoid this?
如果我添加超出其大小的按钮,则 Div 大小正在调整大小如何避免这种情况?
Note: This issue occurs in Firefox only注意:此问题仅在 Firefox 中出现
#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 //html
<button id="click">ClickME</button>
<table style="width:20%; height:30%">
<tr>
<td>
<div id="divContainer">
</div>
</td>
</tr>
</table>
//script //脚本
$(function () {
$("#click").on("click", function () {
$("#divContainer").append($("#click").clone());
});
});
Try this..尝试这个..
#divcontainer
{
max-width: 40%;
max-height: 30%;
overflow:auto;
display:inline-block;
}
Since you are using table, table elements doesn't goes well in %
value in different browsers, they adjust their width/height according to the content.由于您使用的是表格,因此表格元素在不同浏览器中的
%
值表现不佳,它们会根据内容调整其宽度/高度。 So its better you go with max-width
and min-width
value (that's also in pixels), so that cross-browsers don't create any mess for your design-因此,最好使用
max-width
和min-width
值(也以像素为单位),这样跨浏览器就不会为您的设计造成任何混乱-
Try below css code:试试下面的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;
}
Updated fiddle link- https://jsfiddle.net/cpqz01ct/3/更新小提琴链接- https://jsfiddle.net/cpqz01ct/3/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.