100% высота div'a относительно родителя

vvsh · August 5, 2011

есть такой код:

<div class="content">
<div class="photo-prev"><</div>
<div class="photo-next">></div>
<div class="photo"><img src="1.png" /></div>
</div>

и стили


.photo { margin: 0 auto; }
.photo-prev { float: left; height: 100%; background: #000; width: 40px; }
.photo-next { float: right; height: 100%; background: #000; width: 40px; }

но блоки photo-prev и photo-next имеют высоту, в зависимости от текста, но мне нужно 100%.

как сделать?

Seva1986 · August 5, 2011

есть такой код:
<div class="content">
<div class="photo-prev"><</div>
<div class="photo-next">></div>
<div class="photo"><img src="1.png" /></div>
</div>
и стили
.photo { margin: 0 auto; }
.photo-prev { float: left; height: 100%; background: #000; width: 40px; }
.photo-next { float: right; height: 100%; background: #000; width: 40px; }
но блоки photo-prev и photo-next имеют высоту, в зависимости от текста, но мне нужно 100%.
как сделать?

Они не зависят от текста, они имеют 100% от своего родителя.

Чесно не понял что это за мура, но если так сильно нужно то допиши:


html,body,.content{
height:100%;
}

Edited August 5, 2011 by Seva1986

vvsh · August 6, 2011

представьте себе таблицу.

<table><tr>
<td class="photo-prev"></td>
<td class="photo"><img src="1.jpg" /></td>
<td class="photo-next"></td>
</tr></table>

и стили:

.photo {  }
.photo-prev { height: 100%; background: #000; width: 40px; }
.photo-next { height: 100%; background: #000; width: 40px; }

высота ячеек photo-prev и photo-next будет такой же, как и у photo, как сделать то же самое на div'ах?

Seva1986 · August 6, 2011

представьте себе таблицу.
<table><tr>
<td class="photo-prev"></td>
<td class="photo"><img src="1.jpg" /></td>
<td class="photo-next"></td>
</tr></table>
и стили:
.photo {  }
.photo-prev { height: 100%; background: #000; width: 40px; }
.photo-next { height: 100%; background: #000; width: 40px; }
высота ячеек photo-prev и photo-next будет такой же, как и у photo, как сделать то же самое на div'ах?

Я же написал выше что нужно добавить...

vvsh · August 6, 2011

у них у всех и так высота 100%

Seva1986 · August 6, 2011

у них у всех и так высота 100%

полную разметку выложите...

какие теги стоят между body и .content ?

Высота в процентах отсчитываеться от высоты родителя если у родителя height не отличная от auto (min-height max-height не в счёт), То height будет равна auto

Edited August 6, 2011 by Seva1986

vvsh · August 6, 2011

<body>
<div class="header">
	...
</div>
<div class="content">
<div class="photo-block">
    <div class="photo-prev">«</div>
    <div class="photo"><img src="/data/normal/1/9.jpg" /><div class="photo-title">photo 3</div></div>
    <div class="photo-next">»</div>
</div>
</div>
<div class="footer">
    ...
</div>

</body>

вот разметка

Edited August 6, 2011 by vvsh

Seva1986 · August 6, 2011

<body>
<div class="header">
	...
</div>
<div class="content">
<div class="photo-block">
    <div class="photo-prev">«</div>
    <div class="photo"><img src="/data/normal/1/9.jpg" /><div class="photo-title">photo 3</div></div>
    <div class="photo-next">»</div>
</div>
</div>
<div class="footer">
    ...
</div>

</body>

вот разметка


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ыыыыыыы</title>
<style type="text/css">
html,body,.content,.photo-block{height:100%;}
.photo { margin: 0 auto; }
.photo-prev { float: left; height: 100%; background: #000; width: 40px; }
.photo-next { float: right; height: 100%; background: #000; width: 40px; }
</style>
</head>
<body>
	<div class="content">
		<div class="photo-block">
			<div class="photo-prev">«</div>
			<div class="photo-next">»</div>
			<div class="photo"><img src="/data/normal/1/9.jpg" /><div class="photo-title">photo 3</div></div>
		</div>
	</div>

</body>	
</html>

vvsh · August 6, 2011

эти боковые полосы всегда имеют 100% ширину, но картинка в photo может быть всего 200 пх и они должны быть высотой с картинку.

troll · August 6, 2011

Вы определитесь с шириной, 40px или 100%. Если 40px, можно так сделать:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>1</title>
<style type="text/css">
.photo-block { position: relative; }
.photo-prev, .photo-next { position: absolute; width: 40px; top: 0; bottom: 0; background: #000; color: white; } 
.photo-prev { left: 0; }
.photo-next { right: 0; text-align: right;}
.photo {margin: 0 40px 0; }
</style>
</head>
<body>
        <div class="content">
                <div class="photo-block">
                        <div class="photo-prev">«</div>
			<div class="photo-next">»</div>
			<div class="photo"><img src="5.png" /><div class="photo-title">photo 3</div></div>						
                </div>

        </div>

</body> 
</html>

Edited August 6, 2011 by troll

Sign In

100% высота div'a относительно родителя

Question

vvsh

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Seva1986

Link to comment

Share on other sites

vvsh

Link to comment

Share on other sites

Seva1986

Link to comment

Share on other sites

vvsh

Link to comment

Share on other sites

Seva1986

Link to comment

Share on other sites

vvsh

Link to comment

Share on other sites

Seva1986

Link to comment

Share on other sites

vvsh

Link to comment

Share on other sites

troll

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information