3

以下のような一連のコードがあります。ポイントは、一連の画像を div に配置し、div の残りの部分にテキストエリアを設定することです。高さを 100% に設定すると、(div.height - images.height) ではない同じ高さになり、テキストエリアが長くなります。

inherit現時点では機能しないw3cautoでは、デフォルトのテキストエリアを作成するだけであり、divが大きくても小さくてもハードコーディングしても決して達成されません。

これを達成するために皆さんは何をしましたか？

<div id = "parent">
  <div id = "images" style="background-color:#99ccff;">
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
    <img style = "padding:0px; border:0px;" src = "..." />
  </div>
  <textarea style="width:100%; height:100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;" >
  </textarea>
</div>
4

4 に答える 4

0

Chrome以外のブラウザでこの動作を動作させることは不可能のようです。

#images写真とテキストエリアを2つのCSSテーブル行に分割して高さを指定し、高さを#textarea-container自動的に調整しようとしました。次のステップは、textareaに100％の高さと100％の幅を与えることでした。

相対配置されたテーブルセルでの要素の絶対配置はサポートされていません：
HTMLテーブル内でのCSS配置

したがってtextarea { position: absolute; left:0;right:0;bottom:0;top:0 }、相対的な位置にあるテーブルセルでは機能しません。

HTML

<div id ="parent">
    <div id="images">
        <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/20x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/80x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/100x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/120x20/cc5acc/fff.png" />
        <img src="http://www.dummyimage.com/50x20/cc5acc/fff.png" />
    </div>

    <div id="textarea-container">
        <textarea></textarea>    
    </div>    
</div>​

CSS

* { margin:0; padding: 0 }

#parent{
    width: 400px;
    height: 300px;
    display: table;
    background: blue;
}
#images {
    display: table-row;
    height: 0;
}

#textarea-container {
    display: table-row;
}

textarea {
    height: 100%;
    width: 100%;
}

！display: tableこのソリューションは、、およびGoogleChromeに依存しdisplay: table-rowます。

ライブデモ（グーグルクロームでのみ機能）：http：//jsfiddle.net/atTK7/4/
ディスプレイテーブルのサポート：http ：//www.quirksmode.org/css/display.html

chromeを除くブラウザのJavascript回避策をお勧めします。

于 2012-06-12T18:31:26.377 に答える
0

私はあまり使いこなせませんが、display:box; を試してみてください。私はここにあなたが望むことをする例があります（私は思う）が、「主なバグ」はテキストエリアのサイズを変更できないことです（しかし、そうでない場合は resize:none; を変更できます）。

于 2012-06-12T18:19:23.550 に答える
0

ブラウザの問題かもしれません。私はあなたのコードを試してみましたが、あなたが望むことをしているようです: http://jsfiddle.net/Rorok_89/DMdyY/1/

于 2012-06-12T16:08:40.000 に答える
-1

あなたが何をしたいのか明確にわからなくても、jQuery を使用して実際の要素のサイズを取得し、テキストエリアを強制的に拡大または縮小することができます。これはあなたを助けるはずです：

<script type="text/javascript">
var max_div_height = 1000; //The max height of your div in pixels
var total_div_height = 0 // The total height of your divs combined
jQuery(".container").each(function(){
    var context = $(this);
    var height = context.height();
    total_div_height+=height; //If it's width, set height otherwise
});
var textarea_size = max_div_height - total_div_height;
jQuery("#myTextarea").css("height", textarea_size+"px") // Give an ID to your textarea
</script>
于 2012-06-12T16:04:45.713 に答える