Position: Fixed No Scroll Bars Appearing
I Have a Which Is Positioned with Position: Fixed. When the Window Is Too Small Horizontally to Fit the Div, No Scroll Bars Appear, the Right Hand Side of the...
I have a <div> which is positioned with position:fixed. When the window is too small horizontally to fit the div, 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.
1 Answer
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.
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
