Я получил сетку, которую мне нужно заполнить двумя ползунками и холстом, который выглядит следующим образом:
<!DOCTYPE html>
<html>
<style>
*{
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: Arial, Calibri;
}
.grid {
display: grid;
grid-template-columns: 5fr 30px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 30px 5fr;
grid-template-rows: 1fr 5fr 50px 1fr;
grid-gap: 10px;
width: 100vw;
height: 100vh;
}
.canvas-container {
grid-column: 3 / 10;
grid-row: 2;
border-style: solid;
border-color: yellow;
}
.canvas {
background-color: black;
}
.slider-container {
grid-row: 2;
display: flex;
justify-content: center;
align-items: center;
border-style: solid;
border-color: green;
}
.slider {
appearance: none;
outline: none;
background: #d3d3d3;
opacity: 0.7;
transition: opacity .2s;
-webkit-appearance: none;
-webkit-transition: .2s;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.button-container {
grid-row: 3;
display: flex;
justify-content: center;
align-items: center;
}
.button {
width: 80px;
height: 30px;
border: none;
color: white;
background-color: #4CAF50;
}
.button:hover {
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
</style>
<body>
<div class="grid">
<div class="canvas-container"><canvas id="canvas" class="canvas" oncontextmenu="event.preventDefault()" /></div>
<div class="slider-container" style="grid-column: 2;"><input type="range" class="slider" min="0" max="6" value="0" class="slider" id="start-layer-id"></div>
<div class="slider-container" style="grid-column: 10;"><input type="range" class="slider" min="0" max="6" value="0" class="slider" id="end-layer-id"></div>
<div class="button-container" style="grid-column: 3;"><input type="button" class="button" value="A"></div>
<div class="button-container" style="grid-column: 4;"><input type="button" class="button" value="B"></div>
<div class="button-container" style="grid-column: 5;"><input type="button" class="button" value="C"></div>
<div class="button-container" style="grid-column: 6;"><input type="button" class="button" value="D"></div>
<div class="button-container" style="grid-column: 7;"><input type="button" class="button" value="E"></div>
<div class="button-container" style="grid-column: 8;"><input type="button" class="button" value="F"></div>
<div class="button-container" style="grid-column: 9;"><input type="button" class="button" value="G"></div>
</div>
</body>
</html>
Теперь возникли следующие два вопроса:
- Как я могу убедиться, что два ползунка всегда имеют одинаковую высоту (или ширину, потому что они вращаются) с элементом сетки, в котором он находится. Цель состоит в том, чтобы он автоматически увеличивался в размере, если я изменяю размер своей сетки.
- Как я могу убедиться, что холст заполняет всю область элемента сетки своего родителя, чтобы он также масштабировался?
Надеюсь, что скриншот ниже показывает, чего я пытаюсь достичь. Предпочтительно это делается с использованием CSS, а не Javascript. Если это работает только с Javascript, пусть будет так.
![enter image description here](https://i.stack.imgur.com/kEzRQ.png)
EDIT:
Хорошо, забудь о холсте. Заполнить элемент родительской сетки можно просто, установив width
и height
из .canvas
в 100%
. Из-за моей неопытности с CSS это было не очевидно для меня.
Однако тот же подход не работает для ползунков, потому что они вращаются. Попытка этого приведет к следующему:
![enter image description here](https://i.stack.imgur.com/JImuf.png)
У кого-нибудь есть идеи как настроить размер слайдера?