Let div with height auto and with the bottom set

Asked

Viewed 45 times

1

Is there any way to leave the div with the bottom set without it leaving the height: 100%?

While there is little content (as in the example), the height should stay auto, but when there is enough content, you will not be able to touch the bottom of the screen (therefore the bottom: 10px).

The problem is that when I bottom, automatically the height occupies every screen (even leaving it auto).

There’d be some way around it?

ul {
  margin: 0;
  position: fixed;
  right: 10px;
  top: 10px;
  bottom: 10px;
  width: 70%;
  background-color: red;
  max-height: 100%;
  height: auto;
  overflow: auto;
}
<ul>
  <li>
    <a href="#">Test</a>
  </li>
  <li>
    <a href="#">Test2</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
</ul>

html css

  • Guy if the element is at 10px from the top of the page and 10px from the bottom logically it will take up all the space feel from that range

  • @hugocsl, I get it, that way then it won’t work. But you get the idea? There would be some way to make it work without having to add another parent div (I thought I’d go around like this)?

  • @Sam, I ended up solving with JS even. I couldn’t find another way with CSS.

  • I think with jQuery it would be easier

2 answers

2


One solution is to use the function calc() in the max-height (then you don’t need the bottom and of height).

Just subtract the 100vh (height of the viewport) by 20px (distance from the top + desired distance from the bottom):

max-height: calc(100vh - 20px);

If there is some other property of spacing in the element, such as padding-top or padding-bottom, these values must be added to the 20px. For example, if the widget has a padding: 20px, would be:

max-height: calc(100vh - 60px);

That is, the 20px normal + 20px of padding-top + 20px of padding-bottom, totalling 60px.

See an example without the padding:

ul {
  margin: 0;
  position: fixed;
  right: 10px;
  top: 10px;
  width: 70%;
  background-color: red;
  max-height: calc(100vh - 20px);
  overflow: auto;
}
<ul>
  <li>
    <a href="#">Test</a>
  </li>
  <li>
    <a href="#">Test2</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test10</a>
  </li>
</ul>

Now an example with padding:

ul {
  margin: 0;
  position: fixed;
  right: 10px;
  top: 10px;
  width: 70%;
  background-color: red;
  max-height: calc(100vh - 60px);
  overflow: auto;
  padding: 20px;
}
<ul>
  <li>
    <a href="#">Test</a>
  </li>
  <li>
    <a href="#">Test2</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test3</a>
  </li>
  <li>
    <a href="#">Test10</a>
  </li>
</ul>

0

Hello, use max-height: 90vh; in place of max-height: 100%; so the list will use at most 90/100 of the page viewport height, change the value as you like so that the list fits well to the screen size.

ul {
  margin: 0;
  position: fixed;
  right: 10px;
  top: 10px;
  bottom: 10px;
  width: 70%;
  background-color: red;
  max-height: 90vh;
  height: auto;
  overflow: auto;
}
<ul>
  <li>
<a href="#">Test</a>
  </li>
  <li>
<a href="#">Test2</a>
  </li>
  <li>
<a href="#">Test3</a>
  </li>
  <li>
<a href="#">Test</a>
  </li>
  <li>
<a href="#">Test2</a>
  </li>
  <li>
<a href="#">Test3</a>
  </li>
  <li>
<a href="#">Test</a>
  </li>
  <li>
<a href="#">Test2</a>
  </li>
  <li>
<a href="#">Test3</a>
  </li>
  <li>
<a href="#">Test</a>
  </li>
  <li>
<a href="#">Test2</a>
  </li>
  <li>
<a href="#">Test3</a>
  </li>
  <li>
<a href="#">Test</a>
  </li>
  <li>
<a href="#">Test2</a>
  </li>
  <li>
<a href="#">Test3</a>
  </li>
  <li>
<a href="#">Test</a>
  </li>
  <li>
<a href="#">Test2</a>
  </li>
  <li>
<a href="#">Test3</a>
  </li>
  <li>
<a href="#">Test</a>
  </li>
  <li>
<a href="#">Test2</a>
  </li>
  <li>
<a href="#">Test3</a>
  </li>
  <li>
<a href="#">Test</a>
  </li>
  <li>
<a href="#">Test2</a>
  </li>
  <li>
<a href="#">Test3</a>
  </li>
  <li>
<a href="#">Test</a>
  </li>
  <li>
<a href="#">Test2</a>
  </li>
  <li>
<a href="#">Test3</a>
  </li>
</ul>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.