Geek Answers Handbook

Fixed div overlays scrollbar of static div

I am having problems with the style of my layout, as if I want to. I have a content area #content(gray that you see in the example) with a yellow element inside. This div is equal position:static;height:100%;. Now I have a #left-paneldiv, s position:fixed;height:100%;. The problem is that if there is not enough space in the content area, a horizontal scroll bar appears. This will be overridden by a fixed div. For me, this is all logical, but I do not know how to get around this. My scrollbar in the element #contentshould be visible across the entire width of the window. Therefore, it would not be easy for me to reduce the width of the content if the panel is in sight.

Whole css:

#content{
    width:100%;
    height:100%;
    background:grey;
}
#left-panel{
    position:fixed;
    top:0;
    left:0;
    width:300px;
    height:100%;
    overflow-y:auto;
}

Can someone help me fix this using pure CSS?

enter image description here

Fiddle: http://jsfiddle.net/a2wn8x5z/1/

+4
3

position:fixed; , . , , position:fixed;, position:fixed;. ().

, position:absolute; , / :

+5

, "position: static;" div, . :

"position: relative;" #content #content # HTML.

<div id="left-panel"></div>
<div id="content"></div>

#content{
    position: relative;
    width:100%;
    height:100%;
    background:grey;
}

Codepen: http://codepen.io/anon/pen/yoHxl

"position: relative; z-index: 1" (z-index of #content # ) #content.

<div id="content"></div>
<div id="left-panel"></div>

#content{
    position: relative;
    width:100%;
    height:100%;
    background:grey;
    z-index: 1;
}

Codepen: http://codepen.io/anon/pen/HgwDx

, Marek

0

,

<div style="width:110%;border-right:10px solid black;height:200px;background:yellow;"></div>

width:110%;, .

, , .

position: fixed; #wrapper #left-panel, stlye left: 0, , left of #wrapper , #left-panel, #wrapper

left:200px; /* the width of #left-panel (if left panel has border, add it to this too )*/
right:0;


width:100%;

, , div #content width:200%; margin:20px;

scrollbar , position: fixed #wrapper, scrollbar body, overflow:auto #wrapper, scrollbar #wrapper, body, CSS #wrapper

#wrapper{
    background:gray;
}

, div height , , , padding.

0

More articles:


All Articles