ボタンをボトムに合わせる（フロート）

Question

次の画像のボタンをボトムに合わせようとしていますが、私は多くのトリックを試しましたが、何もそれを壊すことなく動作するようです。ボタンは固定スペースを占有し、テキストエリアは残りのスペースを埋めるものです。 codepenの例を追加しました！

フレックスボックス以外の回答（9+）を希望しますか？また、バニラCSSではなく、プリプロセッサとしてのみLESS。

HTML：

<div class="wrapper"> 
    <div class="text"> 

    <div class="right"> 
     <button>submit</button> 
    </div> 

    <div class="left"> 
     <textarea></textarea> 
    </div> 

    </div> 
</div> 
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script> 

CSS：

body, html { 
    margin: 0; 
} 

.wrapper { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    background: green; 
} 

.text { 
    width: 800px; 
    margin: 0 auto; 
    background: red; 
} 

.right { 
    float: right; 
    padding-left: 10px; 
    height: 100%; 
    background: gray; 
} 

textarea { 
    width: 100%; 
    height: 200px; 
    box-sizing: border-box; 
} 

.left { 
    overflow: auto; 
    padding: 10px; 
} 

JS：

tinymce.init({ 
    selector: 'textarea', 
    theme: 'modern', 
    width: '100%', 
    height: 50, 
    autoresize_min_height: 50, 
    menubar: false, // removes top menubar, 
    statusbar: false, // removes bottom statusbar 
    toolbar: 'undo redo | bold italic | link image', 
    plugins: ['image autoresize'], 
    automatic_uploads: false, 
}); 

http://codepen.io/basickarl/pen/Megjyb

Answer 1

フレキシボックスはあなたの友達です： http://codepen.io/mwvanmeurs/pen/XKrRKx

は.textフレックスコンテナを作り、それの終わりに合わせるためにすべてを語りました。

質問がある場合は、CSSとlmkをご覧ください。これは、CSSのテーブルを使用する場合があります

.text { 
    display: flex; 
    flex-direction: row-reverse; 
    align-items: flex-end; 
} 

.left { 
    flex: 1; 
} 

Answer 2

：違いを強調するために 。

• display: table;にラッパー要素.textを設定します。
• 子を「列」要素.leftと.rightからdisplay: table-cell;に設定します。
• .right〜vertical-align: bottom;に設定すると、内容が中央または上端の代わりに下に移動します。

灰色の背景が必要なのかどうかわからないため、削除しました。いくつかの詰め物を二重チェックする必要があるかもしれません。 .textための固定幅

.text { 
    display: table; 
    width: 800px; 
    margin: 0 auto; 
    background: red; 
} 
.right, 
.left { 
    display: table-cell; 
    padding: 10px; 
} 
.right { 
    vertical-align: bottom; 
} 
.left { 
    width: 100%; 
} 

• 更新Codepen（800px）。
• .text（80%）のパーセンテージ幅のCodepenが更新されました。

Answer 3

.right { 
    float: right; 
    padding-left: 10px; 
    margin-top:20%; 
    background: gray; 
} 

Answer 4

2つのオプションがあります。

オプション1

は、例えば、ボタンにIDを与え：

#button-submit{ 
    position: absolute; 
    vertical-align: bottom; 
} 

と2つの単純なスタイル

#button-submit{ 
    position: absolute; 
    vertical-align: bottom; 
} 

オプション2

追加を他のオプションは、テキストdivのサイズを、テキストエリアのサイズに適した固定の高さに設定します。 高さ：200px＃テキスト divを使用しました。だからこのように戦うことができるかもしれません...

#text{ 
    width: 800px; 
    margin: 0 auto; 
    background: red; 
    height: 200px; 
} 


#right button{ 
    height: 30px; 
    margin: 170px 0px 0px 0px; 
} 

これは、IDを与えずにボタンを押し下げることです。これは、テキストフィールドの右側にある送信ボタンの上に他のものを必要としない限り機能します。

Answer 5

CodePen

.right { 
position:absolute; 
float: right; 
padding: 10px; 
background: gray; 
height: 20px; 
width: 50px; 
bottom:0px; 
right:0px; 
    } 



.text { 
    position:relative; 
    width: 900px; 
    margin: 0 auto; 
    background: red; 
} 

.wrapper { 
position: fixed; 
bottom: 0; 
width: 100%; 
background: green; 
} 


.left { 
overflow: auto; 
padding: 10px; 
width:91%; 
} 

これはあなたのために働く必要があります。