I have an absolutely positioned element that I want to extend just outside the main content width. The element is supposed to be a semi transparent watermark that overlaps with the main content area.
The problem is that the page scrolls if the watermark gets cut off. I'd rather it just get cut off if it doesn't fit in the page, and not extend for the sake of the watermark.
Here's a demo:
https://tinker.io/661ec/2
The overflow attribute tells the page what to do when the page is too big to fit. If you apply the option
{overflow: hidden;}
where you want it to show, (ie, in a div or for the entire page, or just on an image), then the page won't scroll. However, you effectively lose the information for the overflow while it remains overflow, so it's a trade-off.
Related
This is the page in question: https://globalstudyuk.com/home-page-test/
You will see that on both desktop and mobile, there is some blank space on the right of the page.
I haven't found any solution in my code based on similar StackOverflow questions.
There should be no horizontal scrollbar, with everything filling the full width of the page.
Place the final .row inside the .container in the footer.
The negative margin on the .row is countered by the padding on the .container class.
Always useful to revisit the Bootstrap docs when things go awry:
https://getbootstrap.com/docs/4.0/layout/grid/
I had the same or very similar problem. Making the window more narrow everything seemed to resize correctly, except a horizontal scrollbar appeared at the bottom. When I scrolled with it, white-space appeared on the right side of the page.
Turns out the reason was that on the top of the page I had an element with width 100%. But under that I had another piece of text inside a PRE -section, with lines that were quite wide, wider than the resized window-width.
When I made the window more narrow the top element resized correctly but the PRE -element no longer fit into the horizontal space available, thus creating the horizontal scrollbar.
When I used that scrollbar the browser (of course) did not resize the content on the top of the page, because I was not resizing the window, only scrolling it horizontally.
Therefore the browser did not readjust the top element after the scroll to take 100% of the new visible width and therefore it could only show whitespace to the right of it as I scrolled.
So if you have this type of problem, check out if there are any DOM-elements below the currently visible ones, and whether they might be the cause of the horizontal scrollbar.
My particular problem was solved by making the PRE-section defined like this:
<pre style="width:100%; overflow-x: auto; "
> ...
Now when I make the page too narrow for the PRE-content to fit in horizontally, a horizontal scrollbar appears, but now only under the PRE-section. Scrolling it only scrolls (horizontally) the PRE-section, not the whole page. When I scroll vertically to the top of the page I don't see the PRE-section nor the horizontal scrollbar under it.
I'm new here so forgive if anything sound very noobish.
I'm busy making a personal website and have two divs inside a wrapper, a content div and a sidepane div. their height is set on 99% and they overflow on auto. I want the page to not scroll (unless they make the screen smaller) but the divs must scroll.
The Problem: I want to have the bottom text of the divs to fade away so that when you scroll down the div it brings the text to normal. I could use a gradient image or just CSS if someone could lead me in the right direction. I'm struggling with this cause of the overflow. I want to know how one could keep the gradient at an absolute position at the bottom of the div, but now its not really at the bottom of the div if you get what I'm saying? Because the div has overflow on. I want it at the position where the div ends on the screen, but not where the text ends. I tried putting my code in
Here's a pic
If you check the right div, I want the bottom to be faded and as I scroll the gradient stays there at the bottom. (which is not actually the bottom of the div) - also need to be able to resize page and it stays in same position.
The key is background-position: fixed;
I have created a little fiddle for you to see what i mean: Click me
I just hope i understood your problem correctly without any code and just a screenshot ;)
Also for CSS gradients see here
I have a fixed position side tab on my page that contains filtering options for the user. When there are a lot of options, the side tab gets too long and the bottom goes beyond the bottom of the page, where it is impossible to view.
Is there a way to have the whole page continue scrolling to the bottom of the side tab div? I don't want to put scroll bars inside my side tab div, even though that would be an easy fix. I just want, when the bottom of my div butts against the bottom of the page, to bring the whole div up with it so that the bottom content is visible.
I am limited in that I can't use jQuery in this particular application. I can, however, use Dojo.
I have a website built with divs floated to various parts of the pages to create the look I want. My problem is, when I make my browser smaller the floats all cram to the left side instead of holding their positions and simply giving a scroll bar.
All I want is for my pages to hold their form when the browser is not maximized.
I suggest you put a min-width on the div wrapping all your floating divs.
Than all your div will be floating as normally, but when the browser will be smaller you will have a scroll bar.
Yeah the code would really help, but a solution (I think) would be to wrap all your floated divs in a div that has a defined width.
What is the status on overflow-x and overflow-y? Whenever I give overflow a value, and inspect that element, the browsers tend to split this into overflow-x and overflow-y. However, trying to explicitly state this gives nothing.
For example, on my math class page: http:math.davehampson.net the grades tab is very wide, and I want it to scroll within the <div> There is no height declared, so it stretches down, and I get a horizontal scroll bar.
By problem is that I also get an unneeded vertical scroll bar. If I change overflow:scroll to overflow-x:scroll, then nothing happens. The table is displayed in full width, and the entire page scrolls. Which, because the body is black, does not show up.
Is there a way for me to eliminate this inactive vertical scroll bar?
Thanks, Dave
overflow:auto only adds a scroll bar when the content within it exceeds the allocated space.
So if you only need a horizontal scroll, make sure the height of the content is less than the height of the enclosing div, if that makes sense.