绝对定位内容溢出粘性页脚

Question

In my current layout I have the entire page set at 100% and the footer is positioned so that it stays at the bottom of the page no matter what. 在我当前的布局中，我将整个页面设置为100％，并且页脚的位置使其无论如何都位于页面的底部。 However, I have added a few circles in CSS to the page for my design, but when I try to absolute position them at the bottom, they seem to overflow the footer itself and I cannot figure out how to fix this issue. 但是，我在页面的设计中添加了一些CSS圆圈，但是当我尝试将它们绝对定位在底部时，它们似乎溢出了页脚本身，因此我不知道如何解决此问题。

Here is a working example: http://codepen.io/keenanpayne/pen/JYOKep 这是一个工作示例： http : //codepen.io/keenanpayne/pen/JYOKep

Here is what's currently happening: 这是当前正在发生的事情：

Here is what I want to happen: 这是我想发生的事情：

HTML: HTML：

<div class="demo">
  <div id="content">
    <h1>Heading</h1>

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
  </div>
</div>

<div class="footer">
  <p>This is a footer</p>
</div>

<div class="circle--purple"></div>
<div class="circle--gold"></div>
<div class="circle--teal"></div>

CSS: CSS：

/**
 * Demo Styles
 */

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

*,
*:before,
*:after { box-sizing: inherit; }

body { 
  background: #f2f2f2;
  position: relative;
  /* NOTE: Disabing "position: relative" allows the
           circles to stay at the bottom of the window, 
           but not the bottom of the viewport. 
  */
  margin: 0;
  min-height: 100%;
}


/**
 * Footer Styles
 */

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


/**
 * Circle Styles
 */
.circle--gold,
.circle--purple,
.circle--teal {
  border-radius: 50%;
  position: absolute;
  transition: all 150ms
}

.circle--gold,
.circle--purple,
.circle--teal {
  display: none;
  visibility: hidden
}

@media (min-width:48em) {
  .circle--gold, .circle--purple, .circle--teal {
    display: block;
    visibility: visible
  }
}

.circle--purple {
  height: 430px;
  bottom: 0;
  width: 430px;
  z-index: -1;
  background: #a177ff;
  background: linear-gradient(to top right, #a177ff 0, #FF6D92 100%);
  left: -275px
}

.circle--gold {
  height: 450px;
  width: 450px;
  z-index: -1;
  background: #FC636B;
  background: linear-gradient(to top right, #FC636B 0, #FF6D92 60%, #ffb900 100%);
  bottom: -125px;
  right: -200px
}

@media (min-width:70em) {
  .circle--purple {
    left: -200px
  }
  .circle--gold {
    bottom: -100px;
    right: 0
  }
}

.circle--teal {
  height: 430px;
  bottom: 0;
  width: 430px;
  background: #a177ff;
  background: linear-gradient(to top right, #a177ff 0, #02CEFF 100%);
  right: -300px;
  z-index: -2
}

Any ideas about what I could be doing wrong, or what I could change to make this work? 关于我可能做错了什么，或者为了进行这项工作而可能进行哪些更改的任何想法？

Answer 1

Please use the following code. 请使用以下代码。

<body>
        <div class="demo">
      <div id="content">
        <h1>Heading</h1>

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>

        <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
      </div>


    <div class="footer">
      <p>This is a footer</p>
    </div>

    <div class="circle--purple"></div>
    <div class="circle--gold"></div>
    <div class="circle--teal"></div>
    </div>

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

*,
*:before,
*:after { box-sizing: inherit; }

body { 
  background: #f2f2f2;
  position: relative;
  /* NOTE: Disabing "position: relative" allows the
           circles to stay at the bottom of the window, 
           but not the bottom of the viewport. 
  */
  margin: 0;
  min-height: 100%;
}
.demo{
    min-height:100%;
    position:relative;
    overflow:hidden;}
/**
 * Footer Styles
 */
.footer {
    width:100%;
    height:100px;
    position:absolute;
    bottom:0;
    left:0;
  padding: 1rem;
  background-color: #ccc;
  text-align: center;
}

#content{
    padding-bottom:100px;}
/**
 * Circle Styles
 */
.circle--gold,
.circle--purple,
.circle--teal {
  border-radius: 50%;
  position: absolute;
  transition: all 150ms
}

.circle--gold,
.circle--purple,
.circle--teal {
  display: none;
  visibility: hidden
}

@media (min-width:48em) {
  .circle--gold, .circle--purple, .circle--teal {
    display: block;
    visibility: visible
  }
}

.circle--purple {
  height: 430px;
  bottom: 0;
  width: 430px;
  z-index: -1;
  background: #a177ff;
  background: linear-gradient(to top right, #a177ff 0, #FF6D92 100%);
  left: -275px
}

.circle--gold {
  height: 450px;
  width: 450px;
  z-index: -1;
  background: #FC636B;
  background: linear-gradient(to top right, #FC636B 0, #FF6D92 60%, #ffb900 100%);
  bottom: -125px;
  right: -200px
}

@media (min-width:70em) {
  .circle--purple {
    left: -200px
  }
  .circle--gold {
    bottom: -100px;
    right: 0
  }
}

.circle--teal {
  height: 430px;
  bottom: 0;
  width: 430px;
  background: #a177ff;
  background: linear-gradient(to top right, #a177ff 0, #02CEFF 100%);
  right: -300px;
  z-index: -2
}

绝对定位内容溢出粘性页脚

问题描述

1 个解决方案

解决方案1
0 2015-10-17 03:02:35

绝对定位内容溢出粘性页脚

问题描述

1 个解决方案

解决方案1 0 2015-10-17 03:02:35

解决方案1
0 2015-10-17 03:02:35