Setting width/height as percentage minus pixels
You can use calc
:
height: calc(100% - 18px);
Note that some old browsers don't support the CSS3 calc()
function, so implementing the vendor-specific versions of the function may be required:
/* Firefox */
height: -moz-calc(100% - 18px);
/* WebKit */
height: -webkit-calc(100% - 18px);
/* Opera */
height: -o-calc(100% - 18px);
/* Standard */
height: calc(100% - 18px);
Calculating width from percent to pixel then minus by pixel in LESS CSS
You can escape the calc
arguments in order to prevent them from being evaluated on compilation.
Using your example, you would simply surround the arguments, like this:
calc(~'100% - 10px')
Demo : http://jsfiddle.net/c5aq20b6/
I find that I use this in one of the following three ways:
Basic Escaping
Everything inside the calc
arguments is defined as a string, and is totally static until it's evaluated by the client:
LESS Input
div {
> span {
width: calc(~'100% - 10px');
}
}
CSS Output
div > span {
width: calc(100% - 10px);
}
Interpolation of Variables
You can insert a LESS variable into the string:
LESS Input
div {
> span {
@pad: 10px;
width: calc(~'100% - @{pad}');
}
}
CSS Output
div > span {
width: calc(100% - 10px);
}
Mixing Escaped and Compiled Values
You may want to escape a percentage value, but go ahead and evaluate something on compilation:
LESS Input
@btnWidth: 40px;
div {
> span {
@pad: 10px;
width: calc(~'(100% - @{pad})' - (@btnWidth * 2));
}
}
CSS Output
div > span {
width: calc((100% - 10px) - 80px);
}
Source: http://lesscss.org/functions/#string-functions-escape.
Div width 100% minus fixed amount of pixels
You can use nested elements and padding to get a left and right edge on the toolbar. The default width of a div
element is auto
, which means that it uses the available width. You can then add padding to the element and it still keeps within the available width.
Here is an example that you can use for putting images as left and right rounded corners, and a center image that repeats between them.
The HTML:
<div class="Header">
<div>
<div>This is the dynamic center area</div>
</div>
</div>
The CSS:
.Header {
background: url(left.gif) no-repeat;
padding-left: 30px;
}
.Header div {
background: url(right.gif) top right no-repeat;
padding-right: 30px;
}
.Header div div {
background: url(center.gif) repeat-x;
padding: 0;
height: 30px;
}
Setting element height/width to a combination of percent and pixel values
With CSS3, you can use calc()
:
$('div').css({
height: 'calc(30%-5px)';
});
Note that this has limited browser support. Considering finding a value that can be used as a fallback (such as height: 29%
).
Jquery calc percentage width minus pixels not returning elastic column
Try this:
http://jsfiddle.net/PHv6S/3/
$('.middle').css('width', '100%').css('width', '-=260px');
$(window).on('resize', function(){
$('.middle').css('width', '100%').css('width', '-=260px');
});
Related Topics
Why Is a Flex Item Limited to Parent Size
Fill Remaining Vertical Space With CSS Using Display:Flex
Using CSS to Affect Div Style Inside Iframe
Css - Why Doesn't Percentage Height Work
Css Transform Doesn't Work on Inline Elements
Bootstrap Navbar With Left, Center or Right Aligned Items
How to Center Floated Elements
Css Force Image Resize and Keep Aspect Ratio
Difference Between "Word-Break: Break-All" Versus "Word-Wrap: Break-Word" in Css
Why Does Applying a Css-Filter on the Parent Break the Child Positioning
Change Navbar Color in Twitter Bootstrap
Is There a CSS Selector by Class Prefix
Z-Index Not Working With Fixed Positioning
Css Z-Index Lost After Webkit Transform Translate3D