HTML:
<div class="block">
<div class="header">Some text</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
</p><p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque voluptatibus reprehenderit dolorum, ipsam in cumque dicta nisi voluptate fugiat ratione animi. Sint voluptas quod omnis ex magni consequuntur, natus perferendis.
</p>
</div>
</div>
CSS:
.block {
width: 800px;
height: 200px;
border: 1px solid red;
overflow-y: auto;
}
.content {
overflow-y: auto;
}
I want only the "content" to scroll, I can’t set a height to the header part because it’s dynamic, so I can’t also use position absolute, is there a way to achieve this?
2
Answers
You can put
<div class="header">Some text</div>
before<div class="block">
.Or you can remove the
.block
part from your CSS file and update it as below.Use a grid with two rows. Set
grid-template-rows: auto 1fr
, which means the first row will adjust to fit its contents, and the second row will adjust to fill the remaining space.Then you just need to set
height: 100%
on your.content
, and voila!