hiding the scrollbar from the DIV

Question

I am working with div which is throwing an additional scrollbar which I don't want to have. I want my div to be of flexible width (bootstrap) and fixed height of 290px. Can someone please help me out of this ?

<div class="box">
  <atitle>This is box 2</atitle>
  <hr>
    <div class="box1">
      <p>Hello World Hello World Hello World Hello World Hello World </p>
    </div>
</div>

And the CSS is here :

.box {
  overflow: hidden;
  min-height: 290px;
  border: 1px solid #383737;
  margin-bottom: 30px;
  background-color: #3d3d3d;
}

.box1 {
    overflow: auto;
    height: 290px;
}

for which div you don't need to show the scrollbar ? box or box1 ? — Frebin Francis, Dec 31 '15 at 09:05
Replace overflow: auto; by overflow: hidden; on .box1 or provide better explanation — Ianis, Dec 31 '15 at 09:06
@Ianis : by adding hidden, issue won't resolve, because my issue is to visually remove scrollbar but the functionality of scrolling should remain in div. — b0y, Dec 31 '15 at 09:10
Look at this : http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll — Ianis, Dec 31 '15 at 09:11
@FrebinFrancis that way i wont be able to see the scrollbar, it's fine. But i want the functionalities of scroll. my Issue is just to hide the scrollBAR — b0y, Dec 31 '15 at 09:13
@FrebinFrancis : In this fiddle, the width is declared, i can't do that as i am using bootstrap. — b0y, Dec 31 '15 at 09:18

score 0 · Answer 1 · answered Dec 31 '15 at 09:14

0

I think this might help you:

.box1{
    width: 100%;
    height: 99%;
    border: 1px solid blue;
    overflow: auto;
    padding-right: 15px;
}

.box{
    height: 99%;
    border: 1px solid red;
    overflow:hidden;
}

answered Dec 31 '15 at 09:14

Andy the android

169
1
2
16

if you don't want the scroll bars set a `width` and `max-width` – Andy the android Dec 31 '15 at 09:16
I cant set width, I am using bootstrap :( setting width would be difficult for all devices – b0y Dec 31 '15 at 09:20
set **max-width** only – Andy the android Dec 31 '15 at 09:28
define **max-width** and **width** (if possible) in % to be compatible with devices – Andy the android Dec 31 '15 at 09:29

hiding the scrollbar from the DIV

1 Answers1