In CSS there are several "modes" to express the intent that the given block/cell size should fit to its content. For example for grid cell it is "auto" or "min-content" (they don't mean the same, I know).
The problem with all those modes are (at least in Firefox) the content is calculated without scrollbar. So when I scroll the content the scrollbar overlaps a bit of the content.
Is there some switch/mode that would reserve the space needed for scrollbar? If this help I am struggling with vertical scrollbar.
Unless I miss something padding is no-go because it would require knowing the size of the scrollbar.
Update:
I am looking for something like:
... style="padding-right: calc(scrollbar-width)" ...
Im no pro myself, but for me it sounds like you could add a margin-right: to the div element, this will make the content move to the left side, which then gives more space on the right for the scrollbar
Related
Using Clarity and Angular 6, I have a card in the main content area that I'd like to have fill the length of the current view (no more, no less). The only way I found that comes close is to set the height to "-webkit-fill-available" (only using Chrome right now).
The problem with this is that there seems to be a tiny bit of space at the bottom that's causing the content area to show a scroll bar.
Ideally I'd like to never see a scrollbar in the content area and make all the content fit within the current screen height.
Here is a stackblitz example that demonstrates the problem.
Your solution is not a standard and would not work on IE/Edge, and might not work well with Safari per https://caniuse.com/#search=fill-available.
You could try giving it a height: calc(100vh - 5.5rem);, which gives the card a height of the view port, but subtracts the heights of the header bar and margins of the card and content areas. Ultimately, to use CSS to calculate heights you need to know what other elements are on the page and calculate against those known heights, or else you'd have to do something with JavaScript to inspect the elements of the page to find the available space.
I have been really stumped on coding this mybb theme. So first off there seems to be a constant padding around the entire container. With firefox I used the identify and the container is only reading my screen to be like 1583 wide while my screen in actuality is 1,600. It has padding for the height as well. Also it seems that whenever I adjust the width to a smaller width it is weighted to the left. I don't want everything floating to the left.
http://img689.imageshack.us/img689/4378/3xeu.png
In this photo provided I have all container, and body set to 100% width. The menu seems to go past it only because I said the width of that to 9,000px wide. But it refuses to go any more left.
it's a margin, not a padding, it's set in some browsers by default in the body tag, just add this to your CSS:
body{margin:0}
To add to the answer above, you should really considering using and adding normalize.css with all your projects/code in order to avoid these issues in the future.
http://necolas.github.io/normalize.css/
I have a container on my site that is 100% of the screen width and has its own scrollbar using overflow: auto. The standard scrollbar does not display on my site and I use this instead because there is another layer behind the main layer of my site that also has its own scrollbar (you can view my site here and click a blog post to see what I mean).
I have a blue bar that I want to be fixed to the top of the screen. This is easy enough in terms of positioning in that way with position: fixed however the width of the bar needs to be 100% of the screen width and I'm finding that the bar will overlap the scrollbar that is applied to its parent container.
Here is a jsFiddle showing what I mean: http://jsfiddle.net/xUTR2/1/
I've thought about just offsetting the bar to the left based on the width of the scrollbar, but then I decided that I couldn't rely on estimating the width of the scrollbar across different browsers, and that would leave a gap if there were no scrollbar.
Is there an obvious way to force the scrollbar to render ontop?
As I can't comment yet, im forced to give an answer.
If im correct you would like to get the top blue bar in a fixed position as in visible while scrolling down.
personally i would make seperate containers
something like
<div id='page'>
<div id='bluebar'></div>
<div id='content'></div>
</div>
Demo can be found here ( http://limpid.nl/lab/css/fixed/header )
you can do this by jquery easily, at some event.
$("body").load(function () {
$('scrollable container').css('overflow-y', 'auto');
});
try keeping the blue bar and other page content in separate containers, i think it will solve the problem for you.
This is impossible to achieve in a clean/robust kind of way because anything you position as fixed is done so within the context of the main browser (and within any scrollbar it has), but because you removed the main body scrollbar (and you must because you cannot z-index position on top of it) it doesn't think anything is there, yet you have this div below it so the only options you have are to use fixed margin and height for the two elements or use some javascript method to determine the correct width of your top div.
I'll admit that CSS is not my cup of tea, so it's possible that I'm missing something obvious here. My problem is that when I have an element that has both CSS properties of "clear: both;" and "height: 100%;" the element actually ends up going past the page height. Here is an example: http://jsfiddle.net/d9mv7/
Notice that the blue frame causes a scrollbar to appear and exceeds the page height despite being "100%". When "clear: both" property is removed, it renders as expected (JsFiddle still adds an unneeded scrollbar, but when rendering normally, I don't have that issue).
My intent is to have the bottom div (the blue one in JsFiddle) go until the bottom of page height, but stop at the bottom of the page, drawing the border correctly, same way as on the sides. The problem is that I do have content above the div that has a float property, requiring div to have the "clear: both" property to render correctly (unless there is another way without having to hardcode the pixel size).
I've tried wrapping both the top (float element) and bottom div inside an additional div, such that their height is relative to that div instead of the page. This seemed to make the overlap smaller (and scrollbar shorter), but did not make it go away. Using "overflow: hidden;" will not work for me either, since it still makes the div and the content go beyond the bottom, only hiding the scrollbar. How do you guys suggest I handle this (preferably without JavaScript)?
As the two other posters suggested, I ended up going with a JavaScript solution. If someone can find a CSS-only solution that makes no assumptions about size/contents of the divs, please post it and I will change the accepted answer. Here is how I'm handling it for now (this uses jQuery, but similar logic can be done with native JS):
$('#second-panel').height(document.height-$('#first-panel').height());
Alternatively, if your divs have margins/padding/borders that are thick enough to matter and you want them included in the measurements as well (because element.height() doesn't), you can use outerHeight:
var secondPanel = $('#second-panel');
var borders = secondPanel.outerHeight()-secondPanel.height();
secondPanel.height(document.height-$('#first-panel').outerHeight()-borders);
So basically the website I'm designing has 3 divs inside a container div. One floating to the left. Two to the right one above and one below. They work fine when the browser is maximized. Problem is, when the browser is resized, the right divs wrap below the left div even though I've set min-widths. I want the divs to remain where they are and a scroll bar to appear instead. I did try overflow, no luck. Any solutions?
PS- Initially I had added min-width for the inner divs too. They didn't seem to solve the problem, so I removed them.
A solution or a nudge in the right direction would be really appreciated.
Here's a link to the jsFiddle - http://jsfiddle.net/R62w4/3/
Thank you, Matthew. Although that fixed the wrapping issue, my site now has a thin line of pixels on the right hand side. Any idea how I remove it? It continues from the header till the footer. It isn't affected by any changes to the CSS elements pertaining to the header or navigation bar or footer.
Okay, I found the reason to the extra space on the right side. If I increase my margins for the outer div, the space increases. Is there a way to increase the margins without getting a space?
You might be able to wrap them in this:
<div style="white-space:nowrap;">
</div>
... to prevent that from happening.
It's hard to know exactly where the problem is, could you post some code or make a JSFiddle?
Update:
I believe the problem is that you are using % based widths and px for margins - it's easy to lose track of how much available space you have and subsequently your layout falls apart. Consider that two left floated DIVs of 50% width with 1px of margin each will break on to two lines every time because that's more than 100%.
I changed your fiddle a bit: http://jsfiddle.net/R62w4/5/
... just by moving the left margin from your first DIV and right margin from your other two to the parent container seems to give enough room for everything.
P.S. You can use % based margins and just make sure everything you want to be on one line stays <= 100%.
the simpl css framework shows you how to do percentage based columns with pixel based margins which is what you want.