horizontal scroll with height fixed on 100%

Question

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

    <html>
    <head>
        <style type="text/css">
            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;
            }
        </style>
    </head>
    <body>
        <div class="main-content-wrapper">
            <nav class="main-sidebar">
            </nav><section id="main-content" class="main-content">

            </section>
        </div>
</body>

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

10,323
7
58
65

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

25,313
20
91
128

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