brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
Вообщем проблема есть небольшая. Взялся за новый проект, решил сделать полупрозрачными блоки. Но вот почему то блокам не выставляется 100% высота. А вот футер прижимается родительским дивом, т.е. для родителя применяется 100% высота. Как возможно решить проблему? Буду признателен за корректный каркас фиксированного шаблона со 100% колонками и прижатым к низу футеру, хоть изучу, как что делается, ибо ничего толкового не нашёл в гугле, везде всё по разному.
Заранее благодарен
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Вот таким способом можно это сделать:
* {
height: 100%;
}
div#block {
background-color: green;
width: 100px;
height: 100%;
}
И HTML:
<body>
<div id="block"></div>
</body>
brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
Спасибо, Михаил, пойду разбирать)))
brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
Михаил, а возможно каким нибудь образом отменять 100% высоту для дочерних блоков?
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Да, можно. Для этого задавайте у дочернего блока либо height: auto;, либо конкретное значение, например, height: 100px;.
brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
Просто тут такое дело, что мне бы надо, что бы определённый блок растягивался по высоте соответственно количеству текста. Ставить на body пытался 100% высоту, но для дочерних блоков не помогает...Вот скрин примерной схемы, которая мне нужна http://radikal.ru/F/i052.radikal.ru/1112/61/60b15e8a5f24.jpg.html
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Как я и писал, height: auto; Тогда высота будет пропорциональна содержимому. А расположение можно задавать, например, через margin.
brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
Михаил, вот во всём разобрался, только вот не пойму, почему шаблон для кратких новостей на главной странице при большом их количестве начинает выходить за футер? Т.е. Блок main не тянется? Отмену позиционирования делал, не помогает
Admin
Администратор
Дата регистрации:
27.05.2010 21:23:42
Сообщений: 3063
Возможно, Вы не там её делали. Также, на всякий случай, напомню базу блочной вёрстки:
header
content
left
right
center
clear
footer
brussens
Мега-мастер
Дата регистрации:
11.10.2011 22:50:07
Сообщений: 438
По этой схеме и делаю, вот код
html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="/style/style.css">
</head>
<body>
<div id="header">
<a href="http://inflexing.ru"><img src="/images/inflexing.png" alt="inflexing.ru" /></a>
<div id="regauthhref">
<a href="#">Войти</a><br />
<a href="#">Регистрация</a>
</div>
</div>
<div id="container">
<ul id="nav">
<li id="selected"><a href="#">Главная</a></li>
<li><a href="#">Видео</a></li>
<li><a href="#">Музыка</a></li>
<li><a href="#">Фотоотчёты</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Даты</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Поиск</a></li>
</ul>
</div>
<div id="main">
<div id="right"></div>
<div id="content">
<div id="newskr">
<div id="newsnamekr"><a href="#">Заголовок новости</a></div>
<div id="newsimagekr"><a href="#"><img src="/images/test.jpg"></a></div>
<div id="newstextkr">Часть новости</div>
<div id="newsfullread"><a href="#">Читать полностью</a></div>
</div>
<div id="newskr">
<div id="newsnamekr"><a href="#">Заголовок новости</a></div>
<div id="newsimagekr"><a href="#"><img src="/images/test.jpg"></a></div>
<div id="newstextkr">Часть новости</div>
<div id="newsfullread"><a href="#">Читать полностью</a></div>
</div>
<div id="newskr">
<div id="newsnamekr"><a href="#">Заголовок новости</a></div>
<div id="newsimagekr"><a href="#"><img src="/images/test.jpg"></a></div>
<div id="newstextkr">Часть новости</div>
<div id="newsfullread"><a href="#">Читать полностью</a></div>
</div>
</div>
</div>
<div id="clear"></div>
<div id="footer">
</div>
</body>
</html> css
* {
height: 100%;
}
body {
background-image: url("/images/5.gif"
;
}
#main {
margin-left:auto;
margin-right:auto;
width: 990px;
height: 100%;
}
#content {
background-image: url("/images/1.png";
width: 750px;
float:left;
height: 100%;
}
#right {
background-image: url("/images/1.png";
width: 230px;
float:right;
height: 100%;
}
#footer {
margin-top:10px;
margin-left:auto;
margin-right:auto;
width: 990px;
height:120px;
background-image: url("/images/1.png";
float:bottom;
position:absolute;
}
#header {
margin-left:auto;
margin-right:auto;
width:990px;
height:100px;
}
#header img{
margin-left:280px;
margin-top:10px;
width:419px;
height:auto;
}
#regauthhref {
float:right;
margin-top:5px;
margin-right:40px;
background-image: url("/images/1.png";
padding:10px;
text-align:center;
height:auto;
}
#regauthhref a{
color:#FFF;
font-size:14px;
text-decoration:none;
}
#regauthhref a:hover{
color:#FFF;
font-size:14px;
text-decoration:underline;
}
#container {
width: 990px;
text-align:center;
height:auto;
}
ul, li {
margin: 0;
padding: 0;
}
#blob {
background: #0b2b61;
border-right: 1px solid #0059ec;
border-left: 1px solid #0059ec;
position: absolute;
z-index: 1;
top: 0;
background: -moz-linear-gradient(top, #0b2b61, #1153c0);
background: -webkit-gradient(linear, left top, left bottom, from(#0b2b61), to(#1153c0));
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 2px 3px 10px #011331;
-webkit-box-shadow: 2px 3px 10px #011331;
}
#nav {
position: relative;
float: left;
}
#nav li {
float: left;
list-style: none;
}
#nav li a {
color: #e3e3e3;
z-index: 2;
position: relative;
cursor: pointer;
float: left;
font-size: 12px;
font-family: helvetica, arial, sans-serif;
text-decoration: none;
padding: 5px 40px;
}
#clear {
clear:both;
max-height:1px;
}
#newskr {
max-width:235px;
background-image: url("/images/1.png";
margin:20px;
height:auto;
}
#newsnamekr {
text-align:left;
padding:10px;
padding-left:20px;
background-image: url("/images/1.png";
height:auto;
}
#newsnamekr a{
color:#FFF;
font-weight:bold;
font-size:14px;
text-decoration:none;
}
#newsnamekr a:hover{
text-decoration:underline;
}
#newsimagekr img{
max-width:200px;
margin-left:auto;
margin-right:auto;
height:auto;
}
#newsimagekr{
margin:auto;
margin-top:10px;
margin-bottom:10px;
height:auto;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#newstextkr {
color:#FFF;
font-size:14px;
padding:10px;
padding-left:20px;
height:auto;
}
#newsfullread {
padding-right:20px;
padding-bottom:10px;
text-align:right;
height:auto;
}
#newsfullread a{
color:#2996d7;
font-weight:bold;
font-size:14px;
text-decoration:none;
}
#newsfullread a:hover{
text-decoration:underline;
}
