oneman oneman - 29 days ago 8
HTML Question

Html page scrolling

My page doesn't scroll at all, if I change the window size, the content is just invisible if the page is too small. I've tried adding

overflow: auto;
and
overflow: scroll:
to many different tags, but this didn't work either.

Here's a snippet of the code, but see this fiddle for the full code



div.wrapper {
position: fixed;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
min-height: 100%;
}

header, ul {
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}

div.contentwrapper {
text-align: center;
margin: 0 auto;
overflow: auto;
height: 100%;
}

div.left, div.right, div.mid {
display: inline-block;
vertical-align: top;
overflow: auto;
}

footer {
position: relative;
bottom: 0;
width: 100%;
}

<div class="wrapper">
<header>
<a href=""><img></a>
<ul>my nav bar</ul>
</header>
<div class="contentwrapper">
<div class="left">
<div class="upperleft"></div>
<div class="lowerleft"></div>
</div>
<div class="mid"></div>
<div class="right"></div>

<footer></footer>
</div>
</div>




Answer

Remove position: fixed; from div.wrapper (and anything else you want to get scrolling). Perhaps you meant position: absolute;

JSFiddle.

div.wrapper {
  text-align: center;
  margin: 0 auto;
  left: 0;
  right: 0;
  min-height: 100%;
 }

header, ul {
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
 }

 div.contentwrapper {
   text-align: center;
   margin: 0 auto;
   overflow: auto;
   height: 100%;
 }

div.left, div.right, div.mid {
  display: inline-block;
  vertical-align: top;
  overflow: auto;
 }

footer {
  position: relative;
  bottom: 0;
  width: 100%;
 }
   
<div class="wrapper">
  <header>
    <a href=""><img></a>
    <ul>my nav bar</ul>
  </header>
  <div class="contentwrapper">
    <div class="left">
      <div class="upperleft"></div>
      <div class="lowerleft"></div>
    </div>
    <div class="mid"></div>
    <div class="right"></div>
    
    <footer></footer>
  </div>
</div>