Content фиксированый по высоте в зависимости о размера броузера
Вот такой код;
<!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? |
Это?
html, body{height:100%; margin:0}
#content{
box-sizing:border-box;
height:100%;
border:1px solid #000;
overflow:auto;
}
Для задания высоты в процентах нужно чтобы у родителя она была задана. |
Сорри не заметил, что еще и header есть.
Можно так сделать:
body{
margin:0;
}
#wraper {
position:relative;
height:300px;
width:300px;
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;
position:absolute;
top: 126px;
bottom:0px;
}
#contener {
background-image: url(../images/tiny_grid.png);
background-repeat:repeat;
border:1px solid #FF0;
min-height:5000px;
min-width: 850px;
}
|
| Часовой пояс GMT +3, время: 02:38. |