Richtige vertikal salbbare Liste auf einer nicht-krollbaren Seite ordnungsgemäß Größe ⇐ CSS

[Anonymous]

Ich möchte eine nicht-krollende Webseite (ein "Dashboard") für die Verwendung auf Desktop-Monitoren oder großen Tablets erstellen. Es wird zwei Abschnitte haben: einen Bereich für Bilder, die auf den verfügbaren Raum passen, und eine Liste der Beschreibungen der letzten Aktualisierungen. Jede Beschreibung ist kurz und kann in eine Zeile passen. /p>

Die Breite des Behälters sollte sich auf die Breite der längsten Beschreibung einstellen. < /li>
Die Höhe des Behälter Zeilen wie möglich , ohne über den unteren Teil der Seite hinauszugehen oder die Daten zu verkürzen. Der Container sollte sich bis zum Ende der Seite erstrecken und eine vertikale Bildlaufleiste erwerben. (Es sollte "Scrollable werden".) < /Li>
Wenn die Liste vollständig in den verfügbaren vertikalen Bereich passen kann, muss der Container nicht scrollbar sein und sollte keine Scroll -Rinne anzeigen. < /li>
< /ol>
Hier ist ein Modell, das die beiden Grundbedingungen und das gewünschte Erscheinungsbild veranschaulicht: < /p>

Ich habe eine Snippet gepostet, die meine Lösung demonstriert (bitte führen Sie sie als a Vollständige Seite). /> Ich bin offen für eine vollständige Neugestaltung, wenn sie empfohlen, aber ich möchte mich auf HTML, CSS und JS beschränken. Br />

Code: Select all

/* 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