Question

我有点失落...... 我想制作2列，其中左列可滚动，具体取决于右列的大小这是我在jsfiddle的例子： http://jsfiddle.net/6f3bwrh7/

在我的情况下，我希望红色列（具有滚动）与绿色列具有相同的高度我试过这样的事情：

  overflow:auto;

但我认为我完全错了

Answer 1

如果你想要两列，只有一个可滚动，你可以在其中一列上使用position: fixed。像这样：

body {
  margin: 0;
  padding: 0;
}

.left {
  width: 50%;
}

.left {
  position: fixed;
}

.right {
  padding-left: 50%;
}

.left img {
  height: auto;
  max-width: 100%;
  outline: 0;
}

<div class="left">
  <p>
    Hello
  </p>
</div>
<div class="right">
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
  <p>Long contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong contenLong content</p>
</div>

Answer 2

尝试改变这一点：

overflow: auto;

到这个

overflow-y: scroll;

css

Answer 3

它可以使div具有相同的高度，但是根据哪个具有更高的高度。

您可以将flex添加到父容器中，并且2个div将具有相同的高度。但在你的情况下，它将是左列的高度，因为它具有更高的高度。

#wrapper {
  display: flex; /* equal height of the children */
}

否则，我建议使用javascript获取正确div的'scrollheight'，并将其应用于左div。

Answer 4

要使两列的高度相同，您可以在display:grid;上使用display:flex;或#wrapper。

但据我所知，你想把较大元素的高度设置为较小元素的高度。为此，您必须使用javascript或在CSS中使用固定高度。

Answer 5

检查输出：

#left-block{
  float:left;
  width:30%;
  background-color:red;
  overflow:auto;
}

#right-block{
  float:right;
  width:70%;
  background-color:green;
}

.row {
  display: flex; /* equal height of the children */
}

.col {
  flex: 1; /* additionally, equal width */
  padding: 1em;
}

<div id='wrapper' class='row'>
  <div id='left-block' class='col'>
    <div class='elmt'>
    elmt 1
    </div>
    <div class='elmt'>
    elmt 2
    </div>
    <div class='elmt'>
    elmt 3
    </div>
     <div class='elmt'>
    elmt 4
    </div>
    <div class='elmt'>
    elmt 5
    </div>
    <div class='elmt'>
    elmt 6
    </div>
        <div class='elmt'>
    elmt 7
    </div>
    <div class='elmt'>
    elmt 8
    </div>
    <div class='elmt'>
    elmt 9
    </div>
  </div>
  <div id='right-block' class='row'>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas minus commodi repellat voluptatum odit quos excepturi fugiat quia distinctio harum pariatur inventore possimus minima sequi, enim eius, cupiditate, perferendis accusantium.
  </div>
  <div style='clear:both'>
  
  </div>
</div>

两列，一个可滚动

5 个答案: