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');
Related
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.
When I use multiple VH tags, my content seems to jump around on mobile. Is there any way to avoid this, also is there a way to make the scrolling smoother vs being jumpy and horrible?
VH usage is as follows:
.wrap {
min-height: 100vh;
}
I'm working on a CSS template for a responsive %-based grid. I had it working with IE7 earlier and did something stupid, I guess, and now it's not working.
http://danmathisen.com/lightbase-css/
How it currently works:
Columns are percent based. So a 1/3 width column (.col-1-3) will be width:32% + margin-left:1% + padding:1%. This is heavily based on Chris Coyier's Don't Overthink It Grids.
In modern browsers, the padding doesn't affect the div width. But in IE7 it does. So I have IE classes (.lt-ie8) that accomodate for the 1% padding. .lt-ie8 .col-1-3 { width: 30%; }. So 30% width + 1% margin-left + 2% padding left/right * 3 - 1% :first-child = 100%. Right?
Why doesn't that work in IE7?
Solutions:
I can use behavior: url(/scripts/boxsizing.htc) but hope to make this workable without.
Or use JS to calculate the width then subtract 1px. I think that would work, but it's not ideal.
Or settle with 99% width. Also not ideal.
I'd love a CSS-only solution. Any thoughts?
I haven't tested this, but maybe you could try putting one div inside another, and have the padding or margins in the inner div? Something like this:
<div style="width:33%;padding:0;margin:0;">
<div style="padding:3%;margin:3%;">
Content here
</div>
</div>
Again, not sure if this will work, but it's worth a shot.
I want to have a calclation that is based on the width and height of the window
I know I can use #media min-width: 700px to have css work only when width is 700px at minimum.
is there a way to have something like this?:
$calc = percentage((#media.width)/200)*3);
div{
width: $calc
}
in which I use the width or height of the window in my calculation the same way that the css checks for the current width and compares it with the min-width
take a look at jquery ..
http://api.jquery.com/width/
http://api.jquery.com/height/
In the mean while, can you elaborate your question. What is the context of the code you want to write ? PHP, css, html, javascript ??
Also, take a look at the CSS function Calc()
http://caniuse.com/calc
Carry on.
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.