Dynamic element size via CSS positioning manipulation-CSS Tutorial-php.cn

Dynamic element size via CSS positioning manipulation

不言

Release： 2018-11-07 16:23:03

Original

3030 people have browsed it

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>

Copy after login

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; 
      }

Copy after login

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>

Copy after login

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>

Copy after login

CSS

.mask{
  position:fixed;
  z-index:2;
  left:0;
  right:0;
  top:0; 
  bottom:0;  
  background-color:rgba(0,0,0,0.8);  
  }

Copy after login

Full code:









文字内容
<div class="mask"></div>

Copy after login

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!