絕對定位的內容溢出粘頁腳

在我當前的佈局中，我將整個頁面設置爲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 
}

什麼我可以做錯誤的，或者是我可以改變，以使這項工作任何想法？

來源

2015-10-17 Keenan Payne

我在jsfiddle中玩過你的代碼，你可以檢查結果[這裏]（https://jsfiddle.net/f0468f1s/2/）。我還添加了一些內聯評論，以便您瞭解我所做的。 –

@ZiggyVerstrepen工作很好，非常感謝！ –

請使用下面的代碼。

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

來源

2015-10-17 03:02:35

絕對定位的內容溢出粘頁腳

回答

相關問題