Reputation: 519
Suppose a <div>
tag is in a parent <div>
tag. The parent tag has takes a certain portion of screen; and I want the width
and height
tags of the child tag to be something like this: width: 100% - 100px;
, so that the gap between the child and the parent always remains the same regardless of browser window size.
The codes below are what I'm dealing with.
<div class="outer">
<div class="middle">
<div class="inner">
</div>
</div>
</div>
This is the CSS styles I put in. It works well with the commented width and height properties but 100% - 100px
just hides the .inner
selector.
.outer {
display: table;
position: relative;
height: 84%;
width: 100%;}
.middle {
display: table-cell;
vertical-align: middle;}
.inner {
animation-duration: 3s;
animation-name: mainbox;
animation-iteration-count: 1;
margin-left: auto;
margin-right: auto;
width: 100% - 100px;//90%
height: 100% - 100px;//80%
background: rgba(0, 0, 0, 0.25);
}
@keyframes mainbox{
from{
background: rgba(0, 0, 0, 0);
height: 0%;
}
to{
background: rgba(0, 0, 0, 0.25);
height: 100% - 100px;//80%
}
}
How can I set the gap in the way I want?
Upvotes: 0
Views: 553
Reputation:
Yes, you can. Use the standard calc() function in CSS. Be aware of it's current browser support, although it's pretty good at this point anyway.
.class {
width: calc(100% - 100px);
height: calc(100% - 100px);
}
If you use preprocessors like LESS or SASS, this also works too.
Upvotes: 2