I am using ::-webkit-scrollbar to make scroll and trying to adjust the margin-left and margin-right of the page the same when zoom in, but if the scrollbar shows up after I zoom in, it will take some space, I would like to adjust the margin-right to be the original margin + the width of scrollbar, hence I need some CSS selector that make following code only apply when scrollbar shows up margin-right: 1.5rem + scrollBarWidth, but is there a way to know if scrollbar shows up in CSS file?
Related
so lately I came up with this problem: My wrapper has a max-width of 1440px and I want to add a 10px solid border around it. When I add it the border just takes 10px of the max-width and is being displayed, everything's fine. But I want that the border does not take anything of the max-width, I want to display the 10px of the border by 1440px +
One solution would be media queries, I know that, and this also works fine. I am just wondering if there is a solution without adding a seperate wrapper and without media queries so the border just appears, when you resize your window over the 1440px and simply is cut off when you resize the window under 1440px.
Just for anybody who is wondering. I have a boxed layout and want to limit the content area for larger screens, but whish to use full-width on smaller screens.
Thanks! :-)
You could possibly add a position relative to the container and have a z-index set. Then have a pseudo item like :before have position absolute and a negative z-index with the height and width set to match the parent. This will put it behind your content and if you have the border added to it you should be set. Probably will need overflow-x:hidden on the body so it doesn't create a scroll bar. I'll create the code for this soon for reference.
Or a less complex option would be
outline:10px solid blue;
Outline goes outside of an element even with box-sizing of border-box.
This did it, the next thing I see is how to get a border-radius with the outline. I remember a trick with box-shadow. I will search for it, since the original question wis solved. Thank you very much! :)
I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/
The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.
anyone any idea how to fix this?
It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example
body {
overflow-x: hidden;
}
JSFiddle Link - your example with this rule
Edit
Per discussion, if you simply wish to center an element, apply the following margin rule
margin : 0 auto;
Updated JSFiddle
My page is overflowing to the right (there is extra empty space causing a horizontal scrollbar). CSS file is link to css.
The practice I have followed is - in the beginning, setting padding & margin 0 for all used html elements. Then, the top level boxes have width+padding+margin <= 100% to the best of my observation. More importantly, I have debugged in Chrome Developer Tools and Firebug (in Firefox). I went through each container box in the hierarchy in body tag, and each one's width is same as window width. Why then the overflow?
On a related note, if div A contains divs B & C, then A's width will be at least max(width(B), width(C)), right?
It looks like the problem is on #mainhmenu with 100% width and 5% padding on boths sides from
#media (min-width: 1200px)
#navigation ul {
padding: 0% 5%;
}
contributing to an overall width of 110%.
I just released a cross browser tool that you can use to solve problems like this. Just mouseover each element in the area to see margins, borders and padding until you find the culprit!
HTML Box Visualizer - GitHub
Remove width: 100%; from #mainhmenu :)
Its your #mainmenu
Its width is set at 100% and has a 5% padding on the sides.
If you get rid of the padding or set its width to 90% you will solve your problem
You can hide the horizontal scrollbar by,
body{
overflow-x:hidden;
}
hope this helps.And please do understand that once you specify a width and if you add padding to it, it will add to the overall width of the element.
After applying this: (to fix extra space on the right):
html {
width: auto !important;
overflow-x: hidden !important;
}
body {
width: auto !important;
overflow-x: hidden !important;
}
the vertical is no longer smooth, and sometime is stuck with the addressbar (for mobile devices).
is there a way to fix the vertical scroll?
im using bootstrap 3.1
Thanks.
Please check height definitions if there are any. Usually that's what causes a sticky vertical scroll in my experience.
Also, "extra space to the right" means you have defined widths "width:300px;" instead of percentages that are causing overflow, you should address these instead of trying to play around with the html/body.
Try inspecting elements until you find which element is causing your page to overflow, and change it's width to fit on a mobile screen, or convert it to a percentage of the total width of the screen so that it scales nicely.
If you give us more code, maybe even a website link we can give you a better answer, but you should never have to hide overflow, use auto width or overuse !important tags like that on the html/body.
In my CSS file I use this:
html,body{height:100%;padding:0;margin:0;border:0;}
Which causes a vertical scrollbar to appear on IE8, Chrome 5 and Mozilla 3.6, all latest version.
Also, the document is empty, it only has the html, head and body tags so nothing is going out of screen to cause that.
Setting overflow:hidden; on the html element will completly stop scrolling on the page.
How can I make it go away please but also keep scrolling when content is higher than display height?
Thank you.
I need 100% height in a XHTML document so that I can have div elements with 100%.
Anyway, I found the answer:
This problem only occurs when the top most element has a top margin.
It seems that that top margin gets added to the 100% height making it higher and causing the scrollbar.
So either use padding-top to space the top most element or use a with no top margin between the tag and the next element with a top margin.
overflow:hidden should help and prevent the display of scroll bars (you'll likely lose ~1px of content due to rounding errors
There may be better ways but I simply default to 98% which seems to obviate scrollbars in all browsers.
you could also set the height using JavaScript but that feels a little hacky
I ran into this issue today and found the scroll bar wasn't caused by a top margin on the first element, but by having BOTH the html and body elements have a height of 100%.
So, using this CSS rule:
html,body { height: 100%; }
I get scroll bars. If I change that to this CSS rule:
html { height: 100%; }
I get no scroll bars.
Peace...
The vertical scrollbar is coming because of height:100%. You don't need that unless there is a reason for you to use that.
Why are you setting 100% height in body?
It will get this height by default.
It makes sense to set height in body only if you want to set a numeric height in px such as lets say 600px