CODEWITHSUNDEEP
htmlcss
ahmeaad
ahmeaad

Reputation: 85

How to create div with vertical scroll bar only for long content

I want to make div with vertical scroll-bar only for long content without horizontal scroll-bar. I am not familiar with CSS. Let me know if I am missing anything.

#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>

Upvotes: 1

Views: 6736

Answers (1)

adricadar
adricadar

Reputation: 10219

If you set width:100% to #scrolldiv the problem will be solved.

Because the width of the #scrolldiv was bigger than parent width the horizontal scrollbar was activated for the 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>

Upvotes: 3

Related Questions