I'm trying to implement a ui:scrollerWrapper for a Lightning Component in a quick action in the Salesforce app.

I'd like to have a scrollable section that occupies 60% of the screens height, so I can have buttons above and below it that are always on the screen.

I can set a static height as per the documentation but I don't know how to make it relative, e.g. 60% of whatever the screen's height is. Is this possible?

  • Have been able to add the dynamic height? – vanessen Jul 23 '19 at 17:45

I'm not sure if it will work for lightning component but in html you can use overflow.


<div class="fixedHeightContainer">
  <div class="header">Header</div>
    <div class="content">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo sit autem dolor 
      assumenda, culpa ea tenetur qui mollitia placeat quisquam? Sed vel vitae magnam 
      libero doloribus consectetur atque repellat repellendus. Lorem ipsum dolor sit 
      amet consectetur adipisicing elit. Enim, quaerat sed corporis quia possimus 
      totam incidunt perspiciatis officiis iusto dolorum aspernatur voluptatem   
      ratione. Dolores, ea sit.
  <div class="footer">


  height: 300px;
  width: 10%;
  padding: 10px;
  background: lightblue;

  height: 60%;
  overflow: auto;
  background: #fff;

.footer {
  height: 20%;

.header {
  height: 20%;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.