I have centered the contents of my page by wrapping the page contents in a wrapper div and then putting this in the stylesheet:
#wrapper {
width: 960px;
margin-left: auto;
margin-right: auto;
}
The issue is: Whenever the content increases and the vertical scrollbar appears, it displaces the content because the size of the viewport has changed. How can we make sure that the position of the centered content doesn't change regardless of the scrollbar visibility?
Because your content is positioned relative to the size of the window (margin-left: auto; margin-right: auto) when the width of the page changes (when the scroll bar appears) the position of your content changes as well.
In order to fix this you could specify an absolute position for your content on the page using this: postion:absolute
Another option is to use the overflow-y property in order to specify whether or not to clip the content that overflows onto the elements content.
html {overflow-y:scroll;}
Related
I have a div in display: flex which contains another div with some text content and a ul. The items are aligned vertically with align-items: center. When i hover an item in the list, the content changes and every text has a different size.
But here it is, everything looks fine when all the container is visible on the page but if I scroll down until the top of the container is out of the viewport then the container starts to expand or reduce. It can be seen when it switches to a content with more or less lines than the previous one.
I made this GIF for a better understanding of the problem : https://gifyu.com/image/STtIP
And I recreated the bug here : https://codepen.io/lorenzofg/pen/JjLxJBj
I could fix the height of the content div but I would like to avoid that and keep a dynamic height to properly center the text.
Does someone know what's going on or can tell me if what i wanna do is possible or not?
replace height: 100%; with min-height:100vh; in the container class.
remove width or replace width: 20%; with width: 50%; in the content class.
How to add scroll to a block element?
I've used overflow-y: scroll, but it immediately creates a scrollbar. I want scrolling after my div has reached a specific height.
You should use overflow-y: auto to get scroll after fulfilling the height of an element.
auto Depends on the user agent. If content fits inside the padding box, it looks the same as visible, but still establishes a new block-formatting context. Desktop browsers provide scrollbars if content overflows. - MDN
Whereas scroll Content is clipped if necessary to fit vertically in the padding box. Browsers display scrollbars whether or not any content is actually clipped. (This prevents scrollbars from appearing or disappearing when the content changes.) Printers may still print overflowing content. - MDN
First you have to give a proper height and width of your content area where you have to overflow.
You have a <div> which has more content than your area than you can use overflow tag with scroll.....
width: #;
height: #;
overflow: scroll;
I have decided to add a sidebar to the left side of all my pages in my website. The sidebar can either be concealed or visible, I do not want it to overlap the existing page.
If I were to have a sidebar as such, the content of the page tends to overflow with the container. I need the content to change according to its container width rather than the browser width.
I do not want to create a container for the content and set overflow-y to auto and make it stretch to browser height as I would need to do this for all my pages...
I have already tried changing the left margin on the body and adding a div with position: fixed as a sidebar.
How would I go about changing the content according to its container width rather than the browser width?
Try something like the approach below:
#content {
width: 80%; /* Adjust as need */
position: relative;
}
#content .children {
max-width: 100%; /* Or less, to keep the children from overflowing */
}
Note: I used imaginary ID and Class
I display 2 graphics either side of my page content. When the browser/page width narrows these items are cropped off the screen to allow more room for the content. This is mainly
.page {
height: 100%;
min-height: 100%;
overflow-x: hidden;
overflow-y: auto;
min-width: 960px;
}
That all works fine but I have a min-width set on the .page div which wraps around all the content and is the next element after the opening body tag. I've just realised that when the browser width goes below the min-width the vertical scroll bar disappears from the side of the page.
Here's a CodePen of the issue: https://codepen.io/moy/pen/oemBEN
Presumably that is because the body is now in view but the .page element remains at it's set min-width ...makes sense.
However, the reason I set the overflow on the .page element in the first place is because of an issue I was having when it was set on the body. An issue I thought I'd resolved by applying the code this way.
If I move the following code to the body:
overflow-x: hidden;
overflow-y: auto;
All appears to work as I'd like it to. The items either side of the content area are cropped and the vertical scroll bar remains in view when the content is long enough in Chrome + FireFox on Mac. If I check the page in Safari (Mac) or IE on Windows the side items are't cropped correctly.
If you scale the browser down and then click on the background and drag right you can reveal the cropped area of the page and it looks messy!
Is there a way around this? Or will I need to make do with the vertical scroll bar hiding?
You can use the flex layout for this:
https://codepen.io/anon/pen/EvrXmG
The .container element starts the flex layout.
The .img elements have a width and flex-basis set to it and are not allowed to grow but to shrink, resulting in a "max-width".
The .wrap elements have a width and flex-basis set to it and is not allowed to shrink but to grow, resulting in a "min-width".
If the page gets bigger the .img elements stay at the max size but the content acquires all free space.
if the page gets smaller, the content stays at its minimal width ant the image elements start to disappear.
This solution is probably not safe for old browsers but one of the easiest solutions for modern browsers Browser compatibility.
My situation is that I have fixed position div with percented height at the bottom of page that is on top of it(see picture). The issue is that when I scroll page to the end, some of its content is hidden beneath this div. I think I should add empty element at the bottom of page, but what is the best way to do it?
A nice solution could be to change the height of the fixed div to be expressed in vh not in % (see), for example:
div.fixed-at-bottom { height: 20vh; .... }
and then set a margin-bottom to your contents div with the same value (or a little more to get more space):
div.content { margin-bottom: 22vh; .... }
I created a jsfiddle to present that.