Question

我的页面根本没有滚动，如果我更改窗口大小，如果页面太小，内容就不可见。我尝试将overflow: auto;和overflow: scroll:添加到许多不同的代码中，但这也无效。

以下是代码片段，但请参阅this fiddle了解完整代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

你将包装器设置为position：fixed，你必须改变它。这将解决您的问题。

  div.wrapper {
    position: relative;
   }

Html页面滚动

2 个答案: