Я пытаюсь создать простой макет страницы HTML с базовыми c CSS (без библиотек CSS или JS, все должно поместиться в один HTML файл).
+-------------------------------------------------+
| row1col1 ..................... row1col1 |
| |
| |
| |
| row2col1 ...... row2col2 ...... row2col3 ..... |
| |
| |
+-------------------------------------------------+
Макет должен отображать две строки информации, где первая строка имеет две ячейки / столбцы, а вторая строка - 3 столбца.
Я бы хотел, чтобы две строки занимали 60 и 40 процентов высота окна, но не менее 400 пикселей.
Столбцы в первой строке должны занимать 60 и 40 процентов ширины окна, но не менее 400 пикселей;
Столбцы во второй строке должны занимают 1/3 ширины окна, но не менее 300 пикселей;
Но если в таком столбце / ячейке много строк содержимого (в первой или второй строке), я НЕ хочу эту ячейку для расширения по вертикали за пределы высоты строки (которая должна составлять 60 процентов высоты окна, но не менее 400 пикселей для первой строки и 40 процентов высоты окна, но не менее 400 пикселей для второй строки). Если в ячейке больше строк, должна появиться полоса прокрутки, чтобы сделать их прокручиваемыми.
Я попытался скопировать и вставить некоторые решения аналогичных проблем из SO, но ничего из того, что я пробовал, не сработало, и было много очень разных предложений о том, как добиться поведения нескольких столбцов в строке. Мне показалось, что таблица стилей отображения, таблица-строка, таблица-ячейка и т.д. c. лучше всего подходят для этого, но с ними я обнаружил, что невозможно ограничить высоту ячейки или сделать ее прокручиваемой (по вертикали или горизонтали).
Я действительно хотел бы, чтобы ячейки адаптировались к размеру окружающего окна или Iframe по строкам и столбцам, занимающим определенный процент высоты / ширины, и по ячейкам, использующим полосы прокрутки, если есть что показать, но я не могу понять, как это сделать.
То, что у меня есть, и что не работает здесь: https://jsfiddle.net/johann_petrak/cafLqdz5/