固定threejs测试页场景高度

This commit is contained in:
zhangshun
2026-06-16 12:23:13 +08:00
parent aaf2c0cc41
commit a3efcd66a5

View File

@@ -27,7 +27,7 @@
html, html,
body { body {
width: 100%; width: 100%;
min-height: 100%; height: 100%;
} }
body { body {
@@ -39,6 +39,7 @@
sans-serif; sans-serif;
color: var(--text); color: var(--text);
background: var(--bg); background: var(--bg);
overflow: hidden;
} }
button, button,
@@ -129,17 +130,24 @@
.app { .app {
display: grid; display: grid;
grid-template-columns: minmax(336px, 420px) minmax(0, 1fr); grid-template-columns: minmax(336px, 420px) minmax(0, 1fr);
min-height: 100dvh; height: 100dvh;
min-height: 0;
overflow: hidden;
} }
.side { .side {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 16px; gap: 16px;
min-height: 0;
height: 100dvh;
overflow-x: hidden;
overflow-y: auto;
padding: 18px; padding: 18px;
border-right: 1px solid var(--line); border-right: 1px solid var(--line);
background: var(--surface); background: var(--surface);
box-shadow: var(--shadow); box-shadow: var(--shadow);
overscroll-behavior: contain;
z-index: 2; z-index: 2;
} }
@@ -233,7 +241,8 @@
.scene-wrap { .scene-wrap {
position: relative; position: relative;
min-width: 0; min-width: 0;
min-height: 100dvh; min-height: 0;
height: 100dvh;
overflow: hidden; overflow: hidden;
background: #dfe7ec; background: #dfe7ec;
} }
@@ -242,7 +251,6 @@
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
min-height: 100dvh;
} }
.scene-toolbar { .scene-toolbar {
@@ -318,11 +326,21 @@
} }
@media (max-width: 940px) { @media (max-width: 940px) {
body {
overflow: auto;
}
.app { .app {
grid-template-columns: 1fr; grid-template-columns: 1fr;
height: auto;
min-height: 100dvh;
overflow: visible;
} }
.side { .side {
height: auto;
max-height: none;
overflow: visible;
border-right: 0; border-right: 0;
border-bottom: 1px solid var(--line); border-bottom: 1px solid var(--line);
box-shadow: none; box-shadow: none;
@@ -330,7 +348,8 @@
.scene-wrap, .scene-wrap,
#scene { #scene {
min-height: 58dvh; height: 58dvh;
min-height: 360px;
} }
} }