Прокрутка страницы html

Question

Моя страница не прокручивается вообще, если я изменяю размер окна, содержимое просто невидимо, если страница слишком мала. Я попытался добавить overflow: auto; и overflow: scroll: ко многим другим тегам, но это тоже не сработало.

Вот фрагмент кода, но увидеть this fiddle для полного кода

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 1

Удалить position: fixed; из div.wrapper (и все, что вы хотите получить прокрутки). Возможно, вы имели в виду 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> 
 
         

Answer 2

вы обертка установить в положение: фиксированный, Вы должны изменить его. Это исправит вашу проблему.

div.wrapper { 
    position: relative; 
    }