Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.03.2014, 16:08
Аспирант
Отправить личное сообщение для dmivasant Посмотреть профиль Найти все сообщения от dmivasant
 
Регистрация: 17.07.2013
Сообщений: 47

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?
Ответить с цитированием
  #2 (permalink)  
Старый 03.03.2014, 16:39
Аватар для Zuenf
Кандидат Javascript-наук
Отправить личное сообщение для Zuenf Посмотреть профиль Найти все сообщения от Zuenf
 
Регистрация: 27.01.2012
Сообщений: 134

Это?
html, body{height:100%; margin:0}
#content{
    box-sizing:border-box;
    height:100%;
    border:1px solid #000;
    overflow:auto;
}

Для задания высоты в процентах нужно чтобы у родителя она была задана.

Последний раз редактировалось Zuenf, 03.03.2014 в 16:45.
Ответить с цитированием
  #3 (permalink)  
Старый 03.03.2014, 17:08
Аватар для Zuenf
Кандидат Javascript-наук
Отправить личное сообщение для Zuenf Посмотреть профиль Найти все сообщения от Zuenf
 
Регистрация: 27.01.2012
Сообщений: 134

Сорри не заметил, что еще и 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;
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменение размера фонового изображения в зависимости от разрешения экрана. fomazov jQuery 2 24.10.2013 04:56
нужно, чтоб Div менялся в зависимости от размера картинки bazilio2010 Элементы интерфейса 7 10.10.2011 22:36
Резиновый дизайн debugx (X)HTML/CSS 22 19.08.2011 16:35
Как изменить размер <iframe> в зависимости от размера его содержимого Xslibris Events/DOM/Window 19 18.09.2010 14:52
Изменение размера блока реклама в зависимости от разрешения экрана. toxiz77 Общие вопросы Javascript 3 11.02.2009 14:12