I came across this issue when I forgot to put calc in my scss, so the css was like
div{height:100vh - 120px}
and in front end, this turns out to be
div{height:98.75vh}
I am just curious where this 98.75 comes from. How did the browser interpret 100vh - 120px?
In general, it means that 120px is 1,25% of your viewport height.
IMO div{height:100vh - 120px} did not throw an error because of SCSS handled it and transformed it into CSS but I'm not 100% sure.
Related
I know i can do calc(100% + 15px), but is there way to do
calc("content width" + 15px)?
fit-content and auto didn't work, which kinda makes sense.
I have unknown number of items that i want just to take width they need (inline-block) + some amount of px for justify-content: space-between;
If this can't be done with calc, is there an alternative?
(I'm using scss if that changes anything)
Use padding. The content+padding => determines size without using % percentage for width.
In my scenario, a button added a '>' using pseudo ::after, and was positioned 18px from the right edige.
I also found myself in this situation, unfortunately not having found a solution I used a small JS function that assigns the value
width: calc ($(element).width() + 10px);
Unfortunately, rather than calculating the measure via javascript when loading the page I can not help you.
I am using 100vh for my body content, but how can I make it so it takes away the height of my navbar?
Like
100vh - 50px
Is it possible?
You should be able to do so in LESS with the following
calc(~"100vh - 50px");
If you're happy with just a css solution, here is an example
calc(100vh - 50px);
JSFiddle Link
It is possible with the calc() css function
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
Doesn't work in all browsers. vh/vw/vmin support in this might be even smaller.
except in LESS you have to escape it, to prevent it being calculated by the compiler, like so:
height: calc(~'100vh - 50px');
how come this makes the width to be 100%?
.test {
width: (50%;);
}
I already know how to fix it so it becomes 50% and that the statement is more or less redundant, I'd just like to know why this behavior happens.
EDIT: http://jsfiddle.net/k57z9/
I am assuming .test here is a <div> or other block level element. These elements by default have a 100% width (well, auto really, which means 100% minus padding). The broken CSS rule is ignored because it's, well, broken. So the element is 100% wide by default. You'd get the exact same result by not writing any CSS at all.
I'm working on a google map page for a jquerymobile site. I've got the map behaving as I'd like, and it displays beautifully, but the map element is too big - I can't figure out how to scale it to fill all the available space between the header and footer.
So I have:
header (let's say it's 30px tall)
footer (let's say it's 20px tall)
Since there are so many different screen sizes for mobile devices right now, I want the map_canvas to be device-height minus 50px tall. Can I do this in css, or do I need to use javascript? (Not averse to that, but it would be great to use pure css...)
You can use height: calc(100% - 50px) in modern browsers.
Due to general viewport wonkyness, auto-height is a slippery issue and not implemented reliably.
I've needed to implement something similar before on my mobile sites, and I found this article on Quirksmode to be infinitely useful - http://www.quirksmode.org/mobile/viewports.html
In your case, you'd want the height to be
document.documentElement.offsetHeight - (header.outerHeight() + footer.outerHeight())
or if you want to hardcode, document.documentElement.offsetHeight - 50. Of course hard-coding the value is a less maintainable way to go.
You could use javascript, or you could use relative heights. For example, set your header's height to say, 10%, the footer to 20%, and then you could set your map's height to 70%.
i want to set the width of the DIV like
( 100% - 10px )
using CSS expression but have been failing can somebody tell me what is the answer to that
You can't do that unfortunatly, and it can be annoying because you do run into instances where it would be great.
You can use Javascript to work out pixel widths of elements, but this gets messy and very complicated to manage very quickly.
My recommendation is go back to the drawing board and redesign your layout to work around this issue.
If you post specific examples we might be able to help.
You can do exactly this today with CSS3's calc function.
width: calc(100% - 10px);
you could use javascript to get the actual width of the div when you have it at 100% and then reduce it by 10(might i recommend jquery as a greate framework to work with when it comes to javascript), another thing would create a wrapping div with overflow:hidden; and that's 100% and then you apply 100% to the inside div too and add left:-10px; to it, it will create desired effect
Can you give a more concrete example? Just without any more details it seems you just need a left or right margin of 10px on an block element with default (auto) width.