代码之家 › 专栏 › 技术社区 › Mohammad Vard

如何设置车身的全高线条

css html javascript

Mohammad Vard · 技术社区 · 9 月前

我网站的主体没有特定的高度,所以我找不到它的确切大小。我想显示一条从上到下的线,如下所示:

.lines {
  height: 100%;
  position: absolute;
  background-color: #000;
  height: 100%;
  width: 20px;
  position: absolute;
  right: 50%;
  top:0;
}


.div1 {
  background-color: red;
  width: 500px;
  height: 500px;
}

.div2 {
  margin-top: 20px;
  background-color: blue;
  width: 500px;
  height: 500px;
}

<body>
  <div class="lines">

  </div>
  <div class="div1">

  </div>
  <div class="div2">

  </div>

</body>

但我找不到我身体的确切高度。和 height: 100%; 只需填写网站的一部分。

3 回复 | 直到 9 月前

Andy 9 月前

改变 .lines 待 position: fixed 。

该元素将从正常文档流中删除,并且不会在页面布局中为该元素创建任何空间。元素相对于其初始包含块进行定位。其最终位置由顶部、右侧、底部和左侧的值决定。

.lines {
  position: fixed;
  height: 100%;
  background-color: #000;
  width: 20px;
  right: 50%;
  top:0;
}


.div1 {
  background-color: red;
  width: 500px;
  height: 500px;
}

.div2 {
  margin-top: 20px;
  background-color: blue;
  width: 500px;
  height: 500px;
}

<body>
  <div class="lines"></div>
  <div class="div1"></div>
  <div class="div2"></div>
</body>

Joerie 9 月前

看看 this post

我建议使用 height: 100vh;

Sunny Parsana 9 月前

body{position:relative; width:100%; height:100%; margin:0px;}
.lines {
  height: 100%;
  position: absolute;
  background-color: #000;
  height: 100vh;
  width: 20px;
  position: absolute;
  right: 50%;
  top:0;
}


.div1 {
  background-color: red;
  width: 500px;
  height: 50vh;
}

.div2 {
  margin-top: 0px;
  background-color: blue;
  width: 500px;
  height: 50vh;
}

<body>
  <div class="lines">

  </div>
  <div class="div1">

  </div>
  <div class="div2">

  </div>

</body>

推荐文章

Softly · 单选按钮未按预期取值

10 月前

NovoMannen · 导航中的下拉菜单在内容后面重叠

10 月前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

10 月前

eXor420 · 如何在脚本标记中使用导出的函数?

10 月前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

10 月前

IonicMan · 剑道网格在宽度过大时不显示某些列

11 月前

Kernier · 如何将数学公式支持添加到StacksEditor?

11 月前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

11 月前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

11 月前

Akshay mek · Vscode扩展建议不适用于某些文件夹

11 月前