javascript - 使元素填充其容器的宽度并且没有边距将其推出该容器？

Question

有没有办法让元素动态填充其容器的宽度并具有边距但不会溢出该容器？

body {
	-moz-osx-font-smoothing: grayscale;
	font-family:Verdana;
	font-weight:normal;
	font-size:12px;
}

#BorderContainer2085  {
	position:absolute;
	top:30px;
	left:37px;
	width:340px;
	height:160px;
	display:inline-block;
	border-width:1px;
	border-color:#696969;
	border-style:solid;
	border-radius:0px;
}

#Button1199  {
	position:absolute;
	top:19px;
	margin-left:20px;
	margin-right:20px;
	width:100%;
}

<div id="BorderContainer2085">
	<input id="Button1199" type="button" value="Button">
</div >

这是我的代码得到的结果：

这是我想要的：

标签： javascripthtmlcss

Answer 1

使用width:calc(100% - 40px);按钮元素 - 它会产生预期的效果吗？

例子：

body {
	-moz-osx-font-smoothing: grayscale;
	font-family:Verdana;
	font-weight:normal;
	font-size:12px;
}

#BorderContainer2085  {
	position:absolute;
	top:30px;
	left:37px;
	width:240px;
	height:160px;
	display:inline-block;
	border-width:1px;
	border-color:#696969;
	border-style:solid;
	border-radius:0px;
}

#Button1199  {
	position:absolute;
	top:20px;
	margin-left:20px;
	margin-right:20px;
	width:calc(100% - 40px);
}

<div id="BorderContainer2085">
	<input id="Button1199" type="button" value="Button">
</div >