Высота DIV 100% - HTML, CSS - Ответ 4856898

@likeapimp · Регистрация: 24.12.2011

Author24 — интернет-сервис помощи студентам

Здравствуйте! Как поставить height DIV'а в 100%? В px все работает, но когда ставлю в % - не хочет.

Вот css код, помогите пожалуйста:

CSS

body, html {
height:100%;
}
 
body {
background: grey;
background-image: url(/img/bg2.jpg);
background-attachment: fixed;
font-family: Verdana;
font-size:8pt;
}
 
 
 
 h2 {
    font-size: 14pt;
    color: #000; 
    margin-bottom: 0; 
    font-family: Segoe WP Light, Segoe WP;
    font-weight:light;
   }
   
h3 {
    font-size: 10pt;
    color: #000; 
    margin-bottom: 0;
    font-family: Arial;
    
    
   }
   
   #container {
   height:100%;
    width: 954px; 
    margin: 0 auto; 
    -moz-box-shadow: 3px 5px 10px rgba(0,0,0,0.3); 
    -webkit-box-shadow: 3px 5px 10px rgba(0,0,0,0.3); 
    box-shadow: 3px 5px 10px rgba(0,0,0,0.3); 
    
   }
   #header {
   background-image: url([url]http://test5.ru/img/head-bg2.png);[/url] 
    font-size: 32pt; 
    color: #fff; 
    padding: 15px; 
    height:63px;
    font-family: Segoe UI Light, Segoe UI;
    font-weight:light;
    opacity:0.9;
    border-radius:10px 10px 0 0;
 
    
    
   }
   #content {
    height:100%;
    background:#f8f8f8;
    width:648px;
-moz-box-shadow: 3px 5px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 3px 5px 10px rgba(0,0,0,0.5);
    box-shadow: 3px 5px 10px rgba(0,0,0,0.5); 
    
    
   }
   #content p {
    margin-top: 0.3em;
   }
   
   #sidebar {
    float: right;
    width: 280px; 
    background: #f8f8f8;
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    box-shadow: 0 5px 10px rgba(0,0,0,0.5); 
    padding: 10px;
   }
   #sidebar a {
    color: #752641; 
   }
   
   
   #side2 {
    float: right;
    width: 280px; 
    background: #f8f8f8;
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.5); 
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5); 
    box-shadow: 0 5px 10px rgba(0,0,0,0.5); 
    padding: 10px;
    margin-top:430px;
    margin-right: -300px;
   }
   
  
   
   #footer {
   
    background: #f8f8f8; 
    background: -moz-linear-gradient(top, lightgrey, grey); */
    background: -webkit-gradient(linear, left top, left bottom, 
                color-stop(0%,lightgrey), color-stop(100%,grey));
    background: -webkit-linear-gradient(top, lightgrey, grey);
    background: -o-linear-gradient(top, lightgrey, grey);
    background: -ms-linear-gradient(top, lightgrey, grey);
    background: linear-gradient(top, lightgrey, grey); 
    
    color: #000; 
    padding: 5px; 
    
    border-radius: 0 0 10px 10px;
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.5); 
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.5); 
    box-shadow: 0 5px 10px rgba(0,0,0,0.5);
    height:150px;
    opacity:0.9;
    
   }
 
.logo {
margin-top:-10px;
margin-left:-12px;
}
 
 
.back {
background-image: url([url]http://test5.ru/img/back.png);[/url]
 
}
   
.play_box {
background-image: url([url]http://test5.ru/img/playbox.png);[/url]
width: 300px;
display:block;
height:59px;
margin:-10px;
 
}
 
.poster_bg {
opacity:0.15; position:absolute; height:108px; width:300px; margin-top:-5px;
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
 
}
 
.poster_bg:hover {
opacity:0.3; 
-webkit-transition: opacity 0.4s ease;
-moz-transition: opacity 0.4s ease;
 
}
 
.txtdump {
padding:5px;
margin-top:-15px;
}
 
.dump_post {
font-size:8pt;
 
}
 
.dump_box {
background-image: url([url]http://test5.ru/img/dump.png);[/url]
width: 300px;
display:block;
height:58px;
margin:-10px;
 
}
 
.sec_play_name {
background: #383838;
margin-top:10px;
width: 300px;
display:block;
margin-left:-10px;
font-weight: bold;
color:#fff;
text-align: center;
}
 
.cont_play {
margin-top:5px;
margin-left:-10px;
}
 
.play {
 
}
 
.main {
 
 
}
 
.cont_title {
background-image: url([url]http://test5.ru/img/cont_title.png);[/url]
display:block;
width:648px;
height:30px;
}
 
.cont {
margin-top:-11px;
width:648px;
 
}
 
.page_t {
margin-left:200px;
line-height:26px;
color:white;
font-family: Segoe UI Light, Segoe UI;
font-weight:light;
}
 
.post {
margin-top:11px;
margin-left:5px;
background:#f8f8f8;
}
 
.poster {
border-radius:5px;
border: solid 5px #eeeeee;
margin-top:8px;
}
 
.story {
font-size: 9pt;
}
 
.date_post {
float:right; 
margin-top:-25px;
color: #cbcbcb;
font-size:8pt;
}
 
.attachments {
margin-left:5px;
margin-top:5px;
}
 
.clone {
    position: fixed;
    top: 50px;
    left: 400px;
}
.clone > img {
    width:40%;
    height:80%;
    border-radius:5px;
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.8); 
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.8);
    box-shadow: 0 5px 10px rgba(0,0,0,0.8); 
    
}

Вернуться к обсуждению:
Высота DIV 100% HTML, CSS

Следующий ответ

Другие темы раздела
HTML, CSS Разметка страницы https://www.cyberforum.ru/ html/ thread925021.html День добрый! Возникла проблема: делаю сайт, меню в нём сделано на CSS, с параметром абсолютного позиционирования. Очень желательно, чтобы сайт был фиксированной ширины, но получается, что меню "съезжает" к заданным координатам, при изменении ширины экрана. Это крайне нежелательно, поскольку аудитория сайта довольно обширна (следовательно разрешения будут различные). Переделывать меню под все...	HTML, CSS Html шаблон Здравствуйте, я веб дизайнер, точнее сказать фотошопер) Работаю в конторке, у которой сменилось начальство и у них теперь требование к дизайнерам - минимальное знание верстки. Поэтому они мне дали задание, но я в этом очень слабо, владею только табличной версткой, и то не особо сильно. Поэтому прошу помочь, по заявлениям начальства у начинающего верстальщика на данный шаблон уйдет минут 10-15. ...
HTML, CSS Атрибут color для ссылок Почему color для ссылок сильнее чем color родительского элемента? Пример: Параграфы наследовали цвет, а ссылка нет: http://jsfiddle.net/Uefsj/ <div style="color: green;"> <p>Text</p> <a href="#">Text</a> <p>Text</p> </div> https://www.cyberforum.ru/ html/ thread924796.html	HTML, CSS Смещение изображения https://www.cyberforum.ru/ html/ thread924795.html Необходимо, чтобы выделенная область уменьшалась при увеличении текста. Пробовал сделать так, чтобы эта часть уходила в право, но в место этого она смещалась вниз. .news { height: 170px; background: #ff0000; float: left; margin-top: 32px; width: 460px; overflow: hidden;
Сдвигается шапка и меню HTML, CSS На разных браузерах не порядок с шапкой и меню. https://www.cyberforum.ru/attachment.php?attachmentid=292421&stc=1&d=1374077450 /* begin Header */ div.art-header { margin: 0 auto; position: relative;	HTML, CSS подключение less https://www.cyberforum.ru/ html/ thread924773.html Доброго времени суток. Сразу же хотел бы извиниться, если задаю вопрос не в той ветке. Решил поближе познакомиться с less. Но сразу же возникла проблема с подключением Вот как выглядит мой html <!DOCTYPE html> <html> <head> <title>Title</title> <meta charset="utf-8" />
HTML, CSS убираю комменты #header'a не видно https://www.cyberforum.ru/ html/ thread924741.html Здравствуйте! Помогите пожалуйста http://jsfiddle.net/qmgZ8/1/ <div id="container"> <div id="header"> </div> <div id="body"> </div>	HTML, CSS Анонимные сообщения Хотел бы сделать на сайте как бы стену мнений. Но так, что бы человек вводил только ник. Помогите с этим разобраться)
HTML, CSS Совместимость вёрстки с IE10 https://www.cyberforum.ru/ html/ thread924715.html Добрый день дорогие форумчане, помогите пожалуйста победить несчастный IE10, для начала проблема в картинках: Chrome: IE10: Надеюсь понятно что хром отображает всё правильно, а IE - издевается надо мной. подскажите пожалуйста, в чём проблема? Сайт: new.basu-rus.com (открыт временный доступ по логину и паролю test test)	HTML, CSS Добавление # при клике на ссылку почему здесь при клике на категорию(одежда,обувь ...) в url не добавляется # ссылка же имеет такой вид <li><a href="#" id="cat_14"><span class="clr" style="background-color: #a25c80;"></span> <span class="txt">Детские товары</span></a></li> у меня просто аналогичное меню и мне нужно получить прямую ссылку на категорию https://www.cyberforum.ru/ html/ thread924696.html
HTML, CSS не хочет работать радиус-бордер таблицы. почему? Не получается у таблицы округлить угла. они получаются двойными: округленность есть, но в тоже время есть угол. как будто бы двойная таблица. это в гугл хроме, в мазиле нет округленностей. код такой <table cellpadding="0" cellspacing="0" border="1" style="border-radius: 20 20 0 0;"> <tr> <td> <a href=">....</a> </td>	HTML, CSS Несоответствие пикселей в макете и разрешения монитора https://www.cyberforum.ru/ html/ thread924631.html Здравствуйте. Я только начал верстать. Мне скинули макет сайта в формате PSD размером 1024768. Сказали чтобы он помещался целиком в монитор 1024768. Делаю всё попиксельно, но почему то вёрстка получается гораздо крупнее чем должно быть, то есть в монитор с разрешением 1024*768 сайт не входит. Появляется скроллинг по вертикали и по горизонтали. В чём может быть глюк? Такое ощущение что на...

	18.07.2013, 12:43