DIV внутри блока (div или td) с растягивающейся высотой 100%

artemhp · November 4, 2011

<table>
<tr>
<td style="height:200px"></td>
</tr>
<tr>
<td>
<div>Вот этот див. Он должен растягиваться по высоте td</div>
</td>
</tr>
</table>

Как в вышеприведенном коде сделать так, что бы DIV тянулся по высоте?

Именно что бы объект DIV физически растягивался, а не с костылями в виде картинок на фоне

ctpz · November 4, 2011

http://forum.htmlbook.ru/index.php?showtopic=30429&st=0&p=231903entry231903

artemhp · November 4, 2011

http://forum.htmlbook.ru/index.php?showtopic=30429&st=0&p=231903entry231903

Очень жаль, но приведенный Вами способ не работает :-(

Приведу более подробный мой код и задачу

<html>
<head>
<title>123</title>

<link type="text/css" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" rel="stylesheet" media="all" /> 

<style type="text/css" id="page-css"> 
	/* Styles specific to this particular page */
	.scroll-pane
	{
		width: 100%;
		height: 200px;
		overflow: auto;
	}
</style> 

<!-- latest jQuery direct from google's CDN --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<!-- the mousewheel plugin --> 
<script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script> 
<!-- the jScrollPane script --> 
<script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"></script> 

<style type="text/css">
    body {
	margin:0;
	padding:0;
    }
    .main_block {
	width:100%;
	height:100%;
	min-width:1004px;
	background:green;
	position:relative;
    }
    .header {
	position: absolute;
	width: 100%;
    }
    .content {
	position:absolute;
	top:200px;
	background:brown;
	height:100%;
	width:100%;
    }
</style>

<script type="text/javascript" id="sourcecode"> 
	$(function()
	{
		$('.scroll-pane').jScrollPane();
	});
</script> 
</head>
<body>
    <table style="height:100%" width="100%" border="0">
	<tr>
	    <td bgcolor="brown" height="200">123</td>
	</tr>
	<tr>
	    <td bgcolor="green" style="position:relative;">
		<div class="scroll-pane" style="position: absolute; top: 0; bottom: 0; width: 100%">
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		    <p>Текст</p>
		</div>
	    </td>
	</tr>
    </table>
</body>
</html>

Цель. Что бы у меня был скролящийся текст в нижней ячейке таблицы.

Код я привел с уже исправленным кодом по указанной ctpz теме

ctpz · November 4, 2011

http://jsfiddle.net/pTqGz/

Все работает.

artemhp · November 4, 2011

http://jsfiddle.net/pTqGz/
Все работает.

Спасибо, да, все работает в Хром,

но в Фаерфокс - отказывается работать.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>123</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
<link type="text/css" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css"
 rel="stylesheet" media="all" /> 

<style type="text/css" id="page-css"> 
        /* Styles specific to this particular page */
        .scroll-pane
        {
                width: 100%;
                height: 100%;
                overflow: auto;
        }
        body {
            margin:0;
            padding:0;
        }
	html, body, table {
	height: 100%;
	}
</style> 

<!-- latest jQuery direct from google's CDN --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"
></script> 
<!-- the mousewheel plugin --> 
<script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"
></script> 
<!-- the jScrollPane script --> 
<script type="text/javascript" src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.min.js"
></script> 

<script type="text/javascript" id="sourcecode"> 
$(function(){$('.scroll-pane').jScrollPane();});
</script> 
</head>
<body>
    <table style="height:100%" width="100%" border="0">
        <tr>
            <td bgcolor="brown" height="200">123</td>
        </tr>
        <tr>
            <td bgcolor="green" style="position:relative;">
                <div class="scroll-pane" style="position: absolute; top: 0; bottom: 0; width: 100%">
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                    <p>Текст</p>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Edited November 4, 2011 by artemhp

artemhp · November 7, 2011

Вычитал, что

style="position:relative;"

плохо работает для td, следовательно данный метод не очень подходит

Gaspode · November 7, 2011

Чтобы работало, сделайте ещё одну обёртку внутри td и позиционируйте относительно неё.

artemhp · November 7, 2011

Чтобы работало, сделайте ещё одну обёртку внутри td и позиционируйте относительно неё.

Тоже не получится. Я использую здесь таблицу только для того что бы у меня верхняя часть (шапка) была статической, а весь остальной контент (блок td) растягивался вниз.

Gaspode · November 7, 2011

А, пардон. В таком случае таблица, вероятно, — неудачное решение. Разве что скриптами высоту считать.

artemhp · November 7, 2011

А, пардон. В таком случае таблица, вероятно, — неудачное решение. Разве что скриптами высоту считать.

А Вы не могли бы помочь в подборе более удачного решения?

Gaspode · November 7, 2011

Нарисуйте, как должно быть.

Sign In

DIV внутри блока (div или td) с растягивающейся высотой 100%

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information