I have the following code which just draws a yellow box 80vh from the top of a container:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--t: 1s;
}
body {
padding:0;
margin:0;
}
.contain {
position:relative;
height:400vh;
background:blue;
}
.box {
position:absolute;
top:80vh;
height:400px;
width:50vw;
left:0;
background:yellow;
transition: position 0s linear var(--t),
background var(--t) ease 0s,
top var(--t) ease 0s,
height var(--t) ease 0s,
width var(--t) ease 0s;
}
input {
display:none;
}
input:checked ~ .contain .box {
position:fixed;
background: pink;
top:0;
height:100vh;
width:100vw;
}
</style>
</head>
<body>
<input id="checkbox" type="checkbox" />
<div class="contain">
<label class="box" for="checkbox"></label>
</div>
</body>
</html>
I want a CSS only solution where by if I click on the yellow box, it will smoothly grow to fill the whole screen without any abrupt jumping effect. My solution above works if your browser scroll position is at 0px (ie. at the top of the page). But the moment you scroll say 100vh down, clicking on the yellow box causes it to jump downwards a bit before it grows, which I clarify in this 30 second video: https://www.youtube.com/watch?v=2hVNg-OPZ6Q .
Can anyone suggest how I can use CSS and HTML only to achieve a smooth transition for my yellow box to grow and fill the entire screen?
I am afraid what you're trying to achieve is not 100% possible with a css-only solution.
As the other answer stated, the main issue comes from the fact you're going to a fixed position from an absolute one. The thing is that the position property is not animatable, meaning that no matter how many seconds you apply to it in the transition property, it will have no effect.
The closest css-only solution would be to do that :
/* Some code */
input:checked~.contain .box {
background: pink;
top: 0;
height: 100%;
width: 100%;
}
/* Some code */
The box will animate to fill the whole viewport but with a slightly different animation time to fill the whole height. Also the animation will start from the initial yellow box position and not from the bottom of the screen.
If you want to animate exactly how you described it in your post, you will necessarily have to use some javascript.
Reason behind the abrupt jumping effect is that in input:checked you have fixed position change it to absolute.
position:absolute;
Fixed position makes the element's position and dimension relative to its containing block that is the contain class whereas in absolute it is relative to initial containing block which is normally viewport: the browser window or the paper’s page box.
I have used CSS zoom property at around 95% to zoom-out of the website (for responsive purposes).
html, body {
-moz-transform: scale(0.95, 0.95);
zoom: 0.95;
zoom: 95%;
}
However, when I use the -moz-transform property for Firefox, the website aligns to the middle so there's a huge gap on top, the more zoomed-out the website gets.
When I do a manual zooming-out using cmd + 'scroll down' on the browser, it zooms out and the website is still aligned to the top.
This is what happens:
This is what I'd like to happen:
I was able to find the answer which is actually dead-simple.
Just need to add this to the body / html css:
-moz-transform-origin: 50% 0;
In case someone may find this helpful.
Something like this?
html {
height:900px;
padding:0;
margin:0;
height:900px;
width:100%;
background: #A2D0D0;
}
#website-container {
width:950px;
height:400px;
position: fixed;
top:0;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
background: #77A7F9;
}
<body>
<div id="website-container">
Main Website
</div>
</body>
Link: https://jsfiddle.net/gez2ozj5/
I need to display an image (and may be some controls near it) at the center (both horizontally and vertically) of the window, while being shrinked to screen height when happens to be bigger (all the images I have are vertical so I don't care about their width).
The underlying content must be hidden with the background.
Code should work in browsers starting from Internet Explorer 8.
I managed to acheive everything but the latter - shrinking to screen height, which I am having problems with.
Here is how I tried to implement it (put in clauses with a resulting code below):
I put everything in a block with fixed positioning and setting 100% to it's width and height - for it to fill the whole window area. Successful.
I use table to center the image vertically, wherefore I set it's height to 100%. Successful.
Inside of the cell I place an image.
3a. When it's height is less then screen size the image is positioned at the center vertically. Successful.
3b. I set max-height to 100% for the image to make it fit into the screen. Unsucsessful! Image pushes the window apart to it's actual height (except of, surprisingly, IE).
Is it possible to solve the task described and what did I do wrong?
(my code:)
view at jsfiddle
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="photoshow">
<table>
<tr>
<td>
<img src="http://s14.postimg.org/e9kwvq2m9/1031_1.jpg">
</td>
</tr>
</table>
</div>
</body>
</html>
CSS:
.photoshow { /* the containing block */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: pink; /* hiding the underlying content */
}
.photoshow table {
height: 100%;
margin-left: auto; margin-right: auto; /* to center horizontally */
}
.photoshow td {
height: 100%;
vertical-align: middle;
background: yellow; /* just for visual indication */
}
.photoshow img {
max-height: 100%;
}
DEMO
.photoshow .big {
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:100%;
max-height:300px;
}
I have been trying for days to center a position:fixed element, a lot of solutions all around the web have been found and yet, either due to inefficiency or my own inexperience, none of them worked.
The scenario is as follows; I want to make an image visor, whenever you click a image a fixed div is made visible, holding said image, this is actually done via JavaScript.
The problem occurs when I want to center the div, no matter which resolution you are using.
#galleryimage{
position:fixed;
z-index:200;
display:none;
max-height: 100%;
max-width: 100%;
}
#galleryimage img{
max-width:100%;
max-height:100%;
}
The images' width and height are unknown variables, I am not experienced enough with JS to handle it, so I wanted to do it with pure CSS. However, I never could get it centered.
Margin just won't work, and the formula with negative margin won't either, as I do not know the width and height variables of these images.
Any solution?
I would use JavaScript + jQuery for this, to make life easier. Here's a good starting point for you:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<style>
#galleryimage{
position:fixed;
z-index:200;
height: 100%;
width: 100%;
opacity: 0;
}
#galleryimage img{
position: absolute;
left: 50%;
top: 50%;
}
</style>
<body>
<div id="galleryimage">
<img src="" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
loadGalleryImage('your_image_name.jpg');
});
function loadGalleryImage(src){
$("#galleryimage img").on('load', function(){
$(this).css({marginTop: -($(this).height()/2), marginLeft: -($(this).width()/2)});
$("#galleryimage").animate({opacity:1}, 200);
$("#galleryimage img").off('load');
});
$("#galleryimage img").attr('src', src);
}
function hideGalleryImage(){
$("#galleryimage").animate({opacity:0}, 200);
}
</script>
</html>
This uses a few techniques. In CSS the image is absolutely positioned and placed at the 50% point for both top and bottom. Then, using jQuery, once we know the image is loaded, we can determine its width and height, and shove it left and up by half those values. That places it directly in the center of the screen. I added some animation stuff in there for prettiness :)
You can use display:table-cell to vertically align something in the middle. You have to get the div to stretch to 100% of your fixed position div though. I have made a quick jsfiddle:
http://jsfiddle.net/fm2GD/2/
Basically you have to have the image in a table cell:
#tableCell{
height: 100%;
width: 100%;
display:table-cell;
text-align:center;
vertical-align:middle;
}
which is in a "table" :
#table{
height: 100%;
width: 100%;
display:table;
}
which covers 100% of your fixed position div.
I have a website here.
Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden.
In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page. As far as I can tell, this whitespace isn't even a part of the html or body tags.
Even if I set the viewport to a specific width in the <head>:
<meta name="viewport" content="width=1100, initial-scale=1">
The site expands to the 1100px but still has the whitespace beyond the 1100.
What am I missing? How do I keep the viewport to 1100 and cut off the overflow?
Creating a site wrapper div inside the <body> and applying the overflow-x:hidden to the wrapper instead of the <body> or <html> fixed the issue.
It appears that browsers that parse the <meta name="viewport"> tag simply ignore overflow attributes on the html and body tags.
Note: You may also need to add position: relative to the wrapper div.
try
html, body {
overflow-x:hidden
}
instead of just
body {
overflow-x:hidden
}
VictorS's comment on the accepted answer deserves to be it's own answer because it's a very elegant solution that does, indeed work. And I'll add a tad to it's usefulness.
Victor notes adding position:fixed works.
body.modal-open {
overflow: hidden;
position: fixed;
}
And indeed it does. However, it also has a slight side-affect of essentially scrolling to the top. position:absolute resolves this but, re-introduces the ability to scroll on mobile.
If you know your viewport (my plugin for adding viewport to the <body>) you can just add a css toggle for the position.
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
I also add this to prevent the underlying page from jumping left/right when showing/hiding modals.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
As #Indigenuity states, this appears to be caused by browsers parsing the <meta name="viewport"> tag.
To solve this problem at the source, try the following:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.
In my tests this prevents the user from zooming out to view the overflowed content, and as a result prevents panning/scrolling to it as well.
This is the simplest solution to solve horisontal scrolling in Safari.
html, body {
position:relative;
overflow-x:hidden;
}
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
works on iOS9
Keep the viewport untouched: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Assuming you would like to achieve the effect of a continuous black bar to the right side: #menubar shouldn't exceed 100%, adjust the border radius such that the right side is squared and adjust the padding so that it extends a little more to the right. Modify the following to your #menubar:
border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/
Adjusting the padding to 10px of course leaves the left menu to the edge of the bar, you can put the remaining 40px to each of the li, 20px on each side left and right:
.menuitem {
display: block;
padding: 0px 20px;
}
When you resize the browser smaller, you would find still the white background: place your background texture instead from your div to body. Or alternatively, adjust the navigation menu width from 100% to lower value using media queries. There are a lot of adjustments to be made to your code to create a proper layout, I'm not sure what you intend to do but the above code will somehow fix your overflowing bar.
Creating a site wrapper div inside the body and applying the overflow->x:hidden to the wrapper INSTEAD of the body or html fixed the issue.
This worked for me after also adding position: relative to the wrapper.
No previous single solution worked for me, I had to mix them and got the issue fixed also on older devices (iphone 3).
First, I had to wrap the html content into an outer div:
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
Then I had to apply overflow hidden to the wrapper, because overflow-x was not working:
#wrapper {
overflow: hidden;
}
and this fixed the issue.
Adding a wrapper <div> around the entirety of your content will indeed work. While semantically "icky", I added an div with a class of overflowWrap right inside the body tag and then set set my CSS like this:
html, body, .overflowWrap {
overflow-x: hidden;
}
Might be overkill now, but works like a charm!
I encountered the same problem with Android devices but not iOS devices. Managed to resolve by specifying position:relative in the outer div of the absolutely positioned elements (with overflow:hidden for outer div)
I solved the issue by using overflow-x:hidden; as follows
#media screen and (max-width: 441px){
#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
overflow-x: hidden;
}
}
structure is as follows
1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.
'end_screen is the wrapper of end_screen_1 and end_screen_2 div's
As subarachnid said overflow-x hidden for both body and html worked
Here's working example
**HTML**
<div class="contener">
<div class="menu">
das
</div>
<div class="hover">
<div class="img1">
First Strip
</div>
<div class="img2">
Second Strip
</div>
</div>
</div>
<div class="baner">
dsa
</div>
**CSS**
body, html{
overflow-x:hidden;
}
body{
margin:0;
}
.contener{
width:100vw;
}
.baner{
background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
width:100vw;
height:400px;
margin-left:0;
left:0;
}
.contener{
height:100px;
}
.menu{
display:flex;
background-color:teal;
height:100%;
justify-content:flex-end;
align:content:bottom;
}
.img1{
width:150px;
height:25px;
transform:rotate(45deg);
background-color:red;
position:absolute;
top:40px;
right:-50px;
line-height:25px;
padding:0 20px;
cursor:pointer;
color:white;
text-align:center;
transition:all 0.4s;
}
.img2{
width:190px;
text-align:center;
transform:rotate(45deg);
background-color:#333;
position:absolute;
height:25px;
line-height:25px;
top:55px;
right:-50px;
padding:0 20px;
cursor:pointer;
color:white;
transition:all 0.4s;
}
.hover{
overflow:hidden;
}
.hover:hover .img1{
background-color:#333;
transition:all 0.4s;
}
.hover:hover .img2{
background-color:blue;
transition:all 0.4s;
}
Link
easiest way to solve this , add
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
I had tried many ways from replies in this topic, mostly works but got some side-effect like if I use overflow-x on body,html it might slow/freeze the page when users scroll down on mobile.
use position: fixed on wrapper/div inside the body is good too, but when I have a menu and use Javascript click animated scroll to some section, It's not working.
So, I decided to use touch-action: pan-y pinch-zoom on wrapper/div inside the body. Problem solved.
I've just been working on this for a few hours, trying various combinations of things from this and other pages. The thing that worked for me in the end was to make a site wrapper div, as suggested in the accepted answer, but to set both overflows to hidden instead of just the x overflow. If I leave overflow-y at scroll, I end up with a page that only scrolls vertically by a few pixels and then stops.
#all-wrapper {
overflow: hidden;
}
Just this was enough, without setting anything on the body or html elements.
Setting overflow-x to 'clip' instead of 'hidden' also prevents unwanted scrolling on touch-devices, with wacom-pens, with shift-scrollwheel or any other programmatic scrolling. On the downside, it also prevents programmatic scrolling with javascript.
https://developer.mozilla.org/en-US/docs/Web/CSS/overflow#clip
The only way to fix this issue for my bootstrap modal (containing a form) was to add the following code to my CSS:
.modal {
-webkit-overflow-scrolling: auto!important;
}
step 1: set position to fixed to the element that goes out from the viewport. In my case it is:
.nav-links {
position:fixed;
right:0px;
background-color:rgba(0,0,0, 0.8);
height:85vh;
top:8vh;
display:flex;
flex-direction:column;
align-items: center;
width:40%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
Step2: add a css property to body and html as:
body, html{
overflow-x: hidden;
}
I didn't add any wrapper. Only these two steps worked for me. The project I am working on is an angular project.
The following works
body,
.innerbodywrapper{
overflow-x: hidden;
position: fixed;
width: 100%;
height: 100vh;
}
Solution that properly work for mobile device with flex positionning top :
html,body {
width: 100%;
margin: 0;
padding: 0;
}
and in web page :
<meta name="viewport" content="width=device-width, user-scalable=0">
Don't forget to positioning this css in the different webpage main divs :
height : auto !important;
html, body{ overflow-x: hidden; position: relative; } Just try like this where you have added the overflow-hidden.