Füllen Sie alle verbleibenden Räume des übergeordneten Elements mit HTML -Kinderelementen aus und genießen Sie ⇐ JavaScript

[Anonymous]

Ich bin nicht gut in Englisch, also klingen meine Worte vielleicht seltsam.
Sorry.
Ich schreibe derzeit ein Programm, das Daten empfängt und ein Diagramm zeichnet, aber der Abschnitt "Diagramm" unten ist der Vollbildmodus, sodass ein kleiner Bildschirmraum unten bleibt.

Code: Select all

—
▢
✕





[img]./assets/logo.png[/img]


{{ appName }} v{{ appVersion }}









PR


RR


상태: {{ status }} → {{ logPath }}


< /code>

:root { --border:#e5e7eb; --muted:#64748b; --text:#0f172a; --accent:#2563eb; }
* { box-sizing: border-box; }
html, body, #app { height: 100%;}
body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, 'Noto Sans KR', Arial, 'Apple SD Gothic Neo', sans-serif; color:var(--text); background:linear-gradient(135deg,#f8fafc,#e2e8f0); }
.header { position:sticky; top:0; backdrop-filter:blur(8px); background:#ffffffcc; border-bottom:1px solid var(--border); flex: 0 0 auto }
.wrap {margin: 0 auto; padding: 12px 20px; }
.row { display:flex; align-items:center; gap:8px; flex-wrap: wrap; }
.badge { font-size:12px; color:#0ea5e9; background:#e0f2fe; border-radius:10px; padding:2px 8px; }
.card { background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 2px 8px #0000000d; }
.pad { padding:16px; padding-bottom: 50px; }
.grid2 { display:grid;  grid-template-columns: repeat(2, minmax(0, 1fr)); gap:16px; }
label { font-size:12px; color:var(--muted); }
select, input[type="number"], input[type="text"] { height:36px; border:1px solid var(--border); border-radius:8px; padding:0 10px; background:#fff; }
.btn { height:36px; border-radius:8px; padding:0 12px; border:1px solid var(--border); background:#fff; cursor:pointer; }
.btn.primary { background: var(--accent); color:#fff; border-color: transparent; }
.btn:disabled { opacity:.5; cursor: not-allowed; }
.status { font-size:12px; color:#0a7; }
.muted { color: var(--muted); font-size:12px; }
.chart-box {height: 40vh; width: 100%; min-height: 130px; display:flex; flex-direction:column; }
canvas { width:100%; height:100%; border:1px solid var(--border); border-radius:10px; }
footer { font-size:12px; color:var(--muted); }