| |
|
|
| | Подскажите, пожалуйста, как можно один div растянть по вертикали на всю страницу.
width:10px;
height:100%;
подходит только если содержание страницы влазеет на экран. Если же содержания много и появляется прокрутка, то div растягивается только на первый экран (100% первого экрана), а дальше не идёт.
html, body { height: 100% } не проходит. | |
| |
|
|
| |
|
|
| |
для: Qiao
(11.10.2007 в 10:52)
| | | а чегой-то не подходит? | |
| |
|
|
| |
|
|
| |
для: AlexSol
(11.10.2007 в 11:26)
| | | Так он на 100% экрана. А нужно на 100% страницы. И если страница больше экрана то этот div просто обрезается. | |
| |
|
|
| |
|
|
| |
для: Qiao
(11.10.2007 в 11:35)
| | |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Как растянуть div по вертикали на всю страницу (CSS)</title>
<style>
body, html{
height:100%;
padding:0;
margin:0;
}
#content{
background:silver;
padding:50px;
}
</style>
</head>
<body>
<div id="content">
-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>
-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>
-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>-<br>
</div>
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(11.10.2007 в 12:20)
| | | Я плохо обьяснил.
Закрашеваемый div пустой. То есть, к примеру, синяя полоска слева. В нём нет содержания. Его высота должна сама менятся в зависимости от содержания страницы. | |
| |
|
|
| |
|
|
| |
для: Qiao
(11.10.2007 в 12:44)
| | | а что мешает прописать синюю полоску для body?
и пустой, это значит что на странице вообще ничего нет? тогда откуда прокрутка... | |
| |
|
|
| |
|
|
| |
для: AlexSol
(11.10.2007 в 12:55)
| | | Что значит "прописать синюю полоску для body"?
На странице много чего есть. А слева небольшой толщины синяя вертикальная полоска. В полоске ничего нет. Хотя туда можно что-то вставить, что ничего не изменит, но в данном случае div служит для исключительно для дизайна.
Вот как сделать чтобы эта полоска была на всю страницу? Вроде простой вопрос, а неожиданно проблема возникла. | |
| |
|
|
| |
|
|
| |
для: Qiao
(11.10.2007 в 13:22)
| | | вопрос конечно простой, только не ясно зачем ради одной вертикальной полоски делать пустрой div. | |
| |
|
|
| |
|
|
| |
для: AlexSol
(11.10.2007 в 13:38)
| | | За вариант с картинкой спасибо, буду его использовать если решение с CSS не найдётся.
Погуглил - это нерешаемая проблема, не я один с ней мучаюсь. Ну нет так нет, хотя страно - вроде всё элементарено.
Вот код:
<style>
body{margin:0}
#text{
position:absolute;
left:305px;
}
#line{
width:300px;
height:100%;
background:blue;
}
</style>
<div id="text">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>
<div id="line"></div>
|
| |
| |
|
|
| |
|
|
| |
для: Qiao
(11.10.2007 в 18:55)
| | | 1
<style>
body{margin:0;height:100%; }
#text{
left:305px;
border-left:10px solid red;}
#line{
</style>
<div id="text">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>
|
2
<style>
body{margin:0;height:100%; }
#all{
background:red;
}
#text{
background:white;
margin-left:305px;
}
#line{
</style>
<div id="all">
<div id="text">
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
</div>
</div>
|
если вы используете абсолютное позиционирование, то этот элемент "вылетеает" из общей структуры документа и что-то сделать такой же высоты не получится | |
| |
|
|
| |
|
|
| |
для: AlexSol
(11.10.2007 в 21:15)
| | | Спасибо за помощь, эти коды решили проблему. С Firefox тольк немного поизвращятся пришлось. | |
| |
|
|
