如何正确实现固定边栏？ [英] How to implement fixed sidebar correctly?

问题描述

我想要完成这个设计：

侧边栏将被固定，但右边（主要内容）将垂直滚动（如果用户的浏览器窗口较小，则可能水平滚动）。什么是最好的方法来实现这个？

I'm trying to accomplish this design: Where the sidebar will be fixed, but the right side (the main content) will scroll vertically (and potentially horizontally if the user's browser window is smaller). What is the best way to achieve this?

我试图使边栏是固定的固定宽度为200px，然后主要内容只有一个margin-左侧为200像素。但是，如果用户的浏览器小于主要内容，则侧边栏会在用户尝试水平滚动时与所有内容重叠。

I tried making the sidebar be "fixed" with a fixed width of 200px, and then the main content just has a margin-left of 200px. However, if the user's browser is then smaller than the main content, the sidebar overlaps all the content as the user tries to scroll horizontally.

是否有更智能的方式这个？感谢！

Is there a smarter way to achieve this? Thanks!

推荐答案

使用content div作为网页的容器。

Use the content div as your container for the page.

 .sidebar {
     position: fixed;
     width: 200px;
     height: 400px;
     background: #000;
 }
 .content {
     margin-left: 200px;
     height: 500px;
     width: auto;
     position: relative;
     background: #f00;
     overflow: auto;
     z-index: 1;
 }
 .info {
     width: 1440px;
     height: 300px;
     position: relative;
     background: #f55;
 }

<div class="sidebar"></div>
<div class="content">
    <div class="info"></div>
</div>

您的内容将需要是放置页面的容器。这里的值是我的测试看看我是否在这里正确。如果您的宽度和高度超过为内容设置的值，则会出现滚动条。

Your content will need to be the container to put the page in. The values here are my test to see if I am correct in this. If your width and height exceeds the values you set for content, the scroll bars will appear.

有小提琴： http://jsfiddle.net/djwave28/JZ52u/

编辑：响应边栏

要添加响应式固定边栏，只需添加媒体查询。

To have a responsive fixed sidebar, simply add a media-query.

示例：

@media (min-width:600px) {
   .sidebar {
     width: 250px;
   }
   .content {
     margin-left: 250px;
   }
 }

这是另一个小提琴： http://jsfiddle.net/djwave28/JZ52u/363/

这篇关于如何正确实现固定边栏？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！