Мобильная версияШирина контейнера должна приспособиться к ширине самого длинного описания. < /li>
Высота контейнера должна приспособиться к отображению столько же ряды как можно , не выходя за пределы страницы и не усекая данные . Контейнер должен простираться до нижней части страницы и приобретать вертикальную прокрутку. (Это должно «стать прокручиваемым».) < /Li>
Если список может полностью вписаться в доступное вертикальное пространство, контейнер не должен быть прокручиваемым и не должен отображать водосточный желоб. /li>
< /ol>
Я разместил фрагмент, демонстрирующий мое решение (пожалуйста, запустите его в качестве полной страницы). < /p>
Как это стойки, в контейнере есть Фиксированная высота 300px, так как я не знаю, как сделать его динамичной. < /p>
Я открыт для полного редизайна, если рекомендуется, но я хочу ограничить себя HTML, CSS, и js. < /p>
Код: Выделить всё
/* This function populates the scrollable-container grid with variable
numbers of rows of dummy data */
let my_limit;
function load_scrollable_table(limit) {
let perday = 3;
my_limit = limit;
const my_div = document.querySelector("#table-insertion-point");
for (let day = 1;; day++) {
if (!insert_row(my_div, `3/${day}/2025`, 'Foobar etc.')) {
return;
}
for (let thisday = 1; thisday < perday; ++thisday) {
let v = "foo ".repeat(thisday * 4);
if (!insert_row(my_div, '', 'Foobar more etc.' + v)) {
return;
}
}
}
}
function insert_row(my_div, col1, col2) {
let my_row = `${col1}${col2}`;
my_div.innerHTML += my_row;
return --my_limit;
}< /code>
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
/* height/width are that of viewport */
width: 100%;
background: lightgray;
margin: 0;
padding: 0;
}
.main-div {
display: flex;
flex-flow: column;
height: 100%;
/* set height to that of body */
margin: 0 1em;
/* inset main-div from body */
}
.hdr-div {
text-align: center;
}
.lr-split-div {
display: flex;
flex-flow: row;
width: 100%;
height: 100%;
}
/**** LEFT SIDE ****/
.left-side {
flex: 50;
display: flex;
flex-flow: column;
/* flow downwards */
background: pink;
}
/**** Leftside content ****/
.left-top-div {
margin-bottom: 15px;
/* Gap beneath Welcome blurb */
}
/* Container for scrollable content -- height should be tall
enough to accommodate content, but should not extend beyond
bottom of window and become scrollable if so. */
.scrollable-container {
width: fit-content;
height: 300px;
/* we want this to be dynamic */
padding: 10px;
border: 4px solid #888;
}
/* Inner content that will scroll */
.scrollable-content {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: auto auto;
column-gap: 10px;
overflow-y: scroll;
padding: 5px 10px;
}
.scrollable-table-col1 {}
.scrollable-table-col2 {
white-space: nowrap;
/* dont wrap text */
}
/**** RIGHT SIDE FOR SLIDESHOW ****/
.right-side {
flex: 50;
display: flex;
align-items: center;
justify-content: center;
background: cyan;
}< /code>
This is the page header with logo etc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Recent site updates:
Slideshow
Подробнее здесь: https://stackoverflow.com/questions/794 ... lable-page
