How to fix div position at the bottom without covering other div-CodePudding

I have 2 divs, one is accordion, second one is blue box.

I need to place blue box at the bottom of the page, so position: fixed bottom: 0; work fine, until accordion gets bigger. When accordion number of items gets huge, blue box covers the accordion, so it becomes impossible to use it.

How can i place blue box at the bottom of page without covering accordion

<!DOCTYPE html>
<html lang="en">
<body>
  <div>First div - accordion</div>
  
  <div style="position: fixed; bottom: 0">Second div - blue box</div>
</body>
</html>

Image how it looks with one item in accordion

Image how it covers accordion

Image how it suppose to look

CodePudding user response：

flexbox is a solution

body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1
}

body {
  margin: 0;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1
}

header {
  background-color: silver;
}

main {
  background-color: deepskyblue;
}

footer {
  background-color: tomato;
}

<body>
  <header>HEADING....</header>
  <main>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aut veritatis sint similique saepe, molestiae doloremque assumenda nobis deleniti praesentium explicabo, quae iste tempora! Fuga facere autem dolorem cum?</p>
  </main>
  <footer>
    <p>Footer area</p>
  </footer>
</body>

CodePudding user response：

You can use viewport to solve this, try following code:

<!DOCTYPE html>
<html lang="en">
  <body>
    <div >First div - accordion</div>

    <div >Second div - blue box</div>
  </body>
  <style>
    .accordion-div {
      width: 100%;
      height: 90vh;
      overflow: hidden;
      overflow-y: auto;
    }
    .second-div {
      position: fixed;
      bottom: 0;
    }
  </style>
</html>

Here I have set the viewport for the first div to 90vh, but you might need to use a slightly different value to fit to your application. Hope this helps!

CodePudding user response：

To place div at the bottom of the page when page is short and the screen is not filled and stay at the bottom without overlapping the content, when there is more than screenful of content, I added footer, placed div inside. Also, I added css to body and footer like this:

body {
  display: flex;
  height: 100vh;
  flex-direction: column;
}

footer {
  marging-top: auto;
}

Now "blue box" always stay at the bottom in both cases.