スクロールするdivの中で画面の下部にテキストエリアを固定する方法

スクロール可能なdivの下部にテキストエリアを修正する必要がありますが、テキストエリアをdivの外に出さないようにします。position: fixedを修正します。それは底に。スクロールするdivの中で画面の下部にテキストエリアを固定する方法

テキストのスクロールセットがあるグリッドレイアウトの場合、テキスト領域を一番下にどのように設定しますか？私はposition: fixed;を試して、画面全体の幅を広げる。私はtextareaを左のdivの中に直接入れる必要があります。私がをスクロールテキストdivで使用し、テキストエリアにposition: absolute;を使用すると、テキストエリアが画面の下部に表示されますが、スクロールするとそこには残りません。

これは私が現在持っているものです。 https://codepen.io/anon/pen/QMMjow

これは私が欲しいものですが、それは上記のように下にピンがあります。 https://codepen.io/anon/pen/OjjMVK

出典

2017-08-11 Billy Ferguson

あなたがテキストエリアに別の要素を並列に追加することによってそれを行うことができます最初のdivの下にテキストエリアを作成します。あなたは関係なく、コンテンツサイズの、一番下に常にそれを維持するtextareaの「スティッキーフッター」メソッドを使用することができます

.messages{ 
 
    width: 300px; 
 
    height: 300px; 
 
    box-sizing: border-box; 
 
    border: 2px solid #ccc; 
 
    position: relative; 
 
    overflow: hidden; 
 
    padding-bottom: 50px; 
 
} 
 
.message{ 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow: auto; 
 
} 
 
.textarea{ 
 
    width: 100%; 
 
    height: 50px; 
 
    position: absolute; 
 
    bottom: 0; left: 0; 
 
    resize: none; 
 
    background: red; 
 
}

<div class="messages"> 
 
    <div class="message"> 
 
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
 
    </div> 
 
    <div class="textarea"></div> 
 
</div>

出典

2017-08-11 18:26:52 NoNameNeedToKnow

。これは、コンテンツラッパーにマイナスのマージンを使用しています。

body { 
 
    background: #fafafa; 
 
} 
 

 
.mdl-grid { 
 
    padding: 0!important; 
 
    margin-bottom: -25px !important; 
 
} 
 

 
.messages { 
 
    position: relative; 
 
} 
 

 
.mdl-cell { 
 
    overflow-x: hidden; 
 
    overflow: auto; 
 
    min-height:93vh; 
 
    background: #bdbdbd; 
 
    padding: 0!important; 
 
    text-align: center; 
 
    color: #424242; 
 
    font-weight: bold; 
 
} 
 

 
textarea { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 98%; 
 
    height: 25px; 
 
}

<html> 
 
    <head> 
 
    <!-- Material Design Lite --> 
 
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script> 
 
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css"> 
 
    <!-- Material Design icon font --> 
 
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
 
    </head> 
 
    <body> 
 
    <div class="mdl-grid"> 
 
     <div class="messages mdl-cell mdl-cell--4-col">4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4<br>4< 
 
     <textarea></textarea> 
 
     </div> 
 
     <div class="mdl-cell mdl-cell--8-col">8</div> 
 
    </div> 
 
    </body> 
 
</html>

出典

2017-08-11 18:27:27

スクロールするdivの中で画面の下部にテキストエリアを固定する方法

答えて

関連する問題