试图有一个左右*响应*侧边栏，中间有可滚动的内容，滚动条在右侧

Question

I am having a tough time accomplishing something I see done on both Twitter and Instagram's desktop versions.

What I want is a responsive sidebar on both the left and right sides of the page. In the middle is a 600 px width div with the page's content. The scroll bar must be on the right hand side of the page, not the right hand side of the content div.

Let me show you some things that aren't quite there which I found over the past two days.

1. A Flexbox layout with fixed sidebars . There are three problems here: (1) the scroll bar is on the right side of the content div. I want it on the right hand side of the browser . (2) The content in the middle isn't set to 600px width. (3) I suspect that if its width was 600px, the surrounding sidebars would not responsively adjust to the browser being resized.

2. This jsFiddle which is very close . The problem here is that the code isn't responsive. Because the sidebars are removed from the document flow by their fixed position, their width cannot auto-adjust to fill the space around the 600px width content div when I write it that way. Instead, I get white space on either side.

This would be what I want if the sidebar divs followed you down the page when you scroll.

Summary of requirements:

• Two responsive sidebars, fixed to the left and right sides of the page, which expand and contract to fill the space around the 600px center content div.

• A div in the center containing content which is scrollable; however the scroll bar is not on the side of the div (I can do that, it's easy). Rather it is on the side of the page like Twitter and Instagram's.

I've been at this for about 16 hours across two days. It seems apparent that I cannot use position: fixed or sticky as the sidebars must be responsive like Twitter's. Said differently, the content div in the middle takes 600px of the width, and the sidebars responsively adjust to fill the remaining width. But without position: fixed there is no way to make the sidebars stay where they are...?

Answer 1

My best guess would be for you to use position:absolute; for your side bars, and use left:0; top:0; left:0; top:0; for the left bar and right:0; top:0; right:0; top:0; for the right bar.

As for the responsiveness, maybe try using relative units for the width such as vw, or vh. (For eg, width:20vw; (which would be 20% of screen width) ). I believe this will help your content wrap and change according to the size of the screen.

Also, try putting overflow:hidden; for the middle div CSS, and overflow-y:auto; for the body CSS.

:-)

Answer 2

I got it!

The solution came to me when I read this question with an answer that mentions width: calc() .

Here is my code, roughly:

<article>
    <aside className="general-sidebar aside1 w-calc">foo
    </aside>
    <div className="center-page">bar</div>
    <aside className="general-sidebar aside2 w-calc">baz
    </aside>
</article>

.aside1 {
    left: 0;
}

.aside2 {
    right: 0;
}

.general-sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
}

.w-calc {
    width: calc((100% - 600px) / 2) !important;
    // border: 2px solid white;
}

So basically the sidebars are in fixed position on the left and right side, removed from document flow... to remedy what this does to the responsive width I was achieving using Flexbox, I inserted the width: calc() line. Both sidebars receive this width property.