I have a <div>
which is positioned with position:fixed
. When the window is too small horizontally to fit the di开发者_如何学编程v, no scroll bars appear, the right hand side of the div is simply cut off.
If I change to position:absolute, the scroll bars appear as normal.
Is there any way of making the browser recognise the size of the div and the need for scrolling whilst still using position:fixed?
Note: there is another div with default position declared before the fixed div.
Scrollbars are simply incompatible with a fixed position, logically. If you tell the user-agent to fix something, you should not expect scrollbars as they would move the something. Why don't you use position: absolute
as it appears to work for your example?
Edit:
@Horizontally-scrollable div
: From the top of my head, I'd go about something along the lines of the following css (NOTE: I have not tested this, and it is only supposed to give you a rough idea)
#myContentWrapper {
position: absolute; /* here, fixed or relative may work too*/
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: scroll; /* also, try auto */
}
#myContentWrapper #myContent {
width: 5000px; /* example */
}
With this, if you nest a div
tag with id="#myContent"
within id="$myContentWrapper"
, I believe it may do what you are looking for.
The difference to your approach is, that the nested element is large, and the parent element is absolute
/fixed
/whatever.
精彩评论