代码之家 › 专栏 › 技术社区 › Orkhan Aliyev

考虑到填充物,在两个方向拉伸元素

css

Orkhan Aliyev · 技术社区 · 4 年前

我对CSS很陌生,所以请提前为这个问题道歉。我知道这很容易,但我不能创建一个在两个方向都完全拉伸的元素(请考虑填充)。以下是我的尝试:

* {
   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 class="main">
    <div class="timeline"/>
</div>
</body>
</html>

1 回复 | 直到 4 年前

Mirco Bellagamba 4 年前

在代码中,您混合了不同的技术。实现该结果的一种方法是使用“静态”定位(默认设置),如下所示。我建议你看一下 box sizing 在与填充物斗争时的属性。通常,设置 box-sizing: border-box 适用于所有元素。

另一个棘手的部分是设置全高。所有父元素都应该有一个 height: 100% 伸展整个宽度。

* {
  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 class="main">
    <div class="timeline" />
  </div>
</body>

</html>

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

Mass · 如何在Tailwind CSS v4中创建配置

1 年前

magenta placenta · 将css变量合并为一个变量

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前