固定按鈕在相對滾動內容的郵遞

Question

我有一個非常奇怪的css定位問題。我需要的是一個可滾動的居中div底部的固定按鈕。在Sceenshot上你會看到結果應該如何。我嘗試了位置：固定。但是，該按鈕將顯示在整個網站上。但它應該在寬度爲100％的div內。

我真的是如何給我看一個例子！

謝謝所有支持者。

Screenshot

Answer 1

我做了這樣的事情最近

小提琴：https://jsfiddle.net/rtxxkjak/

它涉及具有外格，然後保存這些內容你想成爲滾動內股利。然後，按鈕被固定爲內容的div

片段的底部：（高度可能是一個問題）

.top { 
 
    height: 340px; 
 
    width: 340px; 
 
} 
 

 
.container{ 
 
    background: red; 
 
    overflow: scroll; 
 
    max-height: 90%; 
 
    max-width: 100%; 
 
} 
 

 
#button{ 
 
    z-index: 4; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    height: 100px; 
 
    background: blue; 
 
    margin-bottom: 10px; 
 
    color: white; 
 
} 
 

 
button { 
 
    display: block; 
 
    width: 100%; 
 
    background: black; 
 
    height: 10%; 
 
    color: white; 
 
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<div class="top"> 
 

 
<div class="container"> 
 
    <ul> 
 
    <li>Lorem Ipsum</li> 
 
    <li>Lorem Ipsum</li> 
 
    <li>Lorem Ipsum</li> 
 
    <li>Lorem Ipsum</li> 
 
    <li>Lorem Ipsum</li> 
 
    <li>Lorem Ipsum</li> 
 
    <li>Lorem Ipsum</li> 
 
    <li>Lorem Ipsum</li> 
 
    <li>Lorem Ipsum</li> 
 
    <li>Lorem Ipsum</li> 
 
       
 
    </ul> 
 
</div> 
 
    <button id="button" type="submit">Submit</button> 
 

 
</div>

希望這有助於！