horizontal scroll with height fixed on 100%

Question

here is what I created http://jsfiddle.net/ZygnV/

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.main-content-wrapper {
  height: 100%;
  overflow-y: hidden;
  white-space: nowrap;
}

.main-sidebar {
  display: inline-block;
  height: 100%;
  width: 220px;
  background-color: rgb(0, 0, 0);
}

.main-content {
  display: inline-block;
  height: 100%;
  width: 10000px;
}

<div class="main-content-wrapper">
  <nav class="main-sidebar">
  </nav>
  <section id="main-content" class="main-content">

  </section>
</div>

the problem is that little vertical scroll: I would like to not have it.

Why this little bug? And how can I fix it? I thought to set overflow-y:hidden but I don't think it's the best solution: if I would set a min-height and then display the scroll it would be always hidden (unless I act with a js script)

Why the `.main-content` has `width: 10000px`? This is the property which causes the problem. Do you need it for any specific reason? — matewka, Jan 02 '14 at 10:03

score 3 · Answer 1 · edited May 23 '17 at 11:56

3

There shouldn't be vertical scroll in the first place.

The reason behind it is that both nav and sectionare display: inline-block, so spaces in code formatting affect layout. There are various ways to solve the problem, one of them would be to set font-size: 0 on .main-content-wrapper and desired font-size on children.

JSFiddle.

Alternatively, you can use different approach to place sidebar and content, flexible boxes perform extremely good in this scenario.

edited May 23 '17 at 11:56

Community

1
1

answered Jan 02 '14 at 10:06

Klaster_1 Нет войне

11,790
9
61
73

great. I used `display: inline-block` for `nav` and `section` to achieve my objective: a horizontal layout. But I never thought to set `font-size` property to their container. Thank you ;) – marco Jan 02 '14 at 10:18

score 1 · Answer 2 · answered Jan 02 '14 at 10:21

This could help you

    .main-content {
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 10000px;
   }
   .main-sidebar {
    background-color: #000000;
    display: inline-block;
    height: 100%;
    position: absolute;
    width: 220px;
    }

score 0 · Answer 3 · answered Jan 02 '14 at 10:04

0

Add overflow:hidden to main div

.main-content-wrapper{
            height: 100%;
            white-space: nowrap;
            overflow:hidden
        }

DEMO

answered Jan 02 '14 at 10:04

Sowmya

26,684
21
96
136

excuse me, maybe I was not enough clear, in fact I forgot to say that I would like to have the horizontal scroll (that's the reason why the main-content has 10000px of width (just to show the horizontal scroll). Then, as I have already said, I could set overflow-y:hidden but then how to show the vertical scrollbar when a certain min-height is reached? I should act with js, ok, but is there a simpler way(only css, not javascript)? – marco Jan 02 '14 at 10:09

horizontal scroll with height fixed on 100%

3 Answers3