css - 将表单固定到底部居中，宽度灵活，按钮固定

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/