| |
|
|
| | Тело документа содержит 3 дива
<body>
<div id="1"></div>
<div id="2></div>
<div id="3"></div>
</body>
|
У первых двух дивов (типа box) установлено св-во height (в пикселях). Необходимо зделать так, чтоб третий див занимал всё оставшееся пространство (внизу страницы). Как зделать? (Указывал ему height=100% - но ничего не происходит.) | |
| |
|
|
| |
|
|
| |
для: GMile
(17.08.2007 в 09:30)
| | | Может первым двум по 10 %, а третьему 80% | |
| |
|
|
| |
|
|
| |
для: Ильдар
(17.08.2007 в 10:38)
| | | Попробовал зделать - вооще ничего не отобразилось. Ужас... всё и простая задача - а никак не моуг понять что зделать надо :( | |
| |
|
|
| |
|
|
| |
для: GMile
(17.08.2007 в 12:25)
| | | у вас не выйдет. проценты указываются относительно чего-то. например body.
тоесть чтобы высота дива в процентах сработала, надо указать body,html{height:100%}
а занять все свободное место нельзя. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(17.08.2007 в 13:00)
| | | >а занять все свободное место нельзя.
Эту задачу легко решить для Оперы и ФФ вот так:
<div style="float:left;width:100%; clear:left; height:20%; background:#00CC00"></div>
<div style="float:left;width:100%; clear:left; height:20%; background:#CC9900"></div>
<div style="background:#FFFF00; height:100%">sagaer</div>
|
Суть в чем: высота флот-элементов не будет учитываться браузером и начинаться он будет от верхнего левого края, а его содержимое обтекая флоты будет стартовать после второго дива.
Для ИЕ, пожалу поможет только position:absolute для первых двух дивов, ну и соответствующий отступ в третьем | |
| |
|
|
| |
|
|
| |
для: Madman
(17.08.2007 в 19:31)
| | | А что это за св-во "clear"? Не встречалось оно раньше мне | |
| |
|
|
| |
|
|
| |
для: AlexSol
(17.08.2007 в 13:00)
| | | Очень жаль. Но я об этом начал догадываться, т.к. перерыл много ресурсов, и пусто. | |
| |
|
|
| |
|
|
| |
для: GMile
(18.08.2007 в 00:40)
| | |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Untitled Document</title>
<style>
body,html{
padding:0;
margin:0;
height:100%;
}
#a1{
position:absolute;
top:0;
left:0;
width:100%;
height:100px;
background:#CCCCCC;
}
#a2{
position:absolute;
top:100px;
left:0;
width:100%;
height:100px;
background:#999999;
}
#a3{
width:100%;
height:100%;
background:#666666;
}
#a3 #in{
padding-top:200px;
}
</style>
</head>
<body>
<div id="a1"> 100 </div>
<div id="a2"> 200 </div>
<div id="a3">
<div id="in">
300
</div>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(18.08.2007 в 08:16)
| | | Интересный фокус. Чтож, буду знать что хотя-бы при абсолютном позиционировании оно реализуемо | |
| |
|
|
| |
|
|
| |
для: GMile
(18.08.2007 в 11:24)
| | | а более конкретно, в чем задача была? | |
| |
|
|
| |
|
|
| |
для: AlexSol
(18.08.2007 в 11:29)
| | | Я пытался добиться того, чтоб на мониторах с разной высотой в самом низу присутствовал div-"подвал", т.е. блок о создателе сайта. А между этим блоком, и последним абзацем основной части сайта, пространство заполнилось необходимым мне цветом. Это самое пространство (по большому счету разрыв) и будет разным на разных мониторах. Требовалось избавиться от него.
Для этого мне необходимо было зделать три дива: первый - заголовок, второй - тело, третий - "всё остальное". Во "всём остальном" я бы просто указал для строчки "Создатель - ..." св-во top:100%; и задача была бы решена - независомо от монитора и содержания тела текст был-бы на своем месте - внизу экрана, а разрыва небыло бы. Но видимо, не всё так просто оказалось...
И теперь я не удивляюсь, встречая на множестве блогов и ресурсов заключения различных-вроде-как-гуру, о том, что в css выравнивание реализовано весьма пахабным образом. | |
| |
|
|
| |
|
|
| |
для: GMile
(18.08.2007 в 11:54)
| | | просто не надо голову вскими глупостями забивать :) надо делать страницы не ради красоты,а ради содержания. при наличие содержательной части таких проблем не будет.
http://www.themaninblue.com/experiment/footerStickAlt/ | |
| |
|
|
| |
|
|
| |
для: AlexSol
(18.08.2007 в 12:02)
| | | Спасибо большое. Немного прихожу в себя после нижепреведенного футера..
#footer
{
position: absolute;
bottom: 0;
}
|
| |
| |
|
|
