当父 Div 有边距时，文本框高度 100%答案

【问题标题】：Textbox Height 100% When Parent Div has Margins当父 Div 有边距时，文本框高度 100%
【发布时间】：2012-11-23 09:44:25
【问题描述】：

浏览了一些相关问题，但似乎没有一个能回答我的问题。

我有类似以下的内容：

<div id="outerdiv" style="width: 50%; height: 100%">
    <div id="innerdiv" style="margin: 5px; height: 100%">
         <textbox>
    </div>
</div>

我希望文本框占据有边距的内部 div 的全部空间。两个问题：

如果内部 div 的高度为 100%，它会溢出，因为它有边距。我不能在外部 div 上进行填充，因为外部 div 然后溢出它的父级等。整个布局是一个正方形，有四个相等的子正方形，每个子正方形就像上面的标记。

那么我怎样才能让 innerdiv 占据整个高度但仍然有我想要的边距？

如果我将文本框设置为 100% 的宽度和高度，边距会再次导致问题并且文本框溢出。

如何让文本框占满空间而不溢出？

编辑：

小提琴：使用它作为基础并添加一个具有固定宽度和高度的外部 div 来查看我的问题： http://jsfiddle.net/7w8TA/

这是我自己创建的小提琴，但我不确定它是否公开...：http://jsfiddle.net/LethalLava/mY6Dn/

【问题讨论】：

你能设置一个小提琴吗？
编辑了一些小提琴链接。

标签： asp.net css html

【解决方案1】：

希望这可以帮助您： http://jsfiddle.net/7w8TA/

<div style="width:400px; height:300px">
<div id="outerdiv" style="width: 50%; height: 100%;border:1px solid black" >
    <div id="innerdiv" style="margin: 5px; height: 100%;border:1px solid red" >
        <input type="text" value="textbox" style="width:98%" />
    </div>
</div>

http://jsfiddle.net/mY6Dn/4/

【讨论】：

是的，这很接近，但这不是我的确切情况。以前从未使用过小提琴，所以希望这可行，请检查：jsfiddle.net/LethalLava/mY6Dn。希望它是公开的...我刚刚在您的外部 div 之外添加了一个 div 并在其上设置了一个固定大小：400px 宽度和 300px 高度。然后问题就出现了。此外，文本框不会填满整个高度。
好吧，我明白了。如果外部 div 宽度不是动态的，您可以使用 width:99% 或类似值调整文本框宽度。 jsfiddle.net/mY6Dn/4
如果没有“确切”的方法来实现这一点，那真的很可悲......无论如何，谢谢。