Html CSS输入字段&-系统的按钮位置

我有一个问题，将一个大小可变的输入字段和一个大小固定的post按钮定位在一个具有固定“外部边距”的div中

我提供了一个可以看到错误版本的窗口。

在这里您可以看到我的问题：

错误版本：

“应为”版本：

文字说明：

正如你在第二张图中所看到的，底部始终位于底部对我来说很重要

.submitform {
    display: block;
    position: fixed;
    bottom: 0;
    ...more on jfiddle...
}

。。。而post按钮总是在右边。底部零件左右两侧的间隙应与上部零件相同。困难的是，inputfield应该具有灵活的大小，但应该占据左侧间隙和post按钮之间的所有空间

我希望你能帮助我，因为我在网上花了几个小时的时间尝试和搜索并没有找到正确的解决方案。

试试这个：

要使文本框填充宽度，可以使用相同的技术：

---

为什么

宽度：87%在
.submitform
上？你不希望它像问题一样宽吗？@KatieK他希望元素固定在底部。如果他不设置宽度（或
左
/
右
），元素将折叠到它包含的两个输入的宽度。@shmiddy-那么为什么不
宽度：100%
以及
框大小：边框框
？@KatieK，因为边框框不考虑边距。问题是，输入字段在较大屏幕上保持为较小。它没有填满post按钮的空间（正如您在第二张图片上看到的，它应该调整大小）。您不能将“宽度：100%”添加到输入字段中，因为这将按下下一行中的post按钮。
.submitform {
    background: white;
    display: block;
    position: fixed;
    /* Instead of applying margin and width, simply set the bottom, left, 
       and right properties to 13px */
    bottom: 13px;  
    left: 13px;
    right: 13px;
    /*box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);*/
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    padding: 7px;
    overflow:hidden;
    box-sizing:border-box;
}

.submitform  #post_input {
    display: block;
    font-size: 18px;
    border: none;
    outline: none;
    padding: 3px;
    /* set left and right, and z-index to make it appear behind the button.*/
    left:7px;
    right:7px;
    position:absolute;
    z-index:-1;
}