I have a div container which is centered (by margin-left:auto and margin-right:auto) and page design looks fine when loaded...
Below this div there is another hidden one, which shows up on user request.
But when this happens browser scroll shows up and mess up my design because centered div also moves few pixels to the left (so it can again be in the center).
Can this behavior be stopped?
Alternative solution is adding overflow-y:scroll but I found that overflow-y is not supported by all browsers and I can't find by which browsers...
Can somebody post a link where I can see browser support list for css3 functions?
With scroll always being shown, maybe be not good for layout.
Try to limit body width with css3
body {
width: calc(100vw - 34px);
}
vw is width of viewport (see this link for some explanation)
calc calculate in css3
34px stands for double scrollbar width (see this for fixed or this to calculate if you don't trust fixed sizes)
This css will always show vertical scroll on your page.
body {
overflow-y: scroll;
}
By default it's overflow: auto;
Related
Is there a way to prevent scrollbar from pushing content, or the entire page to the left with pure css?
I mean no hacks or anything.
I tried two javascript solutions:
1) Set body to overflow hidden, store the body.offsetWidth in a variable, then overflow visible and then subtract that offsetWidth with the current body.offsetWidth and apply the difference to the right margin.
2) Calculate the offsetWidth and apply it on the wrapper div on every resize.
What didnt work:
1) Position absolute.
2) Floating everything to the left was a bad idea.
3) Leaving the scrollbar visible (Looks bad).
4) Overflow-y hidden makes things user unfriendly.
There are a lot of ways to go around this issue though normally you won't mind a little push to the left:
Give overflow-y: scroll to body and make sure always there is a scrollbar.
Make use of the fact that viewport width includes the scrollbar while percentages do not account for it:
a. Giving width: 100vw to body element, or
b. Giving margin-left: calc(100vw - 100%) to the html element so that scrollbar or not, you have a fixed area to work on.
There is even a deprecated overflow: overlay property that draws over the page instead of shifting it to the left.
Just give your body a width of 100vw like this:
body{
width: 100vw;
}
Even though all the answers above are correct, I stumbled upon this issue and I had to come up with another solution.
Since my content width takes up the whole page and it has some properties to justify in the center, it was being pushed to the left and these options didn't prevent it from happening.
What fixed the problem for me was to add a padding of the size of the scroll when the scroll is added on hover.
I tested on Chrome and Edge. It's not a perfect fix but it is enough for what I need right now.
.scrollable {
width: 100%;
height: 91vh;
overflow: hidden;
padding: 0px !important;
}
.scrollable:hover {
width: 100%;
height: 91vh;
overflow-y: auto;
padding-left: 16.8px !important;
}
Unfortunately there is no other way to prevent your problem.
Just use
body {
overflow:hidden;
}
As an alternative, I recommend you to use a Framework for custom scroll bars. Or disable the scrollbar as shown in the above snippet and emulate it with an absolute positioned and some JS.
Of course you will have to consider calculating the height of the page and the offset of the scrollbar thumb.
I hope that helps.
To disable the horizontal scrollbar, you can use overflow-x, so it won't affect your vertical scroll:
body {
overflow-x: hidden;
}
Just set overflow-x to hidden on the element that has the scrollbar (usually this would be the body or the immediate children of it).
I had the same problem on my nextjs app which already had overflow-x set to hidden on the body. The below solution worked for me
#__next{
overflow-x: hidden;
}
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-
I'm using twitter bootstrap to make my app responsive. When I shrink the width of my browser window to the minimum size or view the page on a mobile device (iPhone, example), the user is able to scroll horizontally. The amount of horizontal scroll is small but I would like to remove it all together.
I believe it's due to the img container that I'm including, but I'm not here. The page's html is located here: http://pastebin.ca/2347946.
Any advice on how to prevent the horizontal scroll for the page while still maintaining the scrolling in the img container?
I had the same problem, and applied this to fix it:
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
To expand a bit, I only had the problem on mobile phones, so this is my final code:
#media screen and (max-width: 667px) {
body {
overflow-x: hidden !important;
}
.container {
max-width: 100% !important;
overflow-x: hidden !important;
}
}
I found the issues regarding this on Github, so I guess newer versions of Bootstrap have been patched.
i am pretty sure somewhere one of your child element is exceeding the width of its parent element. Check you code twice, if there any box-size of inner child elements is large because of one of the reasons like- when the box width including margin, padding, border go beyond the limit. And we possibly haven't added overflow: hidden; to its outer parent element. In this case they are considered reaching beyond their parent element and browsers show it with the scrollbar. So fix it via removing extra margins, paddings, borders or if you just don't want any headache, just try to add overflow:hidden; to the outer box.
The "overflow: hidden;" style is the remedy not the prevention.
If you want to prevent this you have to check your body elements which is larger than the body.
It happens when you take a div with some "padding" or "margin" outside ".container" class (twitter bootstrap).
So remove all padding and margin outside the container class.
It turns out I had zoomed in more than 100% that was causing the page to scroll. Cmd+0 helped bring the zoom to 100% which got rid of the scrolling.
Try to add (in the relevant #-rule) a max-width:
img {
max-width: NNNpx;
}
That'll prevent img from being too wide.
Today I came across a very nasty problem, I need to make the front-end layout for a website and it has a certain design element on the page that puzzled (even) me.
Now I am not exactly unfamiliar with html, css positioning, making layouts etc, so please don't make 'guesses' as to how I could solve it. I want a working example.
Here is a jsfiddle with my code and problem:
http://jsfiddle.net/sg3s/A9vzA/ http://jsfiddle.net/sg3s/A9vzA/15/
What is currently happening;
The #container has a min-height of 100% (red background) width of 970px. This is the width the page must have as a minimum. The #top (lightbrown background) div is irrelevant for the problem but part of the design.
The problem lies in #header (purple background) which currently has a width of 1022px (too wide for 1024px resolution + a scrollbar, even with a maximized window) and a negative left margin to keep it centered on the container, which is what needs to happen. When the width of the screen width falls below 1022px a horizontal scrollbar apears as the thinnest element on the page is 1022px wide. (its behaviour is the same with position absolute and a negative left offset)
What I want to have happening;
I want the 'overflow' of #header over #container to dissapear into the sides and only get a scroll bar as the viewport gets below 970px wide. (If someone can rephrase this )
Let me be a little bit clearer on this:
The 100% height layout needs to stay and be compatible with IE7+
The header needs to be centered over the container, this is the reason it is inside it in my example but be my guest to take it out if that solves the problem.
My example looks and acts correct as long as the viewport is large enough to accomedate the header.
The trick is to make it look and act the same while the sides of header overflow into the sides of the viewport when the viewport is too slim to fit that header.
Updated the example to make the change / centring a bit more obvious.
If possible I want the layout to support all the way down to IE6 though IE7+ will be fine. The final page will prompt to install Chrome Frame anyway. And ofcourse don't forget about Chrome, FF 3.5+.. (Opera?). Use of JS will not be acceptable, unless you can convince me that there is absolutely no other way, but jQuery will be present on the page.
Thank you for at least trying! (Challenge yourself! :D)
This code worked for me in FF/Chrome/Safari/Opera. Can't test in IE because I'm on Mac now, but must work in IE 7+
Example: http://jsfiddle.net/XVraD/3/
Base idea is to wrap #header in another container with "width: 100%; min-width: 970px;" and place in outside of #container, so it will do all the overflow to you.
EDIT 2: Solution that works in IE6: http://jsfiddle.net/XVraD/9/
EDIT 3: This version is fixed to have height 100% in modern browsers and old IE's: http://jsfiddle.net/XVraD/9/
It is a hard one, the only real solution I can come up with is this that you use Media queries like this:
#media all and (min-width: 970px) {
body, html {
overflow-x: hidden;
}
}
It is not supported by old browsers, there you would need a Javascript!
As far as I can tell, the best solution would be to restructure your HTML to put your header outside of the container.
<div class="outer">
<div class="header">
...
</div>
<div class="container">
...
</div>
</div>
CSS:
.outer { ... }
.header {
max-width: 1022px;
min-width: 970px;
margin: 0 auto; }
.container {
width: 970px;
margin: 0 auto; }
Demo: http://jsfiddle.net/Wexcode/tJXHF/
http://jsfiddle.net/QrVJJ/
#header is positioned outside and above (with z-index) #top. It also gets margin: 0 auto; and the background is positioned top center with min-width:970px and max-width:1022px.
#header {
margin: 0 auto;
z-index:5;
min-width: 970px;
max-width: 1022px;
height: 201px;
background: #390419;
overflow:hidden;
background: transparent url(http://4.bp.blogspot.com/_rScBRKlTdoE/TC6rNWAyD9I/AAAAAAABOTo/BWkJH9ymovo/s1600/IMG_9692.jpg) no-repeat top center;
}
How about setting the header to have a min-width of 970px and a max-width of 1022px? There are ie hacks to make min and max width work. This would make make scrollbars appear after the viewport shrinks to below 970 and as you stretch the viewport the header would grow up until 1022 after which it would stay 1022.
Having this one in Chrome.
http://jsfiddle.net/A9vzA/10/
Put an inner div inside the #header
The header has position relative and no float and with 970px
The inner div has position fixed and width 1022px and margin 0 -26px
--edit
but doesnot work in IE7
--edit
this works in IE7, too http://jsfiddle.net/A9vzA/11/ just add another inner div
The first inner div is position fixed and width 100% and text-align center
The second inner div is margin 0 auto and width 1022px
Can anyone test it in IE6
--edit
nope doesnot work if you got content in your #container. position fixed is no option
Is this what you're after:
http://jsfiddle.net/HbxTQ/8/
Fullscreen:
http://jsfiddle.net/HbxTQ/8/embedded/result/
(I've not yet made it cross-browser, only tested it in Chrome. What to ensure I have the idea right first.)
sg3s, you sound like a tough customer but I thought I'd throw my hat in the ring. None of us understands exactly what you need so please post the flattened design.
My assumption is that you need one or two layers with adjustable width behind a fixed 960px content container. Using float on adjustable width containers is going to make it nearly impossible to do what you want. Instead, use postion: absolute for a container holder (a.k.a. wrapper) and position: relative for the inner content containers. No Javascript is necessary.
My recommendation is removing #header from the primary #content container and separating the background image from the #header so they can be rendered and positioned independently.
http://jsfiddle.net/dylanvalade/ZcejP/
I have been struggling with this for the past hour and I was wondering if any of you had any thoughts on this..
A client needs a nice big background image on the site. I cannot used this image as a background for the body or any div because I don't want it to be cropped horizontally. If the browser's width is smaller, the background should scale down.
So I just use an img tag with absolute positioning and z-index.
However(and this is where it gets tricky), the image is quite tall, and I don't want scroll bars on the side after the useful content.
Overflow=hidden on the body is useless because I do need scrollbars if the content is too much, but smaller that the image.
overflow=hidden on a div which has height,min-height and max-height set and contains the image just doesn't seem to work. I have no idea why.
And min-height, max-height and height is not working for the body tag either.
Any helpful ideas? I think this is doable by javascript, but I don't want to run a script every time the window is resized. I would prefer a html/css solution
PS: I have all browsers(opera, safari, ie8, firefox, chrome) open right now, and this is not just a browser issue.
I can't build a test case right now, but an absolutely fixedly positioned div with position: fixed; width: 100%; height: 100%; overflow: hidden and the image inside with width: 100% might do the trick. It will scale the image to the window's width, but won't create horizontal scroll bars.
The rest of the page may need a z-index to be displayed above the div.
Note that the body will have to have min-height: 100% for this to work.
position: fixed won't work in IE < 7.