I am trying to make my web app take the full height of device.
I am using the 100vh on the body tag to do so, but Safari tab on iOS populates some height by itself so the user is having to scroll down to see the whole page. Is there any workaround?
Thanks.
Most browsers come with a default margin on the body element. It's usually 8px.
body { margin: 8px; }
This will often launch a vertical scrollbar when the body element is set to 100% height. To remove the overflow, simply override the default with:
body { margin: 0; }
Related
I'm making a website DEMO using Bootstrap Framework and AOS - Animate on scroll library.
In desktop I had to change some animations because they increased the width the page, with a horizontal scrolling.
For the mobile I have the same issues, but now I don't understand if the problem is caused from the animations or something else, I see the navbar larger.
Here is the link: https://doc.digitalsolutioner.com/
I've tried to fix wider elements like the navbar, but the issue remains.
I have seen in other issues similar about rows without containers, but it's not the case.
I want to have the right width on the mobile, with no horizontal scrolling.
the culprit is the following class inside the footer... to check: go to the bottom of the page; do inspect element; remove this property (in browser developer tools) to see how it is causing the horizontal scroll to appear
[data-aos^=fade][data-aos^=fade].aos-animate
{ transform: translateZ(0); }
simplest way to solve this will be to hide overflow-x property against your body. This css will be the simplest way to get the fade effect without seeing the scroll at the bottom:
body {
overflow-x: hidden;
}
Update:
on mobiles and mobile emulators, a horizontal bar appears... this was due to margins on the card-service class, just remove the margin-left and margin-right properties in the media-query (as shown below) to resolve this.
#media (max-width: 576px){
.card-service {
/* margin-left: 15px; */
/* margin-right: 15px; */
margin-bottom: 25px !important;
}
}
In AOS there is problem, when you cant set initial position of your element, Its set to the default position.
Like in fade-left default position is right: 0 so whenever you call fade-left its start from 0 and its create screen overflow.
So there is two option here,
Don't use fade-left
Set initial value of the element
I'm having a problem with a fixed position element in mobile Chrome. A little gap between the fixed top element and top of the viewport appears when I swipe up and down without reloading the page.
To replicate this bug the easiest way is to try the bootstrap example https://getbootstrap.com/examples/navbar-fixed-top/ in mobile Chrome. Swipe up and down without reloading page and after few tries you should see a gap.
The most common answer on Chrome rendering issue. Fixed position anchor with UL in body does not work for me:
#element {
-webkit-transform: translateZ(0);
}
Check if your body and html do not have any margin or padding. Also inspect to check if any of the div have any negative margin or paddings
body, html { margin: 0; padding: 0 };
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0px;
padding: 0px;
...
}
Try setting margin-top and padding-top to 0px for the fixed element and the body and html tags
You have margins set on your div#navbar ul.nav.navbar-nav --- set your margin to 0.
see if setting your margin and padding are set to auto, in this case, the margin should automatically adjust accordingly.
body, HTML
{
margin:auto;
padding:auto;
}
How can I make the height of a div tag auto resize according to the height of the browser?
When I do height: 100%, it only resizes based on how much text is in there.
Here is the web page and it's the first div, the one with the blue background is the one that I am trying to make the height auto resize:
http://rachelchaikof.com/awareness/
Actually you must be missing to set an height: 100%; for parent elements, also make sure you use this to make your div height 100%
html, body {
height: 100%;
width: 100%;
}
100% height - resize window problem
"height:100%" means 100% of the browser window. If the page beyonds the browser window (ie. needs scrolling to access) those bits of the page are outside the elements set to height:100%. Which if you have backgrounds or other effects (e.g. borders) won't extend beyond the first 100%.
The correct way to handle things is
selector {min-height: 100%;} /* for proper browsers */
* html selector {height: 100%;} /* for IE */
If you use min-height in this way, you must ensure all the antecedent elements have a fixed height of 100% (ie. html & body).
or you can use Jquery.
$(window).resize(function() {
$('body').prepend('<div>' + $(window).width() + '</div>');
});
height:100% means the same height as the parent, that is, the element your div sits in. So if you want to make it the same height as the browser, you'll need to make all its ancestors 100% high, all the way up to html!
When is comes to responsive design there are many creative ways to approach the issue at hand.
You could try using percentages to make your Design more responsive. Using percentages is a safe bet for maximizing on the users viewport.
eg.
html, body {
height: 100%;
width: 100%;
}
From there you can play with your site containers and go more specific.
Also some JavaScript in your head section of the HTML can help you detect screen sizes and adjust different CSS rules accordingly:
<!-- hide script from old browsers
//<![CDATA[
var windowWidth=screen.availWidth;
var windowHeight=screen.availHeight
function sniffer() {
var el=document.getElementById("body");
if(screen.width<=600) {
el.style.width='100%';
el.style.height= windowHeight;
el.style.margin="auto";
}
}
onload=sniffer;
//]]>
// end hiding script from old browsers -->
The JavaScript above is checking if the user's screen is smaller or equal to 600px; if so, it adjusts the width, height, margin rules for the body element.
Hope this helps!
I am designing a web page which only contain a image (Images are going to change with time). Dimensions of the images are not fixed. So I planned to show images in both vertically and horizontally center. For horizontal center I use margin:0 auto; and for vertical center i use line-height and vertical-align as explained in may SO answers. To constrain images which have bigger dimensions then the windows i used max-height, max-width property with the image tag.
To see: fiddle {to see what happening replace the image with any image of greater dimension the browser window. for small images everything works just fine.}
I am also sharing snapshots:
With small image:
With big image:(I hope you can see the little scroll bar in the right)
I am using Google Chrome (20.0.1132.17)
I think you need:
html, #container /* whatever your container is*/ {
overflow: none;
}
EDIT:
You'll have to post a live page with the content you mean. JSFiddle is not enough for this question.
You can set max-height: 100%, but then you also have to set
html, body {
height: 100%;
margin: 0;
padding: 0;
}
i have a div on a web page that basically acts as a panel container. i want it to:
have a minimum width of 1000px; So no matter how small the content inside the div is, it will at least keep the panel to 1000px in width:
in terms of max width, it should keep going as big as the content within it. So if a person has a 24 inch monitor and they want to maximize the browser it should keep growing until the content inside doesn't have any scroll bars and then stop.
needs to work in all browsers.
how would i do this in css?
Assuming this item is a block element (i.e. "display: block"), it should scale automatically as wide as its containing element (in this case the browser window).
In CSS, just specify "min-width: 1000px." This will work in IE8+ and all modern browsers.
try this
#panel {
min-width: 1000px;
diplay: block;
overflow: hidden; }
Try this:
#panel
{
/* Other styles */
min-width:1000px;
/*width:100%; - removed as it will create horizontal scrollbar if margin and padding aren't 0 as per Josh's comment.*/
}
However, you will problems with older browsers like IE6 which do not like the min-width thingy in which case you will need to use JavaScript.