Заполните все оставшиеся пространства родительского элемента с помощью детских элементов HTML и наслаждаться ⇐ Javascript

[Anonymous]

Я не очень хорош на английском языке, поэтому мои слова могут показаться странными.
orry.
Я в настоящее время пишу программу, которая получает данные, и рисует диаграмму, но раздел диаграммы внизу - полный экран, оставляя небольшое пространство экрана ниже.
Я бы хотел, чтобы диаграмма могла бы автоматически увеличить размер, чтобы заполнить эту часть, но то, что я должен сделать?




—
▢
✕








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


Подробнее здесь: https://stackoverflow.com/questions/797 ... ements-and