使元素坚持专利

Question

我想在其父底部放置一个元素。我无法设置其position: absolute和bottom: 0，因为我的父div可以通过缩放或较小的显示滚动（overview-y）。如果父级其他元素不超过寡妇高度，我希望元素卡在父级的底部，否则这个子级是滚动的最后一个。

怎么可能？我应该使用js还是用css来做呢？

TNX

Answer 1

您可以使用设置为min-height的子内容容器来匹配父级的高度。在页脚的内容元素底部放置足够的填充，并使用position:absolute将页脚附加到底部。

请参阅下面的代码段。

＆＃13;

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

希望这会有所帮助

＆＃13;

＆＃13;

/**
 * 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;