Sticking a div with 2 rows of 6 elements to the bottom of the viewport, centered and sizing with the-CodePudding

None of the other answers I can find seem to work for me, but thought I'd ask anyway. I'm trying to get 2 rows of 6 elements to the bottom of the page and stick them there as the page scrolls. If I do it like the following, with a table, it almost works.

.center {
  position: -webkit-sticky;
  /* Safari */
  position: sticky;
  bottom: 10px;
  margin-bottom: 10px;
  flex-shrink: 2;
  padding-bottom: 10px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<div >
  <table border="1" >
    <tr>
      <th>
        <h4>Val1</h4>
      </th>
      <th>
        <h4>Val2</h4>
      </th>
      <th>
        <h4>Val3</h4>
      </th>
      <th>
        <h4>Val4</h4>
      </th>
      <th>
        <h4>Val5</h4>
      </th>
      <th>
        <h4>Val6</h4>
      </th>
    </tr>
    <tr>
      <th>
        <input type="text" />
      </th>
      <th>
        <input type="text" />
      </th>
      <th>
        <input type="text" />
      </th>
      <th>
        <input type="text" />
      </th>
      <th>
        <input type="text" />
      </th>
      <th>
        <input type="text" />
      </th>
    </tr>
  </table>
</div>

Any helpful tips on how to achieve what I want would be gratefully received!

Thanks

CodePudding user response：

You don't need any external CSS for this (except the spacer that I added to demonstrate that this works). I'd recommend using a flex-box so you can wrap the elements when the screen size shrinks rather than lose them to the sides or scale them down to the point where the input fields would be too small to be useful.

The fixed-bottom part was working and that's really all you need for that. If you scroll, you'll see that the bottom section stays at the bottom.

I'd also suggest removing the default padding from the input fields just so it doesn't mess with the layout, hence the p-0 on each one.

.spacer {
  height: 1000px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<body >
  <div >
  </div>
  <div >
    <div >
      <h4>Val1</h4>
      <input  type="text" />
    </div>
    <div >
      <h4>Val2</h4>
      <input  type="text" />
    </div>
    <div >
      <h4>Val3</h4>
      <input  type="text" />
    </div>
    <div >
      <h4>Val4</h4>
      <input  type="text" />
    </div>
    <div >
      <h4>Val5</h4>
      <input  type="text" />
    </div>
    <div >
      <h4>Val6</h4>
      <input  type="text" />
    </div>
  </div>
</body>

CodePudding user response：

Set .keepAtBottom to position:fixed and set bottom:0 and as u have mentioned you can set same value to both left and right currently I have just set it to 0 ou can increase it as per your need and just give same positive value to both left and right

.keepAtBottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f5f5f5;
}

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<div >
  <div >
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nisi nunc, vehicula nec congue sit amet, convallis non ante. Quisque tortor eros, lobortis auctor magna eu, rhoncus molestie velit. Nulla sapien enim, tristique vel vestibulum vitae, dapibus
      at nisi. Morbi tempus accumsan felis, dapibus consectetur augue varius ac. Curabitur in purus eros. Etiam a magna ipsum. Aenean est augue, congue a dui ut, pulvinar convallis est. Nam eget commodo justo. Sed malesuada metus ante, ut sodales dui
      egestas nec. Nulla sed pharetra sem. Pellentesque nec ipsum iaculis, porttitor elit et, pharetra velit. Sed id metus ultrices, vulputate nulla id, efficitur ante. Morbi eget ultrices libero. In eget commodo velit. Integer lacinia efficitur vulputate.
      Phasellus quis euismod leo. Maecenas laoreet tempor leo, at interdum purus euismod nec. Suspendisse potenti. Sed eu erat tortor. Nam dictum aliquet arcu non aliquet. Nulla non fermentum sem. Duis mollis eros ac facilisis posuere. Nullam ipsum turpis,
      bibendum a odio ut, lacinia facilisis ante. Nulla ultricies lacinia hendrerit. Aenean vitae varius lectus. Nulla facilisi. Nunc mattis pretium dui at pretium. Integer in sem pretium est tempus semper ut nec mi. Maecenas consequat ex at arcu elementum
      semper. In metus sem, tempor in consectetur in, porta nec turpis. Quisque facilisis nisi at ultrices aliquet. Aliquam vitae nisi quis eros condimentum sodales. Suspendisse quis auctor mauris. Aliquam aliquam neque sit amet urna venenatis, in tristique
      lorem condimentum. Suspendisse nibh quam, pellentesque ac mi porttitor, faucibus sagittis elit. Nam cursus nunc eget ligula fringilla, non pretium lacus porta. Vestibulum maximus elit id euismod convallis. Morbi molestie mi sem, non tincidunt libero
      scelerisque sed. Donec mattis sed massa eu maximus. Sed pulvinar eu libero sed rutrum. Mauris tristique tellus gravida libero varius cursus. Proin convallis elit in dui aliquam, a euismod erat imperdiet. Donec pharetra tempus nisi, a congue urna
      cursus congue. Sed semper accumsan sem et viverra. Sed convallis sodales nisl, sed vulputate erat lacinia ac. Quisque nunc lectus, finibus nec nunc in, ultrices bibendum justo. Curabitur elit erat, iaculis ac justo in, iaculis consectetur nibh.
      Pellentesque consequat enim in turpis tincidunt consequat. Suspendisse faucibus purus tellus, hendrerit molestie magna volutpat a. Nullam egestas pulvinar diam, ut dictum sapien faucibus a. Ut sit amet ornare mauris. Nam eget dui in quam faucibus
      porttitor. Nulla sodales nulla nulla, sit amet pretium ipsum aliquet vitae. Vivamus laoreet commodo aliquet. Proin vitae mauris malesuada, vulputate risus a, semper risus. Nullam nec luctus dui, non pharetra neque. Morbi mauris neque, aliquam gravida
      velit quis, molestie viverra nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce imperdiet ultricies mauris a tempus. Maecenas nec diam ut ante viverra pulvinar non eget arcu. Sed dui justo, varius
      et arcu nec, hendrerit tempor arcu. Sed ornare at sem in pharetra. Vivamus vitae mi et quam fringilla convallis. Nam tempor, nunc eu porttitor pellentesque, diam nisl condimentum lectus, eget ultricies quam nulla eget odio. Sed vehicula purus sem,
      nec mollis sem luctus eget. Proin porta nulla gravida, tempus leo et, porttitor elit. Suspendisse sit amet pretium justo, at convallis mauris. Nullam sit amet nisl maximus, pellentesque nulla non, consectetur odio. Nam sed nulla sit amet felis mattis
      rhoncus. Proin dui odio, finibus at vehicula in, gravida nec lacus. Sed sit amet cursus arcu. Nullam pharetra sed eros id pellentesque. Ut laoreet iaculis luctus. Praesent sed lorem sem. Vestibulum quis libero euismod, bibendum dolor ut, finibus
      tortor. Pellentesque in pulvinar tortor. Cras vitae luctus elit. Nunc turpis ipsum, finibus at viverra non, ornare et diam. Cras finibus mattis lacus, vel scelerisque orci maximus quis. Class aptent taciti sociosqu ad litora torquent per conubia
      nostra, per inceptos himenaeos. Vivamus sem arcu, viverra vel scelerisque quis, maximus interdum ante. Aliquam auctor leo sed massa aliquet, pulvinar tempor diam malesuada. Sed hendrerit nibh id tellus molestie, at aliquam elit pharetra. Maecenas
      et feugiat ipsum. Duis sed nunc ipsum. Vestibulum at arcu ipsum. Nulla at orci erat. Donec vestibulum, risus vitae placerat ullamcorper, libero ligula laoreet felis, a condimentum mi purus vitae risus. Nam diam magna, mattis et finibus at, placerat
      sed leo. Donec quis elementum nibh. Donec luctus interdum ex, non malesuada mi eleifend eu. Nunc laoreet in arcu ac dignissim. Vivamus efficitur sed purus vel iaculis. Mauris sit amet lobortis mauris. Mauris lobortis sodales lacus sed vehicula.
      Suspendisse potenti. Mauris lobortis urna eu ligula pretium porta. In bibendum a risus nec sagittis. Nullam eget consectetur lectus. In ex sapien, tempus eget magna vel, tempor porta tortor. Fusce id dignissim ex. Cras finibus libero vitae fringilla
      pretium.
    </p>
  </div>
  <div >
    <div >
      <h1>value
      </h1>
      <input type="text"  />
    </div>
    <div >
      <h1>value
      </h1>
      <input type="text"  /></div>
    <div >
      <h1>value
      </h1>
      <input type="text"  /></div>
    <div >
      <h1>value
      </h1>
      <input type="text"  /></div>
    <div >
      <h1>value
      </h1>
      <input type="text"  /></div>
    <div >
      <h1>value
      </h1>
      <input type="text"  /></div>
  </div>
</div>