Сделать элемент придерживаться нижней части патента

Question

Я хочу поместить элемент в родительское основание. Я не могу установить его position: absolute а также bottom: 0 потому что мой родительский div может быть прокручен (обзор-у) при увеличении или на меньших экранах. Я хочу, чтобы элемент застрял в нижней части родительского элемента, если другие родительские элементы не превышают высоту вдовы, в противном случае этот дочерний элемент будет последним при прокрутке.

как это возможно? я должен использовать JS или в любом случае, чтобы сделать это с помощью CSS?

Тпх

Answer 1

Вы можете использовать дочерний контейнер содержимого с min-height установить в соответствии с высотой родителя. Поместите достаточное количество отступов внизу элемента содержимого для нижнего колонтитула и используйте position:absolute прикрепить нижний колонтитул к основанию.

Смотрите фрагмент ниже.

$('.toggle').on('click', function() {
  $('.grey').toggleClass('big');
});

.parent {
  border: 1px solid black;
  overflow: auto;
  height: 400px;
}

.content .grey {
  height: 40px;
  margin-bottom: 5px;
  background: grey;
}

.content .grey.big {
  height: 80px;
  margin-bottom: 5px;
  background: grey;
}

.content footer {
  height: 40px;
  background: orange;
  position: absolute;
  bottom: 5px;
  left: 5px;
  right: 5px;
}

.content {
  position: relative;
  min-height: 100%;
  box-sizing: border-box;
  padding: 5px 5px 45px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <button class="toggle">Toggle</button>
</p>
<div class="parent">
  <div class="content">
    <div class="grey"></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <div class="grey"></div>
    <footer></footer>
  </div>
</div>

Answer 2

Надеюсь, это поможет

/**
 * Demo Styles
 */

html {
  height: 100%;
  box-sizing: border-box;
}



body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.demo {
  margin: 0 auto;
  padding-top: 64px;
  max-width: 640px;
  width: 94%;
  min-height:1000px;
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>

  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>
  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
  
</div>

<div class="footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div>