Html CSS 宽度：100% 用于评论的文本区域（响应式）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30164301/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS width:100% textarea for comment (responsive)
提问by innovation
I need little help for my CSS.
我的 CSS 几乎不需要帮助。
I am trying to make a comment system but it has something went wrong.
我正在尝试制作一个评论系统，但它出了点问题。
This is my DEMOpage from codepen.io
这是我来自codepen.io 的DEMO页面
You can see there is a user avatar and textarea. The container max-width:650px;when you reduced width the browser the it is automatically changing.
您可以看到有一个用户头像和文本区域。max-width:650px;当您缩小浏览器的宽度时，容器会自动更改。
anyone can help me in this regard?
任何人都可以在这方面帮助我吗？
HTML
HTML
<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>
CSS
CSS
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: left;
width:100%;
height: auto;
background-color: red;
}
.textinput {
float:left;
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}
I want to make it like this:
我想让它像这样：
回答by Aaron
You could try using calc();to perform the calculation for you... baring in mind you would need to add the vendor prefixes to this.
您可以尝试使用calc();来为您执行计算......请记住，您需要为此添加供应商前缀。
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: right;
width: calc(100% - 45px);
height: auto;
background-color: red;
}
.textinput {
float:left;
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>回答by Dmitriy
as an option instead of float use display: table
作为选项而不是浮动使用 display: table
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: #00f;
height: auto;
display: table;
width: 100%;
padding: 5px;
}
.commenter,
.comment-text-area{
display: table-cell;
vertical-align: top;
}
.commenter{
width: 35px;
padding-right: 5px;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
width:100%;
height: 100%;
/*background-color: red;*/
}
.textinput {
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>回答by Tasos K.
For scenarios like this I combine float:left;and float:none;The avatar wrapper div gets the float:left;and the comment wrapper div gets the float:none;.
对于这样的场景我结合float:left;和 float:none;动漫形象包装DIV获取 float:left;和包装DIV的评论得到 float:none;。
The trick here is to put padding-lefton the float:none;div equal to the width of the float:left;div.
这里的窍门是把padding-left对 float:none;格等于宽度 float:left;股利。
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
width:35px;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: none;
height: auto;
background-color: red;
padding-left:35px;
}
Here is a working demo
这是一个工作演示
回答by Navneet Panchariya
only change .comment-text-areaheight:94%
只有改变 .comment-text-areaheight:94%
body {
background-color: #dddddd;
}
.container {
position: relative;
max-width: 650px;
margin: 0px auto;
margin-top: 50px;
}
.comment {
background-color: blue;
float: left;
width: 100%;
height: auto;
}
.commenter {
float: left;
}
.commenter img {
width: 35px;
height: 35px;
}
.comment-text-area {
float: left;
width: 94%;
height: auto;
background-color: red;
}
.textinput {
float:left;
width: 100%;
min-height: 35px;
outline: none;
resize: none;
border: 1px solid #f0f0f0;
}<div class="container">
<div class="comment">
<div class="commenter">
<img src="https://igcdn-photos-c-a.akamaihd.net/hphotos-ak-xta1/t51.2885-19/11084950_1591056347778266_1536322251_a.jpg">
</div>
<div class="comment-text-area">
<textarea class="textinput" placeholder="Comment"></textarea>
</div>
</div>
</div>回答by Lal
See this fiddle
看到这个小提琴
I have changed your CSS a little bit. See the changes below. The problem with your CSS was that you used no width for .commenter. Thus it took default 100% width.
我已经稍微改变了你的 CSS。请参阅下面的更改。你的 CSS 的问题是你没有使用.commenter. 因此它采用了默认的 100% 宽度。
CSS
CSS
.commenter {
float: left;
width: 6%;
}
.comment-text-area {
float: left;
width: 94%;
height: auto;
background-color: red;
}
EDIT
编辑
use width for .commenteras width: 35px;..I chose 35px because it is the width of the avatar image.
使用宽度.commenter作为width: 35px;..我选择 35px 因为它是头像图像的宽度。
回答by Sumit Patel
you can give the class name form-controlto the <textarea>like this:
你可以给类名form-control的<textarea>是这样的：
<textarea class="form-control" rows="3" cols="90" ></textarea>
Reference: https://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
参考：https: //www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp
