Geek asks and answers

CSS and DIV with title and body with scrollable content and fixed sidebar to the right

I searched all around, but I can’t solve it, so I’m moving here.

I want to create a layout that looks like this: enter image description here

The layout consists of three fields:

  • Header at the top with a fixed height, dynamic width and vertically scrollable content.

  • The body under the heading, with dynamic width and height, with vertically scrollable content.

  • Sidebar on the right, with a fixed width, dynamic height and no scroll. (This should remain fixed while scrolling through the contents of the body)

Dynamic height and / or width means that it will be resized using the window, rather than resizing the content.

If something is unclear or there are any questions, I will do my best to answer.

edit: one of my (very unsuccessful) attempts: http://jsfiddle.net/uYTht/34/

Structure

html:

<body>
    <div id="header">
        header content
    </div>
    <div id="content">
        body content
    </div>
    <div id="sidebar">
        sidebar content
    </div>
</body>

Css code:

#header {
    width: 100%;
    height: 100px;
    margin-right: 150px;
    background-color: green;
    overflow-y: scroll;
}
#content {
    background-color: blue;
    height: 100%;
    overflow-y: scroll;
}
#sidebar {
    position: absolute;
    top: 0;
    left: 100%;
    margin-left: -150px;
    width: 150px;
    height: 100%;
    float: right;
    background-color: red;  
    overflow: hidden;
}

edit: David below helped me find the way. Basically, what I had to use to make it work the way I wanted was the calc () function.

edit edit: Jack below came up with a solution that did not use calc (), which I have to say what I prefer. Thank you very much for your help!

+3
source share
3 answers

I created a simple script that does not use calc(support is not great - http://caniuse.com/calc , and then a big unknown is some kind of performance penalty that you can / cannot use using it.)

It is very simple using simple CSS.

http://jsfiddle.net/ruYGH/3/

+2

, overflow.

( ):

overflow:auto;

:

overflow:hidden;

, undefined, , .

( , ) :

JSFiddle

:

calc:

.sidebar{
    width: 200px;
}

.left{
    width: calc(100% - 200px);
}

JSFiddle , .

+1

divs "overflow", , , , . , , , , .

CSS

, , rowspan = "2" .

( , , ), div = "display: table...."

Thanks for the fiddle, your css overflow only works because your headers and content contents are 100% wide (full screen) and the scrollbars are conceptually under the sidebar. I need to sell you using this table layout so that you can “dynamically” correct your measurements so that the browser can know when to scroll, rather than expand the content to infinity, to fit the size of the content, rather than overflowing with the scroll bar.

0
source

More articles:


All Articles