Вот такой код;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link rel="stylesheet" type="text/css" href="css/mu.css">
</head>
<style>
body{
margin:0;
}
#wraper {
min-width:1024px;
width:100%;
outline:1px solid #0F0;
}
#heder {
height: 126px;
width: 100%;
margin-bottom:6px;
outline:1px solid #000;
}
#content{
width:100%;
overflow: auto;
outline:1px solid #F00;
}
@media screen and (min-device-width: 1600px) {
content {height: 1500px;}
}
@media screen and (device-width: 1280px) {
content {height: 1100px;}
}
@media screen and (device-width: 1024px) {
content {height: 980px;}
}
#contener {
background-image: url(../images/tiny_grid.png);
background-repeat:repeat;
border:1px solid #FF0;
min-height:5000px;
min-width: 850px;
}
</style>
<body>
<div id="wraper">
<div id="heder">
</div>
<div id="content">
<div id="contener"></div>
</div>
</div>
</body>
</html>
Задача сделать блок content фиксированым по высоте в зависимости о размера броузера(всегда принемал высоту браузера). Чтобы не у браузера прокрутка поевлялась, а у блока content. Получаться как width:100%;, но нодо для height.
Можноли это сделать спомощью медиазапросов или javascript?