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

Post a reply

Smilies
:) :( :oops: :chelo: :roll: :wink: :muza: :sorry: :angel: :read: *x) :clever:
View more smilies
BBCode is ON
[img] is ON
[flash] is OFF
[url] is ON
Smilies are ON
Topic review
   

Expand view Topic review: Füllen Sie alle verbleibenden Räume des übergeordneten Elements mit HTML -Kinderelementen aus und genießen Sie

by Anonymous » 22 Aug 2025, 05:12

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); }

Top