Question

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

我有以下内容：

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

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

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

那么我怎样才能让内部高度占据全高，但仍然有我想要的余量？

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

如何让文本框占用整个空间而不会溢出？

修改：

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

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

Answer 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/

当父Div具有边距时，文本框高度100％

1 个答案: