固定divを相対divに挿入しようとしています。私は、ユーザーのコメントを作るためにtextarea.comment
を作成したが、私は私のcodepen固定divを相対divに作成
1
A
答えて
0
を確認してくださいconversations
のdiv
の底にそれを必要とする私は、あなたが探していることの底に常にテキストエリアを持つことが見えていると思いますチャット。
あなたのチャットメッセージと重複するので、私はあなたがその位置を固定しないように勧めます。
は、私はあなたからのHTMLマークアップを変更することをお勧め:
<div class="converstion">
// Conversation content
<textarea></textarea>
</div>
に:
<div class="chatwrapper">
<div class="conversation">
// Conversation content
</div>
<textarea></textarea>
</div>
そうすれば、あなたの会話がスクロール可能なままですが、あなたのテキストエリアはいつもの重複を気にすることなく、一番下になります。
0
あなたは相対的なdivの中に置く場合でも、私の知る限りでは、ドキュメントに対する設定されている表情に
*,
*:before,
*:after {
font-size: 14px;
box-sizing: border-box;
font-family: sans-serif;
}
html,
body {
position: relative;
}
.main {
position: fixed;
top: 0;
right: 0;
bottom: 0;
}
.people,
.conversation {
float: left;
height: 100%;
position: relative;
}
.people {
background: #f1f1f1;
width: 50px;
}
.conversation {
width: 250px;
}
.conversation-list {
height: calc(100% - 80px);
padding: 20px;
margin: 0;
position: relative;
list-style: none;
overflow-y: scroll;
}
.conversation-list > li {
height: 100px;
padding: 10px;
}
.write-message {
display: block;
width: 100%;
height: 80px;
}
<div class="main">
<div class="people"> </div>
<div class="conversation">
<ul class="conversation-list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<textarea class="write-message" placeholder="Write your message"></textarea>
</div>
</div>
関連する問題
- 1. 固定div内のdivを相対的に配置しますか?
- 2. 固定divを固定divにアニメ化
- 3. 親divとの相対位置を固定
- 4. 相対div内の絶対div幅
- 5. 固定親の相対配置済みdiv
- 6. GoogleマップV3 divの位置固定の相対的な変更
- 7. 相対位置のDivを指定
- 8. div浮動体に対する相対位置を持つdiv
- 9. divの左に固定されたdiv
- 10. div固定位置
- 11. 固定されたdivが必要です親の相対divが重複しません
- 12. パーセンテージオフセットで相対div内にfixed divを表示する[SAFARI bug]
- 13. SVGバックグラウンドに対してDIVを固定するには?
- 14. 絶対DIVを相対DIVの外にページするように配置
- 15. 固定幅のdiv div内のdivのテキストレイアウトの問題
- 16. 左に固定幅div、右に余分幅divを入力
- 17. Salesforce Visualforce CSS固定div
- 18. jQueryのアニメーション:固定のdiv
- 19. Twiiterブートストラップ(ボタンドロップダウン)+ Div固定
- 20. IE7 div位置固定
- 21. 固定位置のdiv
- 22. 固定幅divに収まるようにCSS/HTMLレイアウトのdiv
- 23. 相対的な親DIVが絶対的な子の幅を継承するDIV
- 24. 相対的なdiv内の絶対オーバーフローdivを押し下げる
- 25. 浮動小数点div内の相対位置div
- 26. CSS Divの相対的な位置
- 27. 相対サイズのdiv内のHTML iframe
- 28. 固定要素をDIVに相対的に配置するにはどうすればよいですか?
- 29. 設定オーバーフローが固定のdivに動作しません
- 30. スクロール可能なdiv内に固定ヘッダーテーブルを作成するには?
固定位置を取ってください。しかし、あなたは絶対的な試みをするかもしれませんまたは、常にいくつかのjavascriptを使用して、常に下に保ちます。 – Gacci
私はそれを絶対にしようとしましたが、スクロールが機能していませんでした:(@ Gacci –