Question

我尝试使用仅限css的方法解决此问题，而不是使用margin-left从<div class="fd"></div>移动<div class="sb"></div> 我已经没想到了 - 想要尝试什么。我已经嵌套了一些包装器并使用了不同类型的定位（这不是拼写错误，也不是法语，拼写检查器，对不起）但到目前为止还没有任何结果。

问题：将固定div作为实体元素，接受其上的.fd元素的右侧。

.fd包含的内容超出了网页的高度 .sb保留了侧面内容，其高度保持为100％。

请参阅代码段，了解我一直在努力解决的问题。

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.sb {
  height: 100%;
  width: 300px;
  background: blue;
  position: fixed;
  opacity: 0.5;
}
.fd {
  min-height: 100%;
  background-color: red;
  display: inline;  /* Won't apply to fixed? block will overlap everything */
}

＆＃13;

<div class="sb"></div>
<div class="fd">
  <p>Am I out in the open?</p>
</div>

＆＃13;

Answer 1

添加了额外的.wrap。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap{
  padding-left: 300px;
}
.sb {
  height: 100%;
  width: 300px;
  background: blue;
  margin-left: -300px;
  position: fixed;
  opacity: 0.5;
}
.fd {
  min-height: 100%;
  background-color: red;
  display: inline;  /* Won't apply to fixed? block will overlap everything */
}

<div class="wrap" id="wrap">
  <div class="sb"></div>
  <div class="fd">
<p>Am I out in the open?</p>
  </div>
</div>

https://jsfiddle.net/afelixj/tb3pbam9/

固定div为固体，高度为100％

1 个答案: