Question

这里的问题是，在演示倒数计时器的脚本之后，出现了不需要的滚动条，并且该滚动条无法滚动，因为除了滚动条的外观之外，所有组件都是可见的，并且一切正常。

我的CSS在下面：

.Height75Percentage{
    height:75.92%
}
.ResultsDiv {
    position: relative
    float: left
    text-align: center
    width: 100%
    overflow: auto
    background
    margin-top
    webkit-box-shadow: 0px 0px 10px 5px rgbal(0,0,0,0.25)
    -moz-box-shadow 0px 0px 10px 5px rgbal(0,0,0,0.25)
    box-shadow
    height
}

/* Inherited from body */
body {
    font-size:14px
    font-family: Georgia
    color:#808081
}

该脚本在如下代码中：<script src="Scripts/coundown.js" type="text/javascript"></script> 代码是：

var offset = 1;
var seconds = 60 - offset;
function secondPass() {
var remainingSeconds = seconds;
if (remainingSeconds < 10) {
    remainingSeconds = "0" + remainingSeconds;
}
document.getElementById('MainContent_countdownValue').innerHTML = remainingSeconds + "”";
if (seconds == 0) {

    document.getElementById('MainContent_countdownValue').innerHTML = "60" + "”";
    seconds = 60 - offset;
} else {
    seconds--;
}
}
var countdownTimer = setInterval('secondPass()', 1000);

Answer 1

您的CSS有点时髦且难以理解，但总的来说，这是隐藏div上滚动条的方式（这是jsfiddle上的演示链接：https://jsfiddle.net/sarkism/nv89zy4a/）

.description {
  height: 150px;
  overflow-x: hidden;
}

.inner {
  width: calc(100% + 17px);
  overflow-y: scroll;
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
}

<div class="description">
  <div class="inner">
    <h4>Description</h4>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>
</div>

Answer 2

您不应为父组件设置固定高度，否则会导致出现滚动条。

可以只使用height: auto;

javascript-使滚动条出现

2 个答案: