Menu
I am working on a website which has two containers: sidebar and the main content. The problem is that when minimizing the window (only) the left sidebar fits the size of the current size of the screen and when scrolling down the sidebar disappears.. This only happens when the content container (on the right) doesn't fill the screen..
You can try and minimize this page you'll see that the left side bar disappears when scrolling down when window is minimized.
You can try a good page with more content, you'll see that all is fine here..
I tried height="100%" and width="100%"
579
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container. This property tells the content to fill the container in a variety of ways; such as "preserve that aspect ratio" or "stretch up and take up as much space as possible".
Using CSS, you can set the background-size property for the image to fit the screen (viewport). The background-size property has a value of cover . It instructs browsers to automatically scale the width and height of a responsive background image to be the same or bigger than the viewport.
position:absolute You can also use position absolute as well as set all the viewport sides (top, right, bottom, left) to 0px will make the div take the full screen.
Using width, max-width and margin: auto; Then, you can set the margins to auto, to horizontally center the element within its container. The element will take up the specified width, and the remaining space will be split equally between the two margins: This <div> element has a width of 500px, and margin set to auto.
OK Figured it out
I had to add:
min-height: 100%;
to the body
and use
bottom: 0;
on the sidebar
Thanks for your help :)
149
The main issue is that the wrapper and sidebar elements in your body are absolutely positioned - therefore the body does not know how to expand to the size of the content of the page itself, as absolutely positioned elements are taken out of the flow of the document. In this case, you have taken all the content of the page out of the document flow.
Therefore, setting a height, or min-height, to the body element will not work, as it will only take on the height of the viewport and nothing else. The children container, being absolutely positioned, will then also take on the height of the viewport.
Scrolling is still possible on the merit that content is overflowing from either one of the absolutely positioned children.
You can try setting height: auto on the sidebar element. Alternatively, you should float your wrapper and sidebar (and take out absolute positioning) - that will at least place the content back into the document flow, allowing the browser to compute the actual 100% height :)
Absolutely positioning is a little bit of a tricky issue, I have to admit.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
