Say we have a fixed sidebar, this:
.sidebar {
position: fixed;
top: 0;
left: 0;
min-width: 17em;
height: 100%;
}
When the Safari bottom bar is visible it's ok, but when scrolling down it disappears and the sidebar remains for a while where it was and then jumps to fill the space below. It looks very buggy.
I tried to replace height with each one of the below solutions but none worked:
height: 100vh; // Sidebar is under the bottom bar
height: -webkit-fill-available; // Sidebar doesn't adjust its height
height: var(--window-inner-height); // CSS prop set via JS window.innerHeight. Same above
bottom: 0;
Any idea to solve?
You should use the environment variable safe-area-inset-bottom in your bottom margin or padding.
You can see an example in this video by Jen Simmons (see from 16:44 min)
Related
I have a base panel called BasePanel whose code cannot be changed.
I have a bar which is always a fixed height and this bar is NOT added in the BasePanel, but it is overlapped with the BasePanel .
I also have a panel called Container which is added to the BasePanel. Panel Container should be just under the Bar.
Now I want when the window size is changed, the Panel Container can automatically appear scroll bar, which I have already implemented but has a problem. The problem is when I window gets small the part of the scroll bar will be covered. I would like to know how I can solve this problem?
BasePanel {
width: 100%;
height: 100%;
position:fixed;
font-family: 'Arimo';
}
Bar{
height: 41px;
width: 100%;
z-index: 9998;
position: fixed;
top: 0px;
}
.Container{
width: 100%;
height: 95.570321151%;
top: 4.429678848%;
overflow: auto;
}
If I set container's top as percentage, the up arrow of the scroll bar will be covered by the Bar.
.Container{
width: 100%;
height: 95.570321151%;
top: 41px;
overflow: auto;
}
If I set container's top as 41px, the down arrow of the scroll bar will be covered because there is no enough space for it.
In other words, I would like to know how I can make the Panel Container always start from top 41px and no matter how the window size is changed, the Container won't get overflowed from the BasePanel so that the scroll bar will not be covered(Remember the Bar is not in the BasePanel)?
I figure out how to do it.
Just use calc() function to set the Container Panel height.
Such as calc(100% - 41px)
:)
The title says it all. I have an image with height: 100% inside each of a couple display: inline-block <li> elements. When their container is position: static. All is peachy. But when I change it to position: absolute/fixed, the <li> elements get width of the original image, not the scaled down width even though the image itself has correct dimensions.
This behaves as expected in Chrome, but breaks in Firefox.
Did anyone encounter this behaviour? More importantly, is it possible to fix it without JS?
Background: I am making a responsive position: fixed gallery that fits the screen with image thumbnails covering bottom 20% of the viewport.
Isolated Demo (click the button to toggle position: static/fixed ):
http://jsfiddle.net/TomasReichmann/c93Xk/
Whole gallery
http://jsfiddle.net/TomasReichmann/c93Xk/2/
I finally got it working. It seems that when you declare something with
Position:fixed, left: 0; top: 0; right: 0; bottom: 0;
Only chrome recognizes that as "explicitly defined dimensions". Once I added height: 100%; Other browsers caught up. Fortunately the height 100% didn't break the layout even when the content underneath overflowed viewport.
http://jsfiddle.net/c93Xk/3/
It still breaks uniformily across all browsers when you try to resize the window. I guess, I'll have to calculate the widths by hand with JS
DEMO
Check the demo, is that what you are looking for?
I have added these 2 lines of css to make it work like that:
/* Keep Position fixed at bottom */
#gallery:not(.toggle) { width: 100%; bottom: 0; top: auto; height: 20%; background: transparent; }
#gallery:not(.toggle) .gallery-thumbs{ height: 100%; }
I have this layout:
Code here: http://m6000225.ferozo.com/test/
I need the blue and brown image to lay below the main content div, and both be aligned regardless of the window width, both centered horizontally.
I implemented a css tip I read on this site, which is having a div with absolute position and left: 50% and an img inside with relative position and left: -50%.
It works fine, except for the fact that it pushes the page width to the right, as you can see in the screenshot, the scrollbar can be seen.
3rd party lib solutions like jQuery are welcome, but I'd prefer plain CSS.
PS: I also need something similar below the footer, but I guess using the same solution with a negative bottom value should work, right?
PS2: Extending the blue-brown strip to both borders of the window is no problem as I already used another div with absolute position and background-repeat: repeat-x.
The scroll bar is appearing because of the left: 50%; on the class .header-image. You should drop that altogether. Since that tag has a width set, when you push it over 50% it falls outside the window forcing the scroll bar to appear.
After you drop the left call, you should then set the width of that div to the width of the window, not a specific value in pixels. Use Width: 100%. So, that tag should look like:
.header-image {
height: 245px;
position: absolute;
top: 40px;
width: 100%;
z-index: -1;
}
After that, you'll need to re-center the image contained within the div. To do that, instead of using positions (which rely on set boundaries), give the element auto margins. Use :
.header-image img {
display: block;
margin-left: auto;
margin-right: auto;
}
That will recenter the image. Please let me know if this is what you were looking for!
Per Paulie_D's suggestion:
.header-image {
position:absolute;
z-index: -1;
top: 40px;
width: 100%;
height: 245px;
background-image: url('header.png');
background-position: center;
background-repeat: no-repeat;
}
That did it.
I have an issue on this page when I open it on iPad. Crimson colored top identification header goes to left and then on the right side you can see a blank space. All other major browsers including Safari shows the page as it should be except iPad. Here's the screen shot from iPad view. Any ideas whats wrong with it?
First off, it looks like you have the university logo in the upper left set as both a background image and a regular image within the <a>. Removing the regular image fixes the problem seen in both your iPad screenshot and in my desktop browser where the logo is cut off on the left and "ity" repeats in "University".
I don't have an ipad in front of me, but it's possible that might fix the problem with the right space as well. You might want to consider adding a margin-right to the form in the header so the "Go" button isn't right up against the edge of the window at 1024px resolution.
The content in your #signature div is bigger than your #signature div, so the background isn't stretching to fit the content (you can get the same reaction by shrinking the size of your window and scrolling to the left or right).
Fixes:
Remove left: -5px; from #signature a.iu
Add background: #7D110C to #signature
Change right: 0 on #signature form to right: 5px.
That should straighten things up.
EDIT
Here's what your updated styles should look like.
#identity #signature {
height: 44px;
margin: 0 auto;
position: relative;
text-align: left;
width: 990px;
background: #7D110C;
}
#identity #signature a.iu {
background: url(pw_files/img/iu_crimson.gif) no-repeat 20px 0;
display: block;
height: 44px;
position: relative;
top: 0;
width: 250px;
}
#identity form {
height: 44px;
position: absolute;
right: 5px;
top: 0;
}
I pulled these styles out of screen.css
I'm just trying to put a background image on a webpage with 100% width so it scales to fit the viewport this works fine by having an image immediately after the body tag using the following styling:
img#background {
min-width: 800px;
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
This works fine, the only issue being that I want the image to cut off at bottom if the height of the content is less than the height of the image in the same way a background image would. So if the page content is only 400px high then the background image should only be 400px (even if when scaled the full height should be more than this). I'm not sure how to do this using pure CSS (without javascript) so would be very grateful if someone could point me in the right direction?
Try putting a <div> around with the following CSS attributes:
overflow: hidden;
left: 0;
top: 0;
position: absolute;
z-index: -9999;
You can put it in your content and set the content to overflow: hidden.