绝对定位，使右列高度与左列相同答案

【问题标题】：Position absolute, make right column height same as left column绝对定位，使右列高度与左列相同
【发布时间】：2022-01-25 21:25:10
【问题描述】：

我在以下问题上苦苦挣扎：我们绝对定位了两个部门，一个用于内容，一个用于导航栏。左侧包含大量文本，因此通常会超出页面高度。我也想要正确的（导航栏）伸展。可悲的是，我无法通过已知方法获得它。

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

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

.left .leftc {
  background: red;
}

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

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

</div>

Fiddle

注意： 我知道如何制作具有固定位置的右栏，但我希望导航栏与整个页面以及其余内容一起滚动。请不要固定位置。

【问题讨论】：

我现在的解决方法是将导航栏的颜色设置为主体颜色。
已经有很多方法可以达到这种效果，在网络上的许多方法中都有记录，我相信你可以通过搜索找到它们；但现在您可以使用 flex layout （正如人们所回答的那样）或 grid layout。

标签： html css css-position

【解决方案1】：

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

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/

【讨论】：

你不需要leftc。此外，在基本布局中使用相对单位作为宽度总是一个坏主意（除非你真的知道你在做什么）
我只是使用了问题中的原始 HTML 代码，这就是将leftc 留在其中的原因。为什么百分比宽度是个坏主意？（我想我确实知道我在做什么......）
我知道，我只是说@Ch3shire 不需要它来实现效果。因为您不希望它在调整浏览器大小时改变它的宽度？我的意思是，这只会产生大量的布局问题和错误，真的会让用户感到困惑，并给人一种响应性的错误印象
我喜欢它。非常感谢。

【解决方案2】：

左边的div 被它的内容所拉伸，而不是被定义的高度。您可以使用 JavaScript 将右侧 div 的高度设置为与左侧相同的高度：

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

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

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

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

.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%;
}

<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>

【讨论】：

我想我毕竟需要使用 jQuery :) 我想知道是否有一些纯 CSS 方法。可能不会。
您可以在 CSS 中完成，但您必须稍微更改您的设计。我不知道你是否可以在你的项目中做到这一点。我的回答将适用于您当前的设计（实际上几乎任何设计）。

【解决方案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>

【讨论】：

flex-direction: row; 是默认值 - 您不需要定义它。在大多数情况下，50px 并不是 30%...
是的，我知道，但它也适用于 70% 和 30%，但在这样的布局中使用百分比是相当奇怪的，通常是个坏主意。但如果她有一个非常好的理由，她也可以使用它。
使用百分比绝对不奇怪，也不错
对于布局它是。就像我在你的答案中解释的那样
@SourceOverflow - 你还没有解释 为什么 你声称它是“奇怪的”。原因？来源引用？

【解决方案4】：

制作红边height: 100%;

.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;
}

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

</div>

【讨论】：