How to adapt content to a fixed bottom container?

user_9856049 0
Viewed 61

I have a container with position fixed at the bottom of the page, and I would like that the content above it (a long paragraph in this case) will be visible to its end when scrolling until the bottom.

I created a working example of this on Codepen: https://codepen.io/omerh3/pen/JjLXdpP

HTML:

<div>
    <div class="content">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. A saepe repudiandae consequatur id? Dicta eaque, unde maxime deserunt harum modi ex nobis impedit tempora dolor sit laborum voluptates repellat pariatur consequatur perferendis sed laudantium cumque laboriosam, necessitatibus culpa provident, delectus natus dolorem? Fugit ducimus quos eligendi ratione dicta voluptatum error.
      </p>
  </div>
  <div class="bottom-content">
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
  </div>
</div>

CSS:

p {
  font-size: 6rem;
}

.content {
  margin-bottom: 500px;
}

.bottom-content {
  position: fixed;
  bottom: 0;
  background-color: green;
}

button {
  width: 250px;
  height: 250px;
}

This is working thanks to margin-bottom: 500px, however since it's hard coded, when resizing the width of the page, the height of the content of the bottom container will naturally increase, and the above content won't be fully seen. How can I dynamically adapt the above content so it's always completely visible when scrolling to the bottom?

Media queries are of course an option but I'm curious to find out if there's a more elegant way

css html
2 Answers

This is a pattern I use very often. I create a flex column as the parent, then have what I call a "dynamic body" class that grows to the available space and scrolls internally by setting flex-grow: 1; overflow: auto; . this allows me to put elements above or below (search, header, footer, etc) and the main body section just "fills" in height to adapt.

Mind the height of your container column though... it needs to be defined somehow. In this demo I just set it as position: fixed and set it to the height and width of the window.

See -

p {
  font-size: 6rem;
}

.column {
  display: flex;
  flex-flow: column;
  overflow: hidden;
  border: solid 1rem red;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.content {
  flex-grow: 1;
  overflow: auto;
  border: solid .5rem yellow;
}

.bottom-content {
  border: solid .5rem limegreen;
}

button {
  width: 50px;
  height: 50px;
}
<div class="column">
    <div class="content">
      <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. A saepe repudiandae consequatur id? Dicta eaque, unde maxime deserunt harum modi ex nobis impedit tempora dolor sit laborum voluptates repellat pariatur consequatur perferendis sed laudantium cumque laboriosam, necessitatibus culpa provident, delectus natus dolorem? Fugit ducimus quos eligendi ratione dicta voluptatum error.
      </p>
  </div>
  <div class="bottom-content">
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
  </div>
</div>

user_195052570

You can using min-height: 100vh; instead of margin-bottom: 500px; on your .content class. Then change position:fixed to position:sticky in .bottom-content and add a global CSS reset class.

/* reset CSS */
*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* new parent class */
.wrapper {
  min-height: 100vh;
  display: flex;
  flex-flow: column;
  position: relative;
}

.content {
  flex: 1 0 100%; /* new line */
  /* margin-bottom: 500px; */
}

.bottom-content {
  position: sticky; /* changed */
  bottom: 0;
  background-color: green;
}


*,
::after,
::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* new parent class*/
.wrapper {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
}

p {
  font-size: 6rem;
}

.content {
  flex: 1 0 100%; /* new line */
  /* margin-bottom: 500px; */
}

.bottom-content {
  position: sticky; /* changed */
  bottom: 0;
  background-color: green;
}

button {
  width: 250px;
  height: 250px;
}
<div class="wrapper">
  <div class="content">
    <p>
      Lorem ipsum, dolor sit amet consectetur adipisicing elit. A saepe repudiandae consequatur id? Dicta eaque, unde maxime deserunt harum modi ex nobis impedit tempora dolor sit laborum voluptates repellat pariatur consequatur perferendis sed laudantium cumque
      laboriosam, necessitatibus culpa provident, delectus natus dolorem? Fugit ducimus quos eligendi ratione dicta voluptatum error.
    </p>
  </div>
  <div class="bottom-content">
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
    <button>A</button>
  </div>
</div>

user_155451160
Related