CODEWITHSUNDEEP
htmlcss
oneman
oneman

Reputation: 811

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>

Upvotes: 0

Views: 55

Answers (2)

Saa_keetin
Saa_keetin

Reputation: 655

you have the wrapper set to position : fixed , you gotta change it. That will fix your problem. 

  div.wrapper {
    position: relative;
   }

Upvotes: 1

user5306470
user5306470

Reputation:

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>

Upvotes: 1

Related Questions