<header>
<input type="checkbox" name="min-height" id="min-height" />
<label for="min-height">min-height:</label>
<input type="range" min="0" max="400" step="10" id="min-hegiht-handler" value="0" disabled />
<oupt id="outVal"></oupt>
<label for="overflow">overflow:</label>
<select name="overflow" id="overflow">
<option value="inherit">inherit</option>
<option value="initial">initial</option>
<option value="revert">revert</option>
<option value="overlay">overlay</option>
<option value="unset">unset</option>
<option value="auto">auto</option>
<option value="hidden">hidden</option>
<option value="scroll">scroll</option>
<option value="visible">visible</option>
</select>
</header>
<div class="parent">
<div class="aspectratio">
<p>16:9</p>
</div>
</div>
<div class="parent">
<div class="aspectratio">
<p>Occaecat deserunt elit officia aliqua est esse quis dolor proident pariatur. </p>
<p>Occaecat deserunt elit officia aliqua est esse quis dolor proident pariatur. Esse commodo ut ullamco laboris tempor eiusmod minim. Labore magna excepteur nulla sunt velit velit ullamco ad. Est aute Lorem velit laboris ut dolore cillum.</p>
</div>
</div>
<div class="parent">
<div class="aspectratio">
<p>Occaecat deserunt elit officia aliqua est esse quis dolor proident pariatur. Esse commodo ut ullamco laboris tempor eiusmod minim. Labore magna excepteur nulla sunt velit velit ullamco ad. Est aute Lorem velit laboris ut dolore cillum.</p>
<p>Occaecat deserunt elit officia aliqua est esse quis dolor proident pariatur. Esse commodo ut ullamco laboris tempor eiusmod minim. Labore magna excepteur nulla sunt velit velit ullamco ad. Est aute Lorem velit laboris ut dolore cillum.</p>
</div>
</div>
@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
font-family: "Exo", Arial, sans-serif;
background-color: #222;
color: #fff;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr));
font-size: 1.5rem;
gap: 10px;
padding: 10px;
}
.parent {
font-size: 16px;
line-height: 1.5;
}
:root {
--min-height: inherit;
--overflow: inherit;
--column-width: 280px;
}
.aspectratio {
aspect-ratio: 16 / 9;
min-height: var(--min-height);
overflow: var(--overflow);
background-color: #09f;
padding: 10px;
}
header {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 20px 10px;
background-color: rgba(50, 220, 220, 0.5);
display: flex;
justify-content: center;
align-items: center;
}
header > * {
margin: 0 5px;
}
const rootEle = document.documentElement;
const checkBox = document.getElementById("min-height");
const rangEle = document.getElementById("min-hegiht-handler");
const overflowSelect = document.getElementById("overflow");
const outVal = document.getElementById("outVal");
overflowSelect.addEventListener("change", (etv) => {
rootEle.style.setProperty("--overflow", etv.target.value);
});
checkBox.addEventListener("change", (etv) => {
rangEle.toggleAttribute("disabled");
if (checkBox.checked) {
rootEle.style.setProperty("--min-height", `${rangEle.value}px`);
} else {
rootEle.style.setProperty("--min-height", `inherit`);
}
});
rangEle.addEventListener("change", (etv) => {
if (checkBox.checked) {
rootEle.style.setProperty("--min-height", `${etv.target.value}px`);
outVal.textContent = `${etv.target.value}px`;
} else {
rootEle.style.setProperty("--min-height", `inherit`);
outVal.textContent = "";
}
});
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.