Question

我是网页设计HTML / CSS的新手，我们被要求为我们的学校项目建立一个简单的网站，我看到了一个布局并喜欢这个想法。这是链接：http://theme-frsch2.tumblr.com/

我在缩小浏览器（CTRL - / +）时遇到如何使左侧部分（固定部分）停留在页面中心的问题。有人可以帮我解决这个问题吗？

我已经取得了一些进展，并且使用了固定在左侧部分的位置，这样即使在滚动之后它也会停留在屏幕上，但是当我尝试缩小浏览器时它会粘在顶部。

Answer 1

只需使用您引用的网站上的css。

  <div id="container"> <!-- horizontal centering (margin:auto) -->
    <div class="sidebar"> <!-- keep in screen when zooming (position:fixed) -->
      <div class="logo"> <!-- vertical centering (height 50% of 100%) -->
       <div class="something"> <!-- rearrange position (position absolute) -->
       </div> 
      </div>
    </div>
   </div>

#container {
    margin: auto;
    width: 860px;
}
.sidebar { 
    width: 400px;
    position: fixed;
    height: 100%;
}
.logo {
    height: 50%;
    position: relative;
    top: 0;
}
.something {
    position:absolute;
}

Answer 2

对我有用，希望对您有用在代码末尾添加（如果只想使页面居中，请删除第一行transform: scale(0.8)

body {
transform: scale(0.8); /* for zooming */
transform-origin: 1 0; /* for center position */
transform-origin: top; /* for center to top position */
}

如何在整个网站缩小后使固定位置居中？

2 个答案: