將窗體固定到以柔性寬度和固定按鈕爲中心的底部

Question

如何在保留輸入欄的靈活寬度並使其居中的情況下，如何在此jsfiddle中將窗體固定到頁面的底部？

我已經嘗試了幾個小時的代碼搞亂了...我一直在繼續希望我會找到解決方案。

______________________________________________ 
|           | 
|           | 
|   [blank page until filled]   | 
|           | 
|           | 
| [flexible input field][fixed button] | 
‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾ 

http://jsfiddle.net/nWCT8/1/

CSS

#searchbar { 
position: fixed; 
top: 20px; 
left: 0; 
width: 100%; 
margin-left: auto; 
margin-right: auto; 
text-align: center; 
} 

.input-wrapper { 
position: absolute; 
right: 110px; 
left: 0px; 
top : 0px; 
bottom: 0px; 
} 

/* Form wrapper styling */ 
.form-wrapper { 
position: relative; 
left: 0px; 
top: 0px; 
width: 50%; 
height: 37px; 
display: inline-block; 
} 

.form-wrapper input { 
height: 100%; 
width: 100%; 
padding: 8px 10px; 
float: left; 
color: #1f1f9d; 
border: 0; 
background: #e6e6e6; 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 
} 

/* Form submit button */ 
.form-wrapper button { 
position: absolute; 
right: 0px; 
top: 0px; 
overflow: visible; 


border: 0; 
padding: 0; 
cursor: pointer; 
height: 37px; 
width: 104px; 
color: #ffffff; 
background: red; 
} 


.form-wrapper button::-moz-focus-inner { /* remove extra button spacing Mozilla Firefox */ 
border: 0; 
padding: 0; 
}  

HTML

<div id="searchbar"> 
     <form class="form-wrapper"> 
      <div class="input-wrapper"> 
       <input type="text" placeholder="Input text here"/> 
      </div> 
      <button type="submit">Search</button> 
     </form> 
    </div> 

Answer 1

變化#searchbar位置具有從bottom的偏移而不是top

#searchbar { 
    bottom: 20px; 
    ... 
} 

#searchbar { 
 
    position: fixed; 
 
    bottom: 20px; 
 
    left: 0; 
 
    width: 100%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    text-align: center; 
 
} 
 
.input-wrapper { 
 
    position: absolute; 
 
    right: 110px; 
 
    left: 0px; 
 
    top: 0px; 
 
    bottom: 0px; 
 
} 
 
/* Form wrapper styling */ 
 

 
.form-wrapper { 
 
    position: relative; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 50%; 
 
    height: 37px; 
 
    display: inline-block; 
 
} 
 
.form-wrapper input { 
 
    height: 100%; 
 
    width: 100%; 
 
    padding: 8px 10px; 
 
    float: left; 
 
    color: #1f1f9d; 
 
    border: 0; 
 
    background: #e6e6e6; 
 
    -webkit-box-sizing: border-box; 
 
    /* Safari/Chrome, other WebKit */ 
 
    -moz-box-sizing: border-box; 
 
    /* Firefox, other Gecko */ 
 
    box-sizing: border-box; 
 
    /* Opera/IE 8+ */ 
 
} 
 
/* Form submit button */ 
 

 
.form-wrapper button { 
 
    position: absolute; 
 
    right: 0px; 
 
    top: 0px; 
 
    overflow: visible; 
 
    border: 0; 
 
    padding: 0; 
 
    cursor: pointer; 
 
    height: 37px; 
 
    width: 104px; 
 
    color: #ffffff; 
 
    background: red; 
 
} 
 
.form-wrapper button::-moz-focus-inner { 
 
    /* remove extra button spacing for Mozilla Firefox */ 
 
    border: 0; 
 
    padding: 0; 
 
}

<div id="searchbar"> 
 
    <form class="form-wrapper"> 
 
    <div class="input-wrapper"> 
 
     <input type="text" placeholder="Input text here" /> 
 
    </div> 
 
    <button type="submit">Search</button> 
 
    </form> 
 
</div>

的jsfiddle：http://jsfiddle.net/azizn/fmg7dzyp/

Answer 2

像這樣：

http://jsfiddle.net/tobyl/L2jeepx0/1/

CSS補充說：

#searchbar { 
    position: fixed; 
    bottom: 20px; 
    left: 0; 
    width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
    text-align: center; 
}