Stretching an element in both directions considering paddings-CodePudding

I'm pretty new to CSS so apologies for this question in advance. I know that it's pretty easy, but I can't create an element that is fully stretched in both directions (consider padding, please). Here is my try:

* {
   background-color: lightblue;
}

body {
  display: flex;
  justify-content: left;
  overflow:hidden;
   height: 100%;
}
.timeline {
  width: 85%;
  height: 25%;
  background: #ECF1F524;
  mix-blend-mode: normal;
  backdrop-filter: blur(15px);
  overflow: hidden;
  position: absolute;
  box-shadow: 0px 20px 53px -30px rgba(95, 102, 173, 0.566816);
  border-radius: 30px;
  
  padding-top: 100px;
  padding-right: 100px;
  padding-bottom: 100px;
  padding-left: 100px;
}

<html>
<body>
  <div >
    <div />
</div>
</body>
</html>

CodePudding user response：

In your code you are mixing different techniques. One way to achieve the result is using "static" positioning (default) is the following. I suggest you to take a look at the box sizing property when struggling with paddings. It's generally useful to set box-sizing: border-box for all elements.

The other tricky part is setting a full height. All parent elements should have a height: 100% to stretch full width.

* {
  box-sizing: border-box;
}

html,
body,
.main {
  background-color: lightblue;
  height: 100%;
  margin: 0;
  padding: 4px;
}

.timeline {
  width: 100%;
  height: 100%;
  background: #ECF1F524;
  mix-blend-mode: normal;
  backdrop-filter: blur(15px);
  box-shadow: 0px 20px 53px -30px rgba(95, 102, 173, 0.566816);
  border-radius: 30px;
  padding-top: 100px;
  padding-right: 100px;
  padding-bottom: 100px;
  padding-left: 100px;
}

<html>

<body>
  <div >
    <div  />
  </div>
</body>

</html>