I have a header div above a scrolling div and I'd like to pad the header on the right the same width as the scrollbar. I know I can use JavaScript to calculate the scrollbar width, but I was wondering if there's a pure CSS method to do this?
Edit
To complicate this more, if there are few results that come back so the scrolling div doesn't produce a scrollbar, then I'd want the header to not be padded as well. I'm not sure if that's possible using only CSS, but thought it's worth asking.
What about "forcing" an overflow-y:scroll then making it non-visible?
#myDiv{
overflow-y:scroll;
}
#myDiv::-webkit-scrollbar {
opacity:0;
}
A CodePen
I have to mention that I just had this idea...
You'll have to test it for browser compatibility.
It seems that all major browsers have the same width, no calculation necessary:
http://www.textfixer.com/tutorials/browser-scrollbar-width.php
Would it be acceptable to just put that in the CSS?
Related
I've been banging my head against a wall trying to figure this out; http://nicklemmon.com/lily
For some reason the height of the .content div won't adjust to fit its contents! I can make the height of .content greater than 100%, but that kind of defeats the purpose of a fluid layout. This is just a random site I was working on to learn more about CSS animations, yet I've run in to this silly barrier on the way.
Help!
overflow:auto should do the trick for you.
.content{
overflow:auto;
}
you have a height of 100vh, remove it and you should be fine.
Update(making left column height equal to right column height)
As it appears, there seems to be no straightforward way to adjust left column to same height as right column using pure CSS, you can do a workaround in a number of different ways, best way I would suggest is to use Javascript/jQuery.
//HTML
<div class="moving-right big-lefty col-md-3">
</div>
<div class="big-righty col-md-9">
</div>
//jQuery to use on document ready.
$(".big-lefty").height($(".big-righty").height());
you might want to try another CSS solution that did not work in your case when I tried it on chrome, using inspector. you might want to play with it.
Have .content as display:table-row and .big-lefty and big-righty as display:table-cell
I'm working on a website in which sometimes the pages might not cover the entire height of the screen (due to less content), which creates empty white space below the footer. I'm trying to solve this by always keeping the footer below the viewport. I've tried many ways to do this, but all of them solve one problem and create another.
Here is a jSFiddle for what I have so far.
The only time it actually worked was when I set height:100% to the body and html, but this makes the content overflow the body in the DOM, which I'm trying to avoid. Also, because the site needs a boxed layout, I need to wrap the page-content and footer with the #page-wrapper div as used in the code.
Please let me know if there is a way to achieve this, with the given markup.
Thanks!
Edit: Here is a slightly updated jSFiddle
I think you can do this by absolutely positioning the footer and making the page-wrapper relatively positioned. The catch is that you'll have to size the page-wrapper using JS based on the height of the HTML element. Something like:
$('#page-wrapper').height($('html').height());
but you may need to tweak the position quite a bit unless you use
* { box-sizing: border-box; }
These three SO questions didn't quite get me what I needed, interesting though the BFC layout stuff was. (One, Two, Three)
This fiddle shows the issue I'm having, only in Chrome is the hidden content still enforcing width dimensions of the div classed 'content' with a width value of 0px.
This layout is the basis for an Accordion style menu... which obviously isn't going to work if the enforced content dimensions are visible :P
Why is Chrome behaving this way, maybe I missed something in the BFC explanation? A solution would be awesome.
What a nasty bug!
Need to research if further, but if you know the original width of .content, then you can add the same negative margin to it: http://jsfiddle.net/kizu/cpA3V/7/ — so it would compensate the original width. And if you'll need to animate the accordion, you'll just need to animate the margin alongside the width.
Try with this
.slide {
float:left;
width:25px; /* width added here (same width of '.handle' ) */
}
Example : JSfiddle
If you give the .content a width of 1px, then it behaves correctly. I can't explain what's happening but you can solve this by using display: none instead of the width.
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
When I resize window and when vertical scrollbar appears, if I scroll it way to the bottom, - the bottom breaks. I dont understand why, but I think it has something to do with the way how page uses 100% height. Any help would be appreciated!
Here's the page: zxsdesign.com/main1.html
Here's a screenshot
zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG
It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.
Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.
You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.
Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.
Try to use clear: left; or clear: both; in your style.
100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.
Also, your head tag isn't closed properly. Check this
Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.
Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.
And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.