3

我有一组如下代码。关键是要在 div 中放置一组图像，并且 div 的其余部分填充文本区域。如果我将高度设置为 100%，它将使其高度相同，这不是 (div.height - images.height) 并使文本区域更长。

它在 w3c 上说inherit目前不起作用，auto只会创建一个默认的 textarea，并且硬编码它永远不会完成它，因为 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

可能是你的浏览器有问题。我刚试过你的代码，似乎做了你想做的事：http: //jsfiddle.net/Rorok_89/DMdyY/1/

于 2012-06-12T16:08:40.000 回答
0

我不太擅长使用它，但你不妨试试 display:box;。我在这里有一个例子，它可以做（我认为）你想要的，但是“主要错误”是你不能再重新调整 textarea 的大小（但如果那不是问题，你可以改变 resize:none;）。

于 2012-06-12T18:19:23.550 回答
0

似乎不可能在 chrome 以外的其他浏览器中实现这种行为。

我尝试将图片和文本区域拆分为两个 CSS 表格行以提供#images高度，以便#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和display: table-rowGoogle Chrome。

现场演示（仅适用于谷歌浏览器）：http: //jsfiddle.net/atTK7/4/
显示表支持：http ://www.quirksmode.org/css/display.html

建议使用除 chrome 之外的浏览器的 Javascript 解决方法。

于 2012-06-12T18:31:26.377 回答
-1

即使我不清楚你想做什么，你也可以使用 jQuery 来帮助你获取实际元素的大小，并强制你的 textarea 扩大或缩小。这应该可以帮助您：

<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 回答