我有一组代码,如下所示。关键是在div中有一组图像,div的其余部分用textarea填充。如果我设置高度= 100%,它将使其高度相同,这不是(div.height - images.height)并使textarea更长。
它在w3c上说inherit
目前不起作用,auto
只会创建一个默认的textarea,并且硬编码永远不会实现它,因为div可能更大或更小。< / p>
你们为实现这一目标做了什么?
<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>
答案 0 :(得分:0)
可能是您的浏览器存在问题。我刚试过你的代码,似乎做了你想做的事:http://jsfiddle.net/Rorok_89/DMdyY/1/
答案 1 :(得分:0)
我不是很擅长使用它,但你可能想尝试显示:box;。我有一个example here可以做你想要的(我认为),但是'主要的错误'就是你不能再重新调整textarea的大小(但是如果那不是和问题,你可以改变resize:none ;)
答案 2 :(得分:0)
似乎无法在Chrome以外的其他浏览器中使用此行为。
我尝试将图片和textarea分成两个CSS表格行,以便为#images
提供一个高度,以便#textarea-container
自动调整其高度。下一步是给textarea 100%的高度和100%的宽度。
不支持在相对定位的表格单元格中绝对定位元素:
CSS Positioning inside of an HTML Table
因此相对定位的表格单元格中的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-row
和Google Chrome。
直播演示(仅适用于Google Chrome):http://jsfiddle.net/atTK7/4/
显示表格支持:http://www.quirksmode.org/css/display.html
建议使用除Chrome之外的浏览器的Javascript解决方法。
答案 3 :(得分:-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>