Question

在我目前的布局中，我将整个页面设置为100％，并且页脚的位置使其无论如何都保持在页面底部。但是，我在CSS中为我的设计添加了几个圆圈，但是当我尝试将它们绝对放在底部时，它们似乎溢出了页脚本身，我无法弄清楚如何解决这个问题。

以下是一个工作示例：http://codepen.io/keenanpayne/pen/JYOKep

以下是目前正在发生的事情：

以下是我想要发生的事情：

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：

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

关于我可能做错了什么的想法，或者我可以改变什么来使这项工作？

Answer 1

请使用以下代码。

<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 个答案: