扩展可滚动div以匹配另一个div的底部 [英] extend scrollable div to match bottom of another div
问题描述
基本上，我有两列，每行具有不同高度（动态内容）的行div。在右列，底部div有一组可滚动的内容。我想做的是能够使可滚动div具有最大高度，使其底线与第一列中的div的结束。
Basically, I have two columns, each with row divs of different height (dynamic content). on the right column, the bottom div has a scrollable set of content. What I want to do is to be able to make the scrollable div have a max-height such that its bottom lines up with the end of the divs in the first column.
我在问题和如何保持并排的两个div的高度相同？是我的2个div不是从同一个开始点（由于IE的兼容性问题，我不想使用flexbox）
The biggest difference I see between my question and How do I keep two divs that are side by side the same height? is that my 2 divs do not start at the same point (and I don't want to use flexbox due to compatibility issues with IE)
非常简单的plunkr： http://plnkr.co/edit/P1yvJon24xOeb3B9as3P?p=preview
VERY simple plunkr: http://plnkr.co/edit/P1yvJon24xOeb3B9as3P?p=preview
HTML
<div class="row">
<div class="col-md-8">
<div class="row row1">randomly heighted content</div>
<div class="row row2">
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
</div>
</div>
<div class="col-md-4">
<div class="row row3">
<p>random content</p>
</div>
<div class="row row4">
<div class="scroll-container">
<div class="scroll">
<p>item1</p>
<p>item2</p>
<p>item3</p>
<p>item4</p>
<p>item5</p>
<p>item6</p>
</div>
</div>
</div>
</div>
</div>
（在plunkr中我想要item1 .... item6与红色div）
(in the plunkr I want the item1....item6 to line up with the bottom of the red div)
CSS
.row1 {
background-color: yellow;
}
.row2 {
background-color: red;
}
.row3 {
background-color: blue;
}
.row4 {
background-color: green;
}
.scroll {
overflow-y: scroll;
max-height: 100px;
}
我试过的东西：
1）设置固定高度每个div。这不工作，因为我需要的高度来改变其他div的内容。此外，内部内容不响应固定高度。
Things I've tried: 1) Setting fixed heights for each div. This doesn't work because I need the height to change with the content for the other divs. In addition, the inner content isn't responding to fixed heights.
2）我不认为我想使用表，因为a）我听说这是非常糟糕的风格b）没关系/真的不应该如果row1和row3是相同的高度
2) I don't think I want to use tables because a) I have heard it is very bad style b) It doesn't matter/really shouldn't be the case that row1 and row3 are the same height
3）Flexbox是一个问题，因为它的工作非常糟糕的百分比填充。左上角的div是一个视频，0高度padding-bottom技巧，使它预先加载空间正常。所以一个选择是找到一个围绕padding-bottom的方法，然后使用flex box。
3) Flexbox is a problem because it works very poorly in tandem with percentages padding. And the top left div is a video with the 0 height padding-bottom trick to make it preload the space properly. So one option would be to find a way around the padding-bottom trick and then use flex box.
4）奇怪的填充：100000px; margin：-1000000px;窍门没有工作，当我尝试它，但我可以只是缺少一个额外的步骤
4) The weird padding: 100000px; margin: -1000000px; trick didn't work when I tried it, however I could simply be missing an additional step
推荐答案
可能只使用HTML / CSS，因为特定div的高度需要动态确定，依赖于另一个不是其父或子的div。
I don't think this is possible using only HTML/CSS, because the height of a particular div needs to be dynamically determined that relies on another div that isn't its parent or child.
我可以使用JavaScript解决它：
Therefore I was able to solve it using JavaScript:
http：// liveweave .com / 3014aD
这些文件应该实时下载。
Here are the files should Liveweave ever go down.
index.html
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css"> <!-- Put your style.css below bootstrap, so that your custom css overrides it -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- jQuery -->
<script src="script.js"></script>
</head>
<body>
<div class="row">
<div class="col-left col-md-8"> <!-- Added col-left class here -->
<div class="row1">
<p>randomly heighted content</p>
</div>
<div class="row2">
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
<p>randomly heighted content</p>
</div>
</div>
<div class="col-right col-md-4"> <!-- Added col-right class here -->
<div class="row3">
<p>random content</p>
</div>
<div class="row4">
<div class="scroll-container">
<div class="scroll">
<p>item1</p>
<p>item2</p>
<p>item3</p>
<p>item4</p>
<p>item5</p>
<p>item6</p>
<p>item7</p>
<p>item8</p>
<p>item9</p>
<p>item10</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
.row1 {
overflow: auto;
background-color: yellow;
}
.row2 {
overflow: auto;
background-color: red;
}
.row3 {
overflow: auto;
background-color: blue;
}
.row4 {
overflow: auto;
background-color: green;
}
.scroll {
overflow-y: scroll;
}
.col-left {
padding-right: 0px !important;
}
.col-right {
padding-left: 0px !important;
}
script.js
$ b
script.js
function SetHeight() {
var left = $(".col-left").css("height");
var right = $(".row3").css("height");
var result = parseInt(left) - parseInt(right);
$(".scroll").css("height", result);
}
$(window).resize(function() {
SetHeight();
});
SetHeight(); // Call once to start off with
这篇关于扩展可滚动div以匹配另一个div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
