How to float a div to the bottom of the page until the bottom of div is out of view-CodePudding

I made some divs that hide most of the their content in a collapsible accordion like structure. So when I press "show more" in seperate div the content container with all the content expands to display it all and at the bottom I have the button that allow me to collapse it again. Like the the Shopify appstore here has. The issues is that when there is a lot of content if pushes the button to collaspe it way down. I would be better if I could leave the "Show less" at the bottom of the window until I've scrolled past the height of the content div. I thought CSS Position: sticky; Bottom: 10px; would solve this, but no luck.

<div id="overview"  style="max-height: 140px; transition: max-height 1s ease-out 0s; bottom: 0px; padding-bottom: 15px; overflow: hidden;"><h3><span>Overview</span></h3>
<div >
    <div >
          <div >
</div>
      </div>
</div>
<div  style="position: -webkit-sticky; max-height: 140px; bottom: 0px;"><span >show more &gt;&gt;</span></div></div>

CodePudding user response：

Add a max-height to the content. Add an ::after with a linear-gradient and some js for the hide/show functionality.

const button = document.querySelector("#showButton")
const content = document.querySelector("#content")

const sM = "Show more"
const sL = "Show less"

let contentHided = true

button.addEventListener("click",(v) => {
  if (contentHided) {
    content.className = "more"
    contentHided = false
    button.textContent = sL
  } else {
    content.className = "less"
    contentHided = true
    button.textContent = sM
  }
})

#content.less {
  max-height: 100px;
  overflow: hidden;
  position: relative;
}

#content.less::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #fff 100%);
}

#content.more {
  max-height: 100%;
}

<div>
  <section id="content" >
    <article>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin rutrum elementum enim, ut blandit quam accumsan lacinia. Nullam vel tristique felis. Morbi eget venenatis nulla. Aliquam accumsan, enim sit amet efficitur suscipit, erat mi ullamcorper
        turpis, eget gravida nunc massa a lorem. Nullam malesuada ultricies felis, a sodales diam vestibulum ac. Nullam tempus facilisis est eu euismod. Praesent sed nisl quam. Nulla facilisi. Phasellus vestibulum accumsan varius. Interdum et malesuada
        fames ac ante ipsum primis in faucibus. Aliquam erat volutpat. Mauris finibus tristique dapibus. Ut accumsan orci commodo dui dignissim egestas. Suspendisse a luctus enim. Nunc ac ante lorem.</p>
    </article>
  </section>
  <section style="margin-top:10px">
    <button id="showButton">Show more</button>
  </section>
</div>

CodePudding user response：

Make the outer div as position: relative. Then you can position the div.show-less as absolute. The position of the div now depends on the outer div.

Then instead of position from the bottom, you can position from top. use css function calc to get the right position: Set the height for the div equal to 50px. and set the top: calc(100vh - 50px). vh here is the height of the view the page is displaying

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        body {
            position: relative;
        }

        .show-less {
            position: absolute;
            top: calc(100vh - 50px);
            height: 50px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="overview" 
        style="max-height: 140px; transition: max-height 1s ease-out 0s; bottom: 0px; padding-bottom: 15px; overflow: hidden;">
        <h3><span>Overview</span></h3>
        <div >
            <div >
                <div >
                </div>
            </div>
        </div>
    </div>
    <div > <span >show more &gt;&gt;</span>
    </div>
</body>

</html>