I have a menu in a div on the side of the browser and I would like to keep it in the fixed position. However, the menu may exceed height of some screens and that would result inaccessible links. So I would like to make the menu scrollable in such a case. Unfortunately the combination
position: fixed;
overflow: auto; (or scroll)
doesn't really work. I.e. the scrollbar is faded out (immovable). Is there a way?
Thanks in advance
EDIT
The menu is similar to the one to the right up on this page. Only a bit larger. If you open that page and decrease the height of your browser window, part of the menu remains inaccessible. That's what I want to avoid.
And no, my solution doesn't work in IE, Chrome, Opera or Firefox.
Add these to your declarations:
top: 0;
bottom: 0; /* or height: 100%; */
You can replace the zeroes with larger values to add margins.
Related
I have what seems to be a simple issue with a website on iOS (testing on my up to date iPhone 13), but I just can't seem to find a fix that works. Starting to pull my hair out as it seems to be a bug rather than an actual issue with how I'm laying out the page.
The website has a very simple header that is fixed in position, which contains an absolutely positioned menu button on the right hand side. (Edit: just to clarify that the button triggers javascript to open a full height menu div that covers the left side of the window. All this part of the functionality works correctly, it's just that tapping on the button to open this navigation box does nothing until I scroll down)
On desktop using Chrome dev tools everything works fine at all browser sizes.
However, on iOS when loading the page the button is not clickable. If I scroll down slightly suddenly I can use it. Scroll back to the top and I can't use it anymore. This happens even if I remove all other content from the header leaving nothing but the menu button. I've tried everything I can think of but just can't get this button to work when the page hasn't been scrolled.
It seems like an issue of something covering the button, but there is nothing. Even with the header otherwise completely empty I get the same issue, and the content clearly can't be covering it as it visibly scrolls behind the header.
This is the css/html which I believe to be relevant: (#page contains the rest of the document and is padded to clear the fixed header. I have also tried removing the padding and using an extra div to push the content down as well just in case padding on a top level element was messing with things). ui-container is used to limit the width on large screens and simply has width:100% on smaller devices.
#top {
position: fixed;
width: 100%;
z-index: 10;
}
#header {
background-color: #fff;
padding: 20px 0;
}
#mobile-nav-btn {
display: block;
position: absolute;
top: 24px;
right: 20px;
font-size: 22px;
cursor: pointer;
}
#page {
padding-top: 113px;
}
<body>
<div id="top">
<header>
<div class="ui-container">
<a id="mobile-nav-btn"><i class="fas fa-bars"></i></a>
</div>
</header>
</div>
<div id="page">
... content ...
</div>
</body>
Please use:
<button onclick=“window.scrollTo(0, 500)”></button>
Well it looks like it was the menu itself causing the problem as it was hidden using opacity and moved to top: -100% to get it out of the way. Seems that iOS messes around with the document height and this causes problems in some instances.
This may be specific to devices that have a rounded display, or may also affect all iOS devices as I know that the fact the address bar & navigation buttons auto shrink/hide on scroll can also play havoc with positioning.
I want a div to stick to both top and bottom while being responsive on all sides.
I have a view consisting of 4 divs and 3 of them works well in responsive layout but in one I have a chat window (bottom/left) that doesn't have a very good height response.
Below you can see the 4 divs in full view and it's looking the way that I want it to look:
But once I start, either moving the side of the inspector to the left or look on a mobile device, the chat window reveals it has a solid height and leaves empty space below it (it sticks nicely to the top at least):
I can't seem to get around this problem (stuck for a week now); if I change the current viewport height (vh) to more it will only disappear underneath the screen and if I use % nothing happens. Here is a piece of the actual chat css:
#chatlioWidgetPlaceholder{
position: absolute;
z-index: 10000;
top: 0;
left: 0;
height: 100%;
width: 100%;
padding: 5px;
font-family: input;
}
...but once again, vh or % doesn't work out on this one either. Does anyone understand my problem?
I believe it could be something with the height of the top parent div because it doesn't stretch to the bottom (blue marked) and therefore can't grow:
I placed the HTML and CSS in https://jsfiddle.net/3chdp873/2/
I stripped the syntax from other divs for easier readability but if needed, just let me know :)
I want to create a page with vertically centered content (I'm using this method). I need to use two different page backgrounds. One is assigned to html tag and the other one to the body tag (it doesn't matter if I'll create div's instead). The first one is a background picture (full width & height of the view port, fixed, no-repeat) and the other one is just a pattern, intended to overlay the picture (repeat). I tried to use CSS3's multiple backgrounds for this case, but it didn't worked as I intended.
The problem is that when the content exceeds the view port, the body's background covers only the height of the view port. The solution for this is quite simple:
body { min-height: 100%; }
But it comes with a serious drawback. If I set the min-height value while the content doesn't exceed the view port, it won't be vertically centered.
I created a fiddle to help you better understand my problem. Don't mind the JavaScript as it does not play any role in this case. I used 1x1 px background images as an example.
Try to toggle the content's height while the body's height is set to 100% and scroll down. You will see what I'm talking about. You can fix that by toggling the body's height, but as soon as you toggle the content's height back to auto it won't be centered vertically any more.
I want the body's background to cover the full page height and have the content positioned in the middle no matter if the content fits in the view port or not. I've tried to achieve that for several hours and I failed, so maybe some of you know something that I don't and could help me with that.
Here is what I came up with:JSFiddle
I avoided your problem by making the .block div the size of your screen by fixed positioning. After this I used the .block div to scroll the elements inside. Hope this solves your problem ;).
.block {/*made .block fullscreen size so you cannot scroll the page anymore, but scroll this div instead*/
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
overflow-y: auto;
If you don not need < IE9 support, you can use transforms to do that.
http://jsfiddle.net/0tgvrw3k/1/
Basically you don't need the .block and make the vertical alignment using top, left, and transform. You need position: fixed;, as position: absolute; will make the viewport scroll.
Please do not forget to prefix the transform with -webkit-, -moz-, -ms- and -o-
this is the most stupid question here on stackoverflow...
My client would like to have always visibile sidebar in all pages of his website..
Some pages have scrolling, other no, so he see logo and element jump position from one page to another of the scrollbar width ...
so... there is a way to "lock" the scrollbar space, so the he don't see "jump" form one page to another?
thank you
html {
overflow-y: scroll;
}
forces the scrollbar to be shown always
use fixed position:
#sidebar {
position: fixed;
top: 10px;
left: 10px;
}
With the above, the container div will always stay 10 pixels from the top and left of the browser window. So when the page scrolls, it will not move.
I'd like to create a that extends from wherever it starts to the bottom of the page, but does not extend beyond the bottom of the page. It has overflow-y: auto, so that if the div content is too long, a scroll-bar will appear (for that only, not for the whole page).
I tried height:100%, but that makes the height equal the page height... so if the doesn't start at the very top of the page, it ends up being too tall.
(Example: window height is 100px; stuff at the top of the page take 20px; I want the to be 80px high. But I want it to be automatically resized to 70px if the window is resized to 90px.)
Can this be done without JS? If not, how do I use JS to do that? (Using FF 3.x, but a cross-browser solution is of course preferred.)
Sounds like you want something along the lines of the following:
#myContainer {
position: absolute;
top: 20px;
bottom: 0px;
left: 0px; /* Should include space for a sidebar, if you have one. */
right: 0px; /* Same as above */
}
OK, found the solution -- making the position absolute and setting the bottom to 0 (and top to whatever the top is).
Have you tried setting the body margin's to 0?