How can I make a div overflow, but rather than create a scroll bar, make the entire webpage larger so as to avoid scrolling?
To avoid scrolling:
overflow: hidden;
To make entire webpage larger:
min-height: <!-- set larger height -->
Hope it helps!
Related
I have a menu that collapses under a certain width.
The menu has a fixed position and I want that it covers thw whole page height and width. So I set the width and height to 100vw and 100vh.
My problem is that the content under that fixed div is scrollable. There is a way to make those div not scrollable?
This is a sample. As you can see when the mobile menu shows up it covers the whole height and it seems that content disappears
https://www.milanbergamoairport.it/en/
I can make a codepen if it is neeeded
Thanks!
Didn't really get the full picture of your problem but adding overflow-x: hidden; overflow-x: hidden ; hides the scroll
I'm not too sure what you mean... Maybe overflow-y: hidden; is what you're searching for... if not, please provide a codepen example
I want to have a set width for my page with no horizontal scroll bar. (And if my elements exceed the page width, they don't add width or a horizontal scroll bar to the page.)
Probably not the best user experience, but this is what you need to add to your CSS:
body {
overflow-x:hidden;
}
I have a fixed div in my page, as you know if the height of the div is higher than the viewport of the browser you end up with a div you cant scroll since is the background that scroll and not the div (fixed to position).
So lets say:
<div class="fixed">
</div>
.fixed {
position: fixed;
border: 1px solid #000;
width: 200px;
background-color: green;
}
You can check here http://jsfiddle.net/n7b43s8a/1/ if you reduce the preview page height you see you cant scroll the div.
The bootstrap modal fix this issue, but I dont quite understand how they do it, seems the take away the scroll of the body and add a new spacer background div but is not clear.
Here's an example http://jsfiddle.net/RLQhh/750/
You see, even with a very small height you can scroll the div.
How they do it?
The key is overflow. Add overflow: hidden to body, and overflow: auto to your .fixed.
Of course, this assumes that your fixed container is somehow limited in height, as it will by default stretch to its contents height.
See http://jsfiddle.net/456vashr/ for an example
In the Bootstrap example; they used position:relative for their fixed div. You need to change your position:fixed to position:relative.
I am trying to create a navigation element (nav) that spans the full width of the page, but when the windows shrinks enough where the text overflows, the text wraps. As this is the navigation bar for the page, I'd prefer it didn't wrap and the page just scrolls when the nav's content overflows it. I was thinking giving it a width in pixels instead of just 100% would work, but I don't know how to make it the full width on every screen using pixels. Any idea how to do this? I am using SASS too if that could help with a solution.
Basically, I need a solution that makes a element act as though its width were set to 100%, but it can't wrap the text if there's overflow. The window should scroll if there's overflow.
Put in the css style white-space:nowrap;
If you want a scroll bar in the div, go for overflow:scroll; and set a height of one line, and don't use nowrap.
Full width should be easy: width: 100%
If you want specifics, show us your code.
I think your best bet would be to set a minimum width on your nav element. This way, it will only scale your div to a certain point so it doesn't wrap. The only downside of this is that you need to specify a width, but the upside is it works without any of the div being cut off.
http://jsfiddle.net/piedoom/Km4Xa/1/
You can see in my CSS I have the following:
div
{
width: 100%;
background: red;
min-width: 250px;
}
The min width specifies how small the div can get before it just stays at that value instead of taking the window as it's width.
You can also apply this to the body so it works on all elements.
I found how to fix div position using jQuery.
Here is an example.
Can I achieve same effect using css?
UPD: I have seen this solution. I want also horizontal window scrollbar to appear, if fixed element does not fit the window.
You can achieve the same effect without the cool whizz-bangs and animations with position: fixed. The fixed element will then just scroll along.
As for horizontal scrollbar when content doesn't fit the window, just define width: 100% and overflow-x: scroll for the fixed element .