Блок в самом низу

AntonSolo · January 12, 2009

Есть div 500px и второй 200px нужно тот что меньше разместить внутри большего и чтобы он отображался в самом низу, без позиционирования это возможно ?

3ABAPKA · January 13, 2009

Напиши блоки друг за другом

<div>...</div>
<div>....</div>

а в стилях для нижнего блока напиши margin-top: -30px; (т.е. задай отрицательное значение отступа от верхнего края блока равное высоте самого нижнего блока)

Edited January 13, 2009 by 3ABAPKA

AntonSolo · January 13, 2009

не работает так((( Может причина в чём-то другом!

Searcher · January 13, 2009

не понял проблемы, если высоты блоков известны, то делается так:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">

html, body {
   	height: 100%;
	width:100%;
	margin: 0;
	}

.outer {
	height: 500px;
	background-color: blue;
	}

.inner {
	height: 200px;
	margin: 0 10px 0 10px;
	background-color: green;
	}

.block {
	height: 290px;
	overflow: hidden;
	}

</style>
</head>
<body>

	<div class="outer">
		<div class="block">
			какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое
			какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое
		</div>
		<div class="inner">
			какое-то содержимое какое-то содержимое
		</div>
	</div>

</body>
</html>

а вообще сразу надо объяснять, что такое 200px и 500px - высота или ширина?

если ширина, то известна ли высота?

Edited January 13, 2009 by Searcher

3ABAPKA · January 13, 2009

Странно у меня все работает

#odin{
		width: 500px;
		height: 300px;
		background-color: #0080FF;
		color: #FFFFFF;
}

#dva{
		width: 200px;
		height: 100px;
		margin-top: -100px;
		background-color: #FF0000;
		color: #FFFFFF;
}

<div id="odin">Див размером 500 пикселей по ширине и 300 пикселей по высоте</div>
<div id="dva"> Див размером 200 пикселей по ширине и 100 пикселей по высоте</div>

Searcher , клевый пример

Edited January 13, 2009 by 3ABAPKA

AntonSolo · January 13, 2009

200 и 500 это высота, у мепня ещё стоит float:left это может как-то влиять ?

Searcher · January 13, 2009

200 и 500 это высота, у мепня ещё стоит float:left это может как-то влиять ?

Ну вот опять... Где у вас стоит float:left ? Ну как мы поймем?! Подробнее надо объяснять, чтобы впустую не переписываться. Конечно, он может влиять. Покажите код.

ЗАВАРКА, в вашем примере есть небольшой недостаток, смещение по вертикали вверх в такой ситуации оставит внизу отступ в 100px.

Victor Ananiev · January 13, 2009

я бы еще туда клиар засунул, но меня ща запинают за клиар, поэтому просто padding-bottom) для #block; а то #inner по идее под блок текст залазить, если не ошибаюсь)

Edited January 13, 2009 by Victor Ananiev

AntonSolo · January 13, 2009

.left {

background:url(../img/bg_left.jpg) repeat-y ;

margin-left:-533px;

width:328px;

float:left;

margin-bottom:-32767px;

padding-bottom:32767px;

}

.left_top {

float:left;

background:url(../img/center_left_top.png) no-repeat ;

width:328px;

height:179px

}

.left_bottom{

float:left;

margin-top:-203px;

background:url(../img/center_left_bottom.png) no-repeat ;

width:328px;

height:203px

}

</div>

нужно чтобы фоновый рисунок left_bottom размещался в самом низу блока left в зависимости от того на сколько он растянут. Надеюсь так понятно будет)))

Victor Ananiev · January 13, 2009

background:url(../img/center_left_bottom.png) no-repeat ; заменить на background:url(../img/center_left_bottom.png) left bottom no-repeat ;

AntonSolo · January 13, 2009

так тоже не работает!

да и что -то я логики не улавливаю как оно так может работать!)

sasyk · January 13, 2009

Имею похожею проблемку.

Вот делю страницу на 3 блока, типа на меню, контент и новости

но типа копирайтна место поставить не могу.

контент я позиционировал absolut

Мой css

body
{
font-family: verdana, arial;
text-align: justify;
}
#left-bar
{
width: 200px;
height: 100%;
float: left;
}
#right-bar
{
float: left;
width: 560px;
position:absolute;
left: 230px;

}
#news-bar
{
width: 200px;
float: left;
position:absolute;
left: 800px;
}
.title1
{
display: block;
width: 100%;
margin: 2 px;
padding: 5px;
font-family: verdana, arial;
font-weight: bold;
text-align: center;
color: gray;
border: 1px solid;
border-color: black;
}
.title2
{
display: block;
width: 100 %;
margin: 2 px;
padding: 5px;
font-family: verdana, arial;
font-weight: bold;
text-align: left;
color: gray;
border: 1px solid;
border-color: black;
}
a
{
display: block;
padding: 5px; 
margin: 2px;
border: 1px solid;
border-color: black;
background: #dcdcdc;
width: 100%;
font-weight: bold;
font-family: verdana, arial;
font-size: 11pt;
color:black;

}

a:hover
{

background: #d3d3d3;
border-color: gray;

}
#copyrayt
{
border-top: 1px solid;
border-color: black;
font-weight: bold;
font-family: verdana, arial;
font-size: 9pt;
text-align: center;
}

Мой код

<div>
<div id="left-bar">
<div class="title1">Навігація</div>
текст навигации
</div>


<div id="right-bar">
<div class="title2">Заголовок</div>
какой нить текст
</div>


<div id="news-bar"><div class="title1">Новини</div>
новина<p>
новина<p>
новина<p>
новина<p>
новина<p>
</div>
</div>

<div id="copyrayt" valign="bottom">СЮДА ХОЧУ КОПИРАЙТ</div>

Edited January 13, 2009 by sasyk

Victor Ananiev · January 13, 2009

упс, недоглядел) но у меня ваш код вообще не работает)) точнее там половину стилей надо повыбрасывать чтоб блок за экран не улетал) и после этого bottom становится внизу, и мой стиль работает)))) так что поставье нормальные циферки в css так яснее будет)

sasyk · January 13, 2009

Есть div 500px и второй 200px нужно тот что меньше разместить внутри большего и чтобы он отображался в самом низу, без позиционирования это возможно ?

Что значит то что меньше?

AntonSolo · January 13, 2009

Я же выше кинул конкретный пример!

left {

background:url(../img/bg_left.jpg) repeat-y ;

margin-left:-533px;

width:328px;

float:left;

margin-bottom:-32767px;

padding-bottom:32767px;

}

.left_top {

float:left;

background:url(../img/center_left_top.png) no-repeat ;

width:328px;

height:179px

}

.left_bottom{

float:left;

margin-top:-203px;

background:url(../img/center_left_bottom.png) no-repeat ;

width:328px;

height:203px

}

</div>

нужно чтобы фоновый рисунок left_bottom размещался в самом низу блока left в зависимости от того на сколько он растянут. Надеюсь так понятно будет)))

Victor Ananiev · January 13, 2009

а на склько он может быть растянут???????? width:328px;

а фоновый рисунок я показал как спозиционировать)

AntonSolo · January 13, 2009

<div class="left_bottom"></div> вложен в <div class="left"></div> его нельзя так спозиционировать height:100%

left 100% , а left_bottom фиксированной высоты

width:328px;

height:203px

Victor Ananiev · January 13, 2009

как так??(у left никаких height:100% не заданы)) я ничего не понимаю, у вас два слоя один под другим, в том порядке в котором надо убираем все лишние маргины и паддинги(margin-bottom:-32767px;padding-bottom:32767px;margin-left:-533px;) и видим слой так как он должен быть) ставим бэк так как я сказал и все работает)

PS а если все таки заданы, вам в помощь пример свыше)

Edited January 13, 2009 by Victor Ananiev

Searcher · January 13, 2009

left_bottom это не фоновый рисунок, а блок.

Если вам нужен фоновый рисунок внизу, то зачем размещать блок внизу, если достаточно спозиционировать сам рисунок фона?

Зачем float:left везде? Если убрать float, то и width не понадобится. Если нужно только изображение вниз прибить то так будет достаточно:

<!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">

html, body {
   	height: 100%;
	width:100%;
	margin: 0;
	}

.left {
float:left;
background:url(../img/bg_left.jpg) repeat-y;
width:328px;
}

.left_top {
background:url(../img/center_left_top.png) no-repeat;
height:179px
}

.bottom_background {
height:100%;
background:url(../img/center_left_bottom.png) left bottom no-repeat;
padding-bottom:203px;
}

</style>
</head>
<body>

<div class="left">
<div class="bottom_background">
<div class="left_top"></div>
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое 
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое 
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое 
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое 
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое 
какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое какое-то содержимое 
</div>
</div>

</body>
</html>

AntonSolo · January 13, 2009

у меня для left

margin-bottom:-32767px;

padding-bottom:32767px;

так что ваш вариант не помог , но всё равно спасибо!)

Victor Ananiev · January 13, 2009

а зачем оно надо? зачем создавать скрол?

AntonSolo · January 13, 2009

Это не скрол, есть три колонки , у каждой разный бэграунд заданный рисунком вот чтоб они растягивались в зависимости от того где самый большой контент!

Searcher · January 14, 2009

у меня для left
margin-bottom:-32767px;
padding-bottom:32767px;
так что ваш вариант не помог , но всё равно спасибо!)

И что эти отступы меняют? Вообще, зачем такие огромные значения, что за задачу вы решаете такими запредельными отступами? Тут что-то у вас неправильно в логике построения... Возможно есть более простое решение...

И почему сразу не помог, вложите мой пример еще в один блок, а у внешнего делайте такие отступы и все будет нормально. Мыслите творчески.

AntonSolo · January 14, 2009

Такие отступы для того чтобы три колонки растягивались одновременно

Всем огромное спасибо у меня получилось!)

Searcher · January 14, 2009

расскажите как получилось то, интересно ведь ))

Edited January 14, 2009 by Searcher

AntonSolo · January 15, 2009

http://trifler.ru/blog/post_1221307338.html Мне кинули эту ссылку и по анологии

Sign In

Блок в самом низу

Question

Link to comment

Share on other sites

25 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information