Привет всем.
Стараюсь находить нужные ответы сам, но в данном случае прошу помощи у вас.
Думаю что человек который работает с HTML версткой постоянно сможет дать мне решение за две три минуты. Сам я туплю и никак не могу найти красивое решение проблемы.
Суть проблемы:
<html>
<head>
<style>
div{
border-style: solid;
border-width: 1px;
}
#imgList tr td{
text-align: center;
}
</style>
</head>
<body>
<div id="mainFrame" style="display: table; width: 1000px; height: 500px;">
<div id="imgFrame" style="display: table-cell; width: 50%">
<canvas id="imgFrameCanvas"></canvas>
</div>
<div id="toolFrame" style="display: table-cell">
<div id="imgCollection" style="display: table; width: 100%; height: 50%">
<div id="div_imgList" style="display: table-cell; width: 50%;">
<table id="imgList" style="width: 100%;">
<tr>
<td>test 1</td>
</tr>
<tr>
<td>test 2</td>
</tr>
<tr>
<td>test 3</td>
</tr>
</table>
</div>
<div id="imgPreview" style="display: table-cell; width: 50%;">
<canvas id="imgPreviewCanvas"></canvas>
</div>
</div>
<div id="tools" style="display: block; width: 100%; height: 50%;"></div>
</div>
</div>
</body>
</html>
Если на этой страничке закоментарить оба canvas то получится именно та верстка что мне нужна(границы, только для наглядности), но подстановка canvas с любым не absolute layout все ломает.
Мне нужно что бы canvas занимал 100% родительского фрейма.
Очень желательно решение на чистом CSS+HTML.
Просьба не кидать ссылки на фреймворки, мне нужно именно чистое решение проблемы.
Любая другая критика так же принимается.
Простой
