绝对位置，右列高度与左列

Question

我努力解决以下问题：我们绝对定位了两个部门，一个用于内容，一个用于导航栏。左边一个包含大量文本，因此它通常远远超过页面高度。我想要正确的（导航栏）拉伸。可悲的是，我无法用已知的方法获得它。

＆＃13;

＆＃13;

.left, .right {
  position: absolute;
  top: 0;
  bottom: 0;
}

.left {
  left: 0;
  width: 70%;
}

.left .leftc {
  background: red;
}

.right {
  right: 0;
  width: 30%;
  background: green;
}

＆＃13;

<div class="left">
  <div class="leftc">
    ABC <!-- large amount of text -->
  </div>
</div>
<div class="right">

</div>

＆＃13;

＆＃13;

＆＃13;

Fiddle

注意：我知道如何使用固定位置制作正确的栏，但我希望导航栏可以滚动整页以及其他内容。请没有固定的职位。

Answer 1

您可以使用display: flex上的body来实现这一点。 （我删除了所有位置设置）

for (i = 0; i < 100; i++)
  $(".leftc").append("<p>xxx</p>");

body {
  display: flex;
  margin: 0;
}
.left {
  width: 70%;
}
.leftc {
  height: 100%;
  background-color: red;
}
.right {
  width: 30%;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
  <div class="leftc">
    ABC
  </div>
</div>
<div class="right">

</div>

https://jsfiddle.net/tknna6ww/1/

Answer 2

左div由其内容拉伸，而不是由定义的高度拉伸。您可以使用JavaScript将右div的高度设置为左侧的高度：

$(".right").css("height", $(".leftc").css("height"));

请注意，您必须在呈现页面后放置此行，以确保浏览器已经计算出正确的高度。这是一个演示：

＆＃13;

＆＃13;

for (i = 0; i < 100; i++)
  $(".leftc").append("<p>xxx</p>");

$(".right").css("height", $(".leftc").css("height"));

＆＃13;

.left,
.right {
  position: absolute;
  top: 0;
  bottom: 0;
}

.left {
  left: 0;
  width: 70%;
}

.left .leftc {
  background-color: red;
}

.right {
  right: 0;
  width: 30%;
  background-color: green;
  height: 100%;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left">
  <div class="leftc">
    ABC
  </div>
</div>
<div class="right">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果您可以将它们放在同一个容器中，这是相当简单的。

那个容器只需要display: flex;（和flex-direction: row;，因为你想横向放置）

.wrapper {
  display: flex;
  flex-direction: row;
}

.left {
  background-color: blue;
}

.right {
  width: 50px;
  background-color: red;
}

<div class="wrapper">
  <div class="left">
    <textarea></textarea>
  </div>
  <div class="right"></div>
</div>

支持widely but not fully的新方法是grid：

.wrapper-of-your-whole-site-potentially {
  display: grid;
  grid-template-rows: 50% 50%;
  grid-template-columns: auto;
  grid-template-areas: "left right";
}

.left {
  grid-area: left;
  height: 500px;
  background-color: blue;
}

.right {
  grid-area: right;
  background-color: red;
}

<div class="wrapper-of-your-whole-site-potentially">
  <div class="left">
  
  </div>
  <div class="right"></div>
</div>

Answer 4

制作红边height: 100%;

＆＃13;

＆＃13;

.left, .right {
  position: absolute;
  top: 0;
  bottom: 0;
}

.left {
  left: 0;
  width: 70%;
}

.left .leftc {
  background: red;
  height: 100%;
}

.right {
  right: 0;
  width: 30%;
  background: green;
}

＆＃13;

<div class="left">
  <div class="leftc">
    ABC <!-- large amount of text -->
  </div>
</div>
<div class="right">

</div>

＆＃13;

＆＃13;

＆＃13;