使两个div并排放置，一个可以调整大小，另一个高度相同。

Question

使两个div并排放置，一个可以调整大小，另一个高度相同。

csshtml

6

我这里有一个与CSS高度有关的问题。

我想要创建一个布局，一个包含两个div的父div在同一行中，其中一个可以调整大小，而另一个必须适应父div的高度（与第一个div相同的高度）。

第一个div可能会有附加信息（因此我无法固定其高度），所以它将有更多的行，重要的是它不能有滚动条。第二个div必须遵守第一个div的高度，如果它比第一个div大，则会出现滚动条。

参考图片如下: https://istack.dev59.com/33zXd.webp

<div class='container'> <!-- parent -->
    <div class='left'> <!-- resizable -->
    </div>
    <div class='right'> <!-- same height as left div  -->
    </div>
</div>

未解决的代码

问题是我无法弄清如何只使用CSS来实现它。甚至只是用CSS有可能吗? 我不想使用JS。

请有人帮帮我！

- korogui

1

可调整大小是什么意思？ - Mr. Alien

1

问题在于我无法想出如何仅使用CSS来解决它。<- 那么，问题出在哪里？ - hjpotter92

1

也许他的意思是“我不能” :) - Hashem Qolami

第一个 div 可能会随着一些 Ajax 代码而增加/减少高度，即使宽度是固定的，如果一行太长，则必须断开单词，产生更多的行。 - korogui

@korogui 这里有另一个解决方案(http://jsbin.com/uyazip/1/edit)，你可能想要考虑一下。 - Hashem Qolami

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Hashbrown · Accepted Answer

Fiddle

你需要做的是将正确的元素设为绝对定位，这样它的高度就不会影响父元素的高度。

相关CSS

.container {
    background-color: gray;
    display: table;
    width: 70%;
    position:relative;
}

.container .left{
    background-color: tomato;
    width: 35%;
}

.container .right{
    position:absolute;
    top:0px;
    left:35%;
    background-color: orange;
    width: 65%;
    height:100%;
    overflow-y: auto;
}