CODEWITHSUNDEEP
htmlcss
Alejandro Hdz
Alejandro Hdz

Reputation: 81

Overflow-y auto not working in this case

I've got a problem with overflow-y: auto. I got a div working just how I want it: with a header and a footer capping the content at its max height and staying visible at the top and bottom respectively when shrinking the viewport, the only thing I can't get to work is the scrollbar in the content in the middle. I can get a div to scroll but not with this header/footer behaviour. Please help.

Here's the code. Sorry if it's not clean enough:

html {
  height: 100%;
}
body {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 20px;
  color: #3d5266;
  margin: 12px;
  background: lightblue;
}
#container {
  max-width: 800px;
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 24px);
  border-radius: 6px;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.2);
  margin: auto;
}
header, footer {
  position: absolute;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #fff;
  z-index: 5;
  outline: 1px solid rgba(0,0,0,0.1);
  padding: 0 8px 0 8px;				
}
header {
  top: 0;
  border-radius: 6px 6px 0 0;		
}
footer {
  bottom: 0;		
  border-radius: 0 0 6px 6px;	
}
section {
  margin: 40px 0;
}
.content {
  position: relative;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  padding: 8px;
}
</style>
<div id="container">
  <header>
    header text
  </header>
  <section>
    <div class="content">

      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>

    </div>
  </section>
  <footer>
    footer text
  </footer>
</div>

Upvotes: 4

Views: 18609

Answers (2)

AmirHossein Rd
AmirHossein Rd

Reputation: 255

Well since the entire component is within the div with id = "container" and you gave the container div overflow: hidden in the css, so it basically overrides the css property given to content

in your css #container change it to 

  overflow-y: scroll ;
  overflow-x: hidden ;

Upvotes: 1

Sreekanth Reddy Balne
Sreekanth Reddy Balne

Reputation: 3424

You must give perfect height to the content element in order for the scroll to work.

height: calc(100vh - 24px - 40px - 40px);

html {
  height: 100%;
}
body {
  font-family: 'Open Sans';
  font-weight: 300;
  font-size: 20px;
  color: #3d5266;
  margin: 12px;
  background: lightblue;
}
#container {
  max-width: 800px;
  position: relative;
  overflow: hidden;
  max-height: calc(100vh - 24px);
  border-radius: 6px;
  box-shadow: 0 1px 3px 1px rgba(0,0,0,0.2);
  margin: auto;
}
header, footer {
  position: absolute;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #fff;
  z-index: 5;
  outline: 1px solid rgba(0,0,0,0.1);
  padding: 0 8px 0 8px;				
}
header {
  top: 0;
  border-radius: 6px 6px 0 0;		
}
footer {
  bottom: 0;		
  border-radius: 0 0 6px 6px;	
}
section {
  margin: 40px 0;
}
.content {
  position: relative;
  height: calc(100vh - 24px - 40px - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  padding: 8px;
}
</style>
<div id="container">
  <header>
    header text
  </header>
  <section>
    <div class="content">

      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      aaaabla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>
      bla<br>

    </div>
  </section>
  <footer>
    footer text
  </footer>
</div>

Upvotes: 3

Related Questions