Home > Article > Web Front-end > Dynamic element size via CSS positioning manipulation
Dynamic element size via CSS positioning manipulation
- 不言Original
- 2018-11-07 16:23:033003browse
This article introduces to you the content of dynamic element size through CSS positioning operation. Friends who are interested can take a look. Without further ado, let’s look directly at the specific content.
Tips for providing elements to volumes without using width and height or JS.
This is a very simple trick, but many people don’t know it. (Recommended tutorial: CSS Video Tutorial)
Suppose you want to make a modal box that contains all screens except 100px per screen, how would you solve this problem?
Suppose you want to make a modal that covers all of the screen except for 100px of each border, how would you solve this problem?
HTML
<div class="popup">some content</div>
First we need to add an attribute position:fixed to our div.
After we want to position the modal 100px from each side of the viewport, why shouldn't we give it all 4 position attribute parameters (top, right, bottom, left)?
The solution is that you can give all 4 parameters of fixed/absolute positioning, top: 100px, right: 100px, bottom: 100px; left: 100px;.
By doing this you can make dynamic element sizes accordingly from 100px on each side.
CSS
.popup{
position:fixed;
z-index:5;
left:100px;
right:100px;
top:100px;
bottom:100px;
/*some styles*/
background-color:#ccc;
border-radius:10px;
border:solid 3px #000;
padding:20px;
}The resulting div is an auto-size modal box without a single line of JS.
Full Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.popup{
position:fixed;
z-index:5;
left:100px;
right:100px;
top:100px;
bottom:100px;
background-color:#ccc;
border-radius:10px;
border:solid 3px #000;
padding:20px;
}
</style>
</head>
<body>
<div class="popup">文字内容</div>
</body>
</html>Now, let’s say you want to add a mask underneath the modal box, exactly the same idea!
Here is the solution:
HTML:
<div class="mask"></div>
CSS
.mask{
position:fixed;
z-index:2;
left:0;
right:0;
top:0;
bottom:0;
background-color:rgba(0,0,0,0.8);
}Full code:
The above is the detailed content of Dynamic element size via CSS positioning manipulation. For more information, please follow other related articles on the PHP Chinese website!