0

関連する質問をいくつか閲覧しましたが、私の答えはないようでした。

私は次のようなものを持っています：

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

マージンのある内側の div の全スペースをテキスト ボックスで占めたいと思います。2 つの問題:

内側の div の高さが 100% の場合、余白があるためオーバーフローします。外側の div が親などをオーバーフローするため、外側の div にパディングを設定することはできません。全体のレイアウトは、各サブスクエアが上記のマークアップのような 4 つの等しいサブスクエアを持つ正方形です。

  1. では、どのようにすれば、innerdiv を完全な高さで取得できますが、必要なマージンを確保できますか?

テキストボックスの幅と高さを 100% に設定すると、余白が原因でテキストボックスがオーバーフローします。

  1. オーバーフローせずにテキストボックスが全スペースを占めるようにするにはどうすればよいですか?

編集：

フィドル: これをベースとして使用し、幅と高さが固定された外側の div を追加して、私の問題を確認します: http://jsfiddle.net/7w8TA/

これは私が自分で作成したフィドルですが、公開されているかどうかはわかりません... : http://jsfiddle.net/LethalLava/mY6Dn/

4

1 に答える 1

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/

于 2012-11-23T09:49:45.313 に答える