html - 缩小整个网站后,如何使固定位置居中?

标签 html css css-position fixed

我对网页设计 HTML/CSS 非常陌生,我们被要求为我们的学校元素制作一个简单的网站,我看到了一个布局并喜欢这个想法。这是链接:http://theme-frsch2.tumblr.com/

我在缩小浏览器 (CTRL-/+) 时遇到如何使左侧部分(固定部分)保持在页面中心的问题。有人可以帮助我实现这一目标吗?

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

最佳答案

只需使用您引用的网站中的 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;
}

关于html - 缩小整个网站后,如何使固定位置居中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25338522/

相关文章:

javascript - 有没有一种工具可以根据 HTML 和 CSS 的使用自动生成代码来预加载图像?

html - 如何使用 CSS 水平对齐复选框

CSS 绝对滚动与相对滚动

css - 网格缩略图垂直对齐顶部

html - 对齐页脚的方法?

html - 无法修复 Bootstrap 折叠的导航

internet-explorer - IE quirksmode中绝对定位DIV的宽度

javascript - jQuery 按钮更改类

html - 将文本颜色应用于 HTML 列

javascript - 如何使用 jquery 制作字符选择页面?