Question

如果我的页面上有两个div。一个人在页面顶部style="position:fixed; left:0; top:0;right:0;"固定了一个位置，一个固定在页面左侧的style="position:fixed; left:0; top:0;bottom:0;"有没有办法让左边的div定位，所以它的顶边与底部对齐顶部定位div的边缘没有硬编码边距或填充？默认情况下会有一些部分重叠

Answer 1

将div放置在另一个容器div中并将position:fixed样式定义到容器div可以解决您的问题。

<div style="position:fixed;top:0;left:0;right:0;">
  <div>div 1</div>
  <div>div 2</div>
</div>

Answer 2

试试这个

＆＃13;

.div0{
  position: relative;
  width: 600px;
  height: 400px;
  background: blue;
  perspective: 100px;
}

.div1{
 position:fixed; left:0; top:0;right:0;
 width: 200px;
 height: 200px;
 background-color: red;

}

.div2{
 position:fixed; left:200; bottom:0;
 width: 200px;
 height: 200px;
 background-color: green;
}

＆＃13;

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

＆＃13;

Answer 3

试试这个，我想你也想这样做。

＆＃13;

.parent{
position: relative;
background-color: #000;
width: 600px;
height: 400px;
}
.child1,.child2{
position: absolute;
left: 0;
background-color: #f00;
height: 190px;
}
.child1{
top: 0;
right: 0;
}
.child2{
bottom: 0;
width: 200px;
}

＆＃13;

<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>

＆＃13;

Answer 4

如果顶部div有一个已定义的height，您只需获取该值并使用if为左侧DIV top设置：

＆＃13;

.top,
.left {
  position: fixed;
}

.top {
  top: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: red;
}

.left {
  top: 100px;
  bottom: 0;
  left: 0;
  width: 150px;
  background: green;
}

＆＃13;

<div class="top"></div>
<div class="left"></div>

＆＃13;

防止多个固定定位元件的重叠

4 个答案: