Адаптивный размер при использовании начальной загрузки

Question

Я хочу сохранить текстовый редактор (textarea) и iframe в двух столбцах одной строки с помощью начальной загрузки, и здесь приведен HTML-код для этого.

<div class="container">
    <div class="row">
        <div class="col">
            <div id="editor"></div>
        </div>
        <div class="col" class="embed-responsive embed-responsive-1by1">
            <iframe id="renderHTML" srcdoc="" class="embed-responsive-item"></iframe>
        </div>
    </div>
</div>

Проблема, с которой я сталкиваюсь, заключается вчто размеры текстовой области и iframe очень малы, и я не хочу явно указывать ширину и высоту двух, поскольку дизайн не останется отзывчивым.Какое может быть решение для увеличения размеров двух и сохранения дизайна.

Answer 1

классы col выглядят недопустимыми, попробуйте это:

<div class="container">
    <div class="row">
        <div class="col-sm-6">
            <div id="editor"></div>
        </div>
        <div class="col-sm-6" class="embed-responsive embed-responsive-1by1">
            <iframe id="renderHTML" srcdoc="" class="embed-responsive-item"></iframe>
        </div>
    </div>
</div>

Answer 2

Используйте единицы просмотра:

1vw = 1% ширины страницы 1vh = 1% высоты страницы

Вы можете использовать его так же, как пиксели, ноон отзывчив.

Пример:

<iframe src="http://example.com" width="50vw" height="50vw"></iframe>

Этот фрейм равен 50% ширины и высоты страницы.