如何使用垂直滚动条创建DIV仅用于长时间内容

Question

我想用垂直卷轴制作div，仅适用于没有水平卷轴的长度内容。我不熟悉CSS。让我知道我是否缺少任何东西。

#scroldiv {
  margin-left: auto;
  margin-right: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 750px;
  height: 1200px;
  background-color: wheat;
}
#iframe {
  width: 803px;
  height: 1000px;
  background: #FFFFFF;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form id="form1 " runat="server ">
  <div id="scroldiv " style=" ">
    <iframe id="iframe " scrolling="auto " frameborder="0 " onload="window.scrollTo(0, 0) " src="http://www.myhotels24.eu/fibe.aspx?hid=10000&chid=0&rate=IBE&css=brown " allowtransparency="true "></iframe>
  </div>
</form>

Answer 1

如果将width:100%设置为#scrolldiv，则将解决问题。

因为#scrolldiv的width大于 parent width 水平scrollbar 被激活了 parent 。。

。

#scroldiv {
  margin-left: auto;
  margin-right: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  width: 100%;
  height: 1200px;
  background-color: wheat;
}
#iframe {
  width: 803px;
  height: 1000px;
  background: #FFFFFF;
}

<script src="script/jquery-1.11.1.min.js"></script>
<form id="form1" runat="server">
  <div id="scroldiv" style="">
    <iframe id="iframe" scrolling="auto" frameborder="0" onload="window.scrollTo(0, 0)" src="http://www.myhotels24.eu/fibe.aspx?hid=10000&chid=0&rate=IBE&css=brown" allowtransparency="true"></iframe>
  </div>
</form>