Здравствуйте!
Уважаемые господа и дамы, подскажите, пожалуйста, как избавиться от желтизны в самом низу моей вёрстки.
Вроде всё правильно по процентам поделил, но кусочек body (желтый) вылазит в самом конце, как бы я ни бился (из-за формы?). Хочется, чтобы всё растянулось на весь экран и было юзабельно под любыми разрешениями.
Заранее благодарю за помощь!
P.S. Подскажите, пожалуйста, также:
1) хорошую и современную книгу про верстку, как настольная книга верстальщика чтобы была
2) куда выкладывать такие вот кусочки кода, чтобы сразу демонстрировать в риалтайме (кроме своего сервера). На
jsfiddle.net как-то не получилось выложить, в окне резалт совсем не то, что нужно получается.
3) что я делаю неправильно в целом в этой вёрстке, если я, конечно, допускаю какие-то грубые ошибки сейчас.
Далее код:
<html>
<head>
<meta charset="utf-8">
<title>Club</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="content">
<div class="chat">
<div class="chat_view">
</div>
<div class="chat_type">
<div class="chat_type_msg">
<form id="chat_input">
<textarea></textarea>
</form>
</div>
<div class="chat_type_btn">
<button form="chat_input" type="submit" class="chat_sendbtn">Отправить</button>
</div>
</div>
</div>
</div>
</body>
</html>
body{
margin: 0;
padding: 0;
background: yellow;
}
.content{
width: 100%;
height: 100%;
background: black;
margin-left: auto;
margin-right: auto;
}
.chat{
background: white;
width: 100%;
height: 100%;
}
.chat_view{
width: 100%;
height: 90%;
background: green;
}
.chat_type{
width: 100%;
height: 10%;
background: red;
}
.chat_type_msg{
width: 80%;
height: 100%;
background: black;
float: left;
}
.chat_type_msg textarea{
width: 100%;
height: 100%
}
.chat_type_btn{
float: left;
width: 20%;
height: 100%;
}
.chat_type_btn button{
width: 100%;
height: 100%;
}
Простой
