I tried to understand how css env works but I cannot... I have problem with my sidebar and chrome search bar that hides after page scrolls down a bit. Otherwise using 100vh for my sidebar with scroll, some content stays hidden under the page so user needs to scroll page to scroll sidebar to the bottom of it.
I tried using these but I do not understand them either way:
height: env(safe-area-inset-top, calc(100vh - 56px));
And as I found somewhere, 56 is for phone size, but where is tablet size bar etc?
Is there actual solution for this? Without using media for displays and setting different heights?
Related
I've noticed on sites like The New Yorker that when on mobile if you scroll to the very top and continue to scroll upwards the navbar stays firmly attached to the top of the window. On my site, the navbar stays connected to the rest of the content when I scroll up and continue past the body of the page. How would I go about emulating what The New Yorker does. I have looked at their page's css but can't seem to tell what gives that functionality. Any help would be appreciated.
setting the position:fixed and top:0 to the navbar should work, although after that you will have to determine the height occupied by the navbar and give your body content padding set to that height to have a neat display. Please check this link : Why the paragraph is hidden behind navbar however navbar comes first in html source?
I am trying to create a layout that has a fixed header that always shows at the top. Additionally a side bar that will have a scroll bar next to it if the content goes past the browser height. Same with the content to the right of the side-bar, I would like it to have its own scroll bar that does not go past the browser height.
Please see this site for an example of what I am looking for. It has all 3 features.
I have tried so many things. Without the fixed header I can get it working by simply making everything height: 100%. But with the fixed header something is going on where the sidebar and content pane scroll bars go way below the browser view.
I feel like I am getting somewhere when I add padding-bottom: 64px; to the items I want to have the scroll bar. The 64px is the height of the header.
Please go through the documentation and tutorial of Bootstrap and you will be able to do it.
For reference go through this JSFiddle: https://jsfiddle.net/jxo6pmju/12/
link = https://jsfiddle.net/jxo6pmju/12/
For scrollbar go through this : https://jsfiddle.net/vrzjLc77/1/
link = https://jsfiddle.net/vrzjLc77/1/
I have website that works well if opened in desktops and android device, but when I open in iOS devices such as Iphone and Ipad, the background did not fixed like on other devices, it will expand the background and create blank space on the right side of the page, and I used user-scalable=no to make user cant scrolling to the blank space, but still not works. Actually, I already use overflow-x: hidden; but my navbar didnt work like usual, the href didnt go to the target id. For example, news</li> it should go to the div id news, but it go randomly. So, what I should I use to prevent user to scroll in iOS?
this is the example of the blank space in iOS:
iOS safari has it's own set of issues. It generally tends to ignore all overflow: hidden you give on body and html. The only solution that i found till now was to either make you body exactly the size of your viewport and scroll the content within, or just make the position of the body fixed, in case your background is scrolling when you have a floating content on top that you want to scroll.
On iOS, as you scroll on Google's I/O Event page, the height of Safari's address bar does not get reduced. However, if you scroll on ANY other website, Safari's address bar shrinks.
How is this achievable? I've been trying to look through their CSS code. I think they're using Polymer for their site.
Scrolled to the bottom of the page in both screenshots, see the height difference in Safari's address bar.
I don't have an iphone at hand to test it but I think this is because they have
<core-draw-panel> set to overflow: hidden;
and child element
<div main> set to overflow-y: scroll;
I think this prevents url bar hiding on scroll.
When I open "inspect element" in right side of page it begins to small down, and whole style is out...
How can I stop it? Make it to become scrollable?
I tried adding to css:
html{
overflow: scroll;
}
But it didn't work...
You got any ideas?
You'll typically get a scroll bar when elements are fixed in size. Meaning they have a fixed width. Set your elements to a pixel value instead of percentages. Stackoverflow for example stays in place when i open the chrome inspector.
Note that this is very counter intuitive to that of responsive design. Your site should change size, and adapt to that of the screen.