文本区域对于页面来说太大
我有一个<textarea>评论。当我调整浏览器窗口大小时，评论框没有调整大小，因此在小屏幕上，评论框太大并溢出页面。我怎样才能防止这种情况发生？
我假设我需要@media screen在调整浏览器大小时添加一个查询，但我不确定我会在哪里添加它。
function commentSubmit() {
if (form1.name.value == '' && form1.comments.value == '') { //exit if one of the field is blank
alert('Enter your message !');
return;
}
$('#imageload').show();
var name = form1.name.value;
var comments = form1.comments.value;
var xmlhttp = new XMLHttpRequest(); //http request instance
xmlhttp.onreadystatechange = function() { //display the content of insert.php once successfully loaded
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('comment_logs').innerHTML = xmlhttp.responseText; //the chatlogs from the db will be displayed inside the div section
$('#imageload').hide();
}
}
xmlhttp.open('GET', 'insert.php?name=' + name + '&comments=' + comments, true); //open and send http request
xmlhttp.send();
}
$(document).ready(function(e) {
$.ajaxSetup({
cache: false
});
setInterval(function() {
$('#comment_logs').load('logs.php');
}, 2000);
});body {
background: #999;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
#container {
background-color: #FFF;
width: 50%;
padding: 10px;
margin: 20px;
margin-left: auto;
margin-right: auto;
}
.page_content {
margin: 15px;
padding: 5px;
border-bottom: 1px solid #CCC;
}
.comment_input {
background: #CCC;
margin: 10px;
padding: 10px;
border: 1px solid #CCC;
}
.button {
padding: 5px 15px 5px 15px;
background: #567373;
color: #FFF;
border-radius: 3px;
}
.button:hover {
background: #4D9494;
}
a {
text-decoration: none;
}
.comment_logs {
margin: 5px;
padding: 5px;
border: 1px solid #CCC;
}
.comments_content {
margin: 10px;
padding: 5px;
border: 1px solid #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
h1 {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #4040E6;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2 {
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
color: #CECED6;
}
h3 {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
color: #75A3A3;
padding-bottom: 5px;
margin-bottom: 5px
}
h4 {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
color: #CECED6;
text-decoration: none;
}<html>
<head>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Comment Box</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="container">
<div class="page_content">
Page Content Here....
</div>
<div class="comment_input">
<form name="form1">
<input type="text" name="name" placeholder="Name..." />
<br>
<br>
<textarea name="comments" placeholder="Leave Comments Here..." style="width:635px; height:100px;"></textarea>
<br>
<br>
<a href="#" onClick="commentSubmit()" class="button">Post</a>
<br>
</form>
<div id "imageload" style="display:none;">
<img src="loading.gif" />
</div>
</div>
<div id="comment_logs">
Loading comments...<img src="loading.gif" />
</div>
</div>
</body>
</html>不要在 HTML 代码中使用静态样式。尽可能将其剥离到您的 CSS 定义中。textarea 的宽度为 100% 在这里应该没问题。
/* CSS Document */
textarea {
width: 100%;
}
body {
background: #999;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
}
#container {
background-color: #FFF;
width: 50%;
padding: 10px;
margin: 20px;
margin-left: auto;
margin-right: auto;
}
.page_content {
margin: 15px;
padding: 5px;
border-bottom: 1px solid #CCC;
}
.comment_input {
background: #CCC;
margin: 10px;
padding: 10px;
border: 1px solid #CCC;
}
.button {
padding: 5px 15px 5px 15px;
background: #567373;
color: #FFF;
border-radius: 3px;
}
.button:hover {
background: #4D9494;
}
a {
text-decoration: none;
}
.comment_logs {
margin: 5px;
padding: 5px;
border: 1px solid #CCC;
}
.comments_content {
margin: 10px;
padding: 5px;
border: 1px solid #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
h1 {
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
color: #4040E6;
padding-bottom: 0px;
margin-bottom: 0px;
}
h2 {
font-size: 10px;
font-family: Verdana, Geneva, sans-serif;
color: #CECED6;
}
h3 {
font-size: 12px;
font-family: Verdana, Geneva, sans-serif;
color: #75A3A3;
padding-bottom: 5px;
margin-bottom: 5px
}
h4 {
font-size: 14px;
font-family: Verdana, Geneva, sans-serif;
color: #CECED6;
text-decoration: none;
}<html>
<head>
<link href="css/reset.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<title>Comment Box</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
function commentSubmit() {
if (form1.name.value == '' && form1.comments.value == '') { //exit if one of the field is blank
alert('Enter your message !');
return;
}
$('#imageload').show();
var name = form1.name.value;
var comments = form1.comments.value;
var xmlhttp = new XMLHttpRequest(); //http request instance
xmlhttp.onreadystatechange = function() { //display the content of insert.php once successfully loaded
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById('comment_logs').innerHTML = xmlhttp.responseText; //the chatlogs from the db will be displayed inside the div section
$('#imageload').hide();
}
}
xmlhttp.open('GET', 'insert.php?name=' + name + '&comments=' + comments, true); //open and send http request
xmlhttp.send();
}
$(document).ready(function(e) {
$.ajaxSetup({
cache: false
});
setInterval(function() {
$('#comment_logs').load('logs.php');
}, 2000);
});
</script>
</head>
<body>
<div id="container">
<div class="page_content">
Page Content Here....
</div>
<div class="comment_input">
<form name="form1">
<input type="text" name="name" placeholder="Name..." />
</br>
</br>
<textarea name="comments" placeholder="Leave Comments Here..."></textarea>
</br>
</br>
<a href=" # " onClick="commentSubmit() " class="button ">Post</a>
</br>
</form>
<div id "imageload " style="display:none; ">
<img src="loading.gif " />
</div>
</div>
<div id="comment_logs ">
Loading comments...
<img src="loading.gif " />
<div>
</div>
</body>
</html>