@korvindest

Нужна подсказка по HTML верстке. ( Canvas внутри DIV)

Привет всем.
Стараюсь находить нужные ответы сам, но в данном случае прошу помощи у вас.
Думаю что человек который работает с 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.
Просьба не кидать ссылки на фреймворки, мне нужно именно чистое решение проблемы.
Любая другая критика так же принимается.
  • Вопрос задан
  • 4679 просмотров
Решения вопроса 1
cdpn.io/hdCnv
Но что-то сомневаюсь в правильности решения
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
LegoMushroom
@LegoMushroom
codepen.io/sol0mka/pen/zdswn А Вы специально делаете таблицы?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы