CODEWITHSUNDEEP
javascripthtmlcss
marco
marco

Reputation: 1140

horizontal scroll with height fixed on 100%

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)

Upvotes: 0

Views: 1475

Answers (3)

Green Wizard
Green Wizard

Reputation: 3657

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;
    }

Upvotes: 1

Klaster_1 Нет войне
Klaster_1 Нет войне

Reputation: 12146

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.

Upvotes: 3

Sowmya
Sowmya

Reputation: 26969

Add overflow:hidden to main div

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

DEMO

Upvotes: 0

Related Questions