我有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>
答案 0 :(得分: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
答案 1 :(得分:1)
使用position:absolute;
和height:100%
这样,只有第一个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>
答案 2 :(得分:0)
如果您不想为div1
的高度设置固定高度,则可以使用JS计算div1
的高度并将其应用于{{ 1}}。
div2
答案 3 :(得分:0)
我通过将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>