Question

我用这种方式用css在div中设置一个垂直输入范围：

input[type=range] {transform: rotate(270deg);
}

我不想使用

appearance: slider-vertical;

（因为它破坏了我的滑块设计）。

div是高度：页面的30％;和宽度：33px;。我希望输入范围（滑块控件）占据div的整个高度。

我无法使用{width：100％;}（是滑块对它的水平尺寸作出反应）它会使滑块33px。

那么如何将滑块宽度设置为div高度的100％？我是一个非常初学者，有没有一个简单的方法来做这样的事情，但实际上工作？（我什么都看不到）

divFoo{
  height: 30%;
  width: 33px;
}

input[type=range].slider {
  width: divFoo.height;
}

感谢

Answer 1

这必须使用javascript完成。这是代码段。

// We should make sure that the window is loaded first
window.onload = function() {
  // get height of div
  // we can also calculate by using
  // var height = window.offsetHeight * (30 / 100)
  var height = document.getElementById("div").offsetHeight;
  // Now we set the width of the slider to the height of the div
  document.getElementById("slider").style.width = height+"px";
};

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

div {
  width: 33px;
  height: 30%;
}

<!-- Here is your div -->
<div id="div"></div>
<!-- Here is the slider -->
<input type="range" id="slider">

css垂直输入范围宽度问题

1 个答案: