Question

我正在构建这个网站，并为我需要的东西创建了一个很好的布局。但是在较小的（笔记本电脑）屏幕上，内容高于屏幕，并且不允许向上和向下滚动。相反，它会一直显示我内容的确切中心。

如何向整个页面添加滚动条，这样人们才能固定在页面的中心？

我目前的css：

<style>
      .centered {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      #maincanvas{
        position:fixed;
        top: 50%;
        left: 50%;
        width:700px;
        height:800px;
        /* background: background="static/bg02.png";*/
        /*border: 15px solid #cc0000;*/
        padding: 25px;
        transform: translate(-50%, -50%);
      }
      #logobox{
        position:absolute;
        top: 0px;
        left: 50px;
        width:600px;
        height:50px;
        /*border: 10px solid #cc0000;*/
        padding: 25px;
      }

      #contentbox{
        position:absolute;
        top: 200px;
        left: 50px;
        width:600px;
        height:400px;
        background: #f5f5dc;
        border: 10px solid #cc0000;
        padding: 25px;
      }

      #footerbox{
        position:absolute;
        bottom: 10px;
        left: 50px;
        width:600px;
        height:30px;
        background: #f5f5dc;
        border: 10px solid #cc0000;
        padding: 25px;
      }
      #footerlogo{
        overflow:hidden;
        position:fixed;
        bottom: 30px;
        right: 5px;
        background: #f5f5dc;
        border: 10px solid #cc0000;
        overflow: hide;
        width:250px;
        height:30px;
        padding: 25px;
      }
      /*input[type=text] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 3px solid #ccc;
        -webkit-transition: 0.5s;
        transition: 0.5s;
        outline: none;
      }*/

input[type=text]:focus {
    border: 3px solid #555;
}

      .widthSet {
        max-width: 150px;
        position:fixed;
        bottom: 35px;
      }
      .alignleft {
        float: left;
      }
      .alignright {
        float: right;
      }
</style>

网站内容：

  <body background="static/bg.png">
    <div id="maincanvas">
      <div id="logobox">
      </div>
      <div id="contentbox">
        $:content
      </div>
      <div id="footerbox">
      </div>
    </div>
  </body>

我尝试过使用不同的溢出设置，但到目前为止，并没有管理我所追求的结果。有溢出我只能滚动框的内容，但我需要的是滚动网站（画布？）

希望这不是重复，因为我搜索过，但可能缺少搜索的确切关键字。

Answer 1

您遇到的问题是使用position: fixed;。

来自MDN regaurding 固定定位。

固定定位：不要为元素留空间。相反，将其放置在相对于屏幕视口的指定位置，并且在滚动时不要移动它。

因此，向overflow属性添加滚动将不会执行任何操作。 固定定位的元素不占用任何空间，并且总是以某种方式相对于视口定位。

您想要的是position: absolute;以及对较小屏幕的top属性的修改。

#maincanvas {
  /* Note: we could use margin: 0 auto; to center but on larger screens we need left and top set to center inside viewport */
  position: absolute;
  left: 50%;
  width: 700px;
  height: 800px;
  padding: 25px;
  transform: translateX(-50% );
}
#logobox {
  position: absolute;
  top: 0px;
  left: 50px;
  width: 600px;
  height: 50px;
  border: 10px solid #cc0000;
  padding: 25px;
}
#contentbox {
  position: absolute;
  top: 200px;
  left: 50px;
  width: 600px;
  height: 400px;
  background: #f5f5dc;
  border: 10px solid #cc0000;
  padding: 25px;
}
#footerbox {
  position: absolute;
  bottom: 10px;
  left: 50px;
  width: 600px;
  height: 30px;
  background: #f5f5dc;
  border: 10px solid #cc0000;
  padding: 25px;
}
#footerlogo {
  overflow: hidden;
  position: fixed;
  bottom: 30px;
  right: 5px;
  background: #f5f5dc;
  border: 10px solid #cc0000;
  overflow: hide;
  width: 250px;
  height: 30px;
  padding: 25px;
}
/* When viewport is large enough to start centering #main */

@media (min-height: 800px) {
    #maincanvas {
        top: 50%;
        transform: translate( -50%, -50% );
    }
}

<div id="maincanvas">
  <div id="logobox">
  </div>
  <div id="contentbox">
    $:content
  </div>
  <div id="footerbox">
  </div>
</div>

对于它的价值，你的标记有很多不足之处。您不需要使用所有绝对定位。如果可以的话，尝试并重复使用样式。这是一种简化事物的方法。

注意：我在#main内的DIV上复制了你的边距，这将在较窄的视口上创建一个水平滚动条。不确定这里的目的是什么。也许在帖子中没有提供#main上的某些样式？

#main {
  position: absolute;
  left: 50%;
  width: 700px;
  height: 800px;
  padding: 25px;
  transform: translateX(-50%);
}
#main > div {
  margin: 0 50px 50px;
  padding: 25px;
  background: #f5f5dc;
  border: 10px solid #C00;
}
#main > div:last-child {
  margin-bottom: 0;
}
#logo {
  height: 50px;
}
#content {
  height: 400px;
}
#footer {
  height: 30px;
}
/* When you know the viewport is large enought to try and center ALL of #main */

@media (min-height: 800px) {
  #main {
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

<div id="main">
  <div id="logo"></div>
  <div id="content">
    <p>
      Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
      Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content. Content.
    </p>
  </div>
  <div id="footer"></div>
</div>

Answer 2

这是您希望在css中拥有的代码。尝试这个，看起来会好很多。您可以使用margin-top移动div本身。

  #maincanvas{
    margin-top: 15%;
    margin-left: 50%;
    width:700px;
    height:800px;
    padding: 25px;
    transform: translate(-50%, -50%);
  }

试试吧！

网站高度偏离屏幕

2 个答案: