在css

Question

我有2个div。第一个div有一个内容，可以改变，即我不能在css中指定它的高度。这就是为什么我总是这样说： Height: auto; div1的内容是动态的，然后高度变化。

我有第二个div通常会有比div1更多的文本。我希望div 2适合div1的高度，并在y轴上有一个滚动条。 滚动应该只在div2中 我该怎么办？

https://jsfiddle.net/7jcozszx/

.div1{
  background:blue;
  height: auto;
  width: 300px;
  display:inline-block;
  float:left;
}

.div2{
  background:red;
  height: 300px; /*height of div1 */
  width: 300px;
  display:inline-block;
  overflow-y:scroll;
}

<div class='div1'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, 
  aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam 
  deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga 
  maiores dicta rerum!
</div>

<div class='div2'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, 
  aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam 
  deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga 
  maiores dicta rerum!

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, 
  aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam 
  deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga 
  maiores dicta rerum!
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sint 
  cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad 
  deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id 
  quidem nemo!
</div>

Answer 1

我会使用FlexBox。

.container {
  display: flex;
}

.div1 {
  background: blue;
  width: 300px;
}

.div2 {
  background: red;
  height: 300px;
  width: 300px;
  overflow-y: scroll;
}

<div class="container">
  <div class='div1'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!
  </div>

  <div class='div2'>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
    sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Accusamus sint cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id quidem nemo!
  </div>
</div>

确保您只需添加.container。

预览

FlexBox浏览器支持： http://caniuse.com/flexbox

Answer 2

使用position:absolute;和height:100%

设置第二个div

这样，只有第一个div控制容器的高度。

body {
  position: relative;
}

.div1 {
  background: blue;
  width: 300px;
}

.div2 {
  background: red;
  width: 300px;
  height: 100%;
  position: absolute;
  left: 300px;
  top: 0;
  overflow-y: auto;
}

<div class='div1'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
</div>

<div class='div2'>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor
  sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum! Lorem ipsum dolor sit amet, consectetur
  adipisicing elit. Accusamus sint cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id quidem nemo!
</div>

Updated fiddle

Answer 3

如果您不想为div1的高度设置固定高度，则可以使用JS计算div1的高度并将其应用于{{ 1}}。

div2

Answer 4

我通过将div2放在div1中来改变你的html。使它成为div2的绝对。通过这个div2取div1的高度。请查看下面的代码以获得更多理解。你也可以使用flexbox。

.div1{
  background: blue;
    height: 100%;
    width: 300px;
    display: inline-block;
    float: left;
    position: relative;
}

.div2{
    background: red;
    /* max-height: 300px; */
    width: 300px;
    display: inline-block;
    overflow-y: scroll;
    position: absolute;
    top: 0;
    right: -300px;
    bottom: 0;
}

<div class='div1'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!

<div class='div2'>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, omnis, aperiam. Aliquid sed reprehenderit recusandae! Culpa accusantium numquam deleniti cupiditate, esse enim consequuntur, nesciunt laborum fugit, fuga maiores dicta rerum!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus sint cumque earum at nihil! Accusamus, perspiciatis molestias. Odio vitae ad deserunt deleniti repudiandae blanditiis tenetur dignissimos, quisquam, id quidem nemo!
</div>
</div>