Таблица по всей высоте body

artemhp · November 4, 2011

<!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" /> 
</head>
<body>
    <table style="height:100%; width:100%; background:yellow;">
	<tr>
	    <td style="height:200px;">123</td>
	</tr>
	<tr>
	    <td>
		<div>
		    <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>

Не работает, но если убрать doctype, то работает.

height:100% - не работает, как это обойти?

Или посоветуйте решение подобной задачи дивами. Спасибо

Nekromancer · November 4, 2011

Ничего не надо обходить, нужно просто поставить высоту всем родительским блокам, в том числе и body. Ну откуда таблице знать на какую высоту растягиваться.

html, body, table {
height: 100%;
}

artemhp · November 4, 2011

Ничего не надо обходить, нужно просто поставить высоту всем родительским блокам, в том числе и body. Ну откуда таблице знать на какую высоту растягиваться.
html, body, table {
height: 100%;
}

Спасибо, работает

Nekromancer · November 4, 2011

Какая новость

artemhp · November 7, 2011

Можно ли осуществить приведенную мною разметку на базе дивов (блоков), а не таблицы.

Главное что бы шапка была статической, а нижняя часть продлевалась до самого конца страницы?

artemhp · November 7, 2011

Сложность в том, как сделать, что бы не прикрепить футтер вниз страницы, а блок div по центру должен быть растянутым физически так как там будет скролл.

Gaspode · November 7, 2011

div.not_table {
   display: table;
   height: 100%;
}

или

body {
   position: relative;
}
div.not_table {
   width: 100%;
   position: absolute;
   top: 200px
   bottom: 100px;
}

например.

Edited November 7, 2011 by Gaspode

artemhp · November 7, 2011

div.not_table {
   display: table;
   height: 100%;
}

или

body {
   position: relative;
}
div.not_table {
   width: 100%;
   position: absolute;
   top: 200px
   bottom: 100px;
}

например.

Спасибо, очень даже привлекательно выглядит, попробую

artemhp · November 7, 2011

body {
   position: relative;
}
div.not_table {
   width: 100%;
   position: absolute;
   top: 200px
   bottom: 100px;
}

http://jsfiddle.net/artemhp/TnjYe/2/

Метод не работает

div.not_table {
   display: table;
   height: 100%;
}

http://jsfiddle.net/artemhp/AEEPd/1/

тоже не работает.

Edited November 7, 2011 by artemhp

Switch74 · November 7, 2011

Не совсем понял, что именно ты хочешь сделать .

Если это не то, отобрази на рисунке где точно должен быть скролл и что именно он должен прокручивать.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
	<style>
	*{padding:0px;margin:0px;}
	html,body{height:100%;overflow:hidden;}
	.body{position:absolute;left:0px;right:0px;top:0px;height:100%;overflow:hidden;}
	.top{position:absolute;left:0px;right:0px;top:0px;height:200px;background:#bbb;z-index:2;}
	.content{position:absolute;left:0px;right:0px;top:200px;bottom:100px;background:#eee;overflow:auto;z-index:1;}
	.bottom{position:absolute;left:0px;right:0px;bottom:0px;height:100px;background:#999;z-index:2;}
	</style>
</head>
<body>
	<div class="body">
		<div class="top">top</div>
		<div class="content">content</div>
		<div class="bottom">bottom</div>
	</div>
</body>

artemhp · November 7, 2011

Не совсем понял, что именно ты хочешь сделать .

Если это не то, отобрази на рисунке где точно должен быть скролл и что именно он должен прокручивать.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
	<style>
	*{padding:0px;margin:0px;}
	html,body{height:100%;overflow:hidden;}
	.body{position:absolute;left:0px;right:0px;top:0px;height:100%;overflow:hidden;}
	.top{position:absolute;left:0px;right:0px;top:0px;height:200px;background:#bbb;z-index:2;}
	.content{position:absolute;left:0px;right:0px;top:200px;bottom:100px;background:#eee;overflow:auto;z-index:1;}
	.bottom{position:absolute;left:0px;right:0px;bottom:0px;height:100px;background:#999;z-index:2;}
	</style>
</head>
<body>
	<div class="body">
		<div class="top">top</div>
		<div class="content">content</div>
		<div class="bottom">bottom</div>
	</div>
</body>

Большое спасибо, это заработало.

В конечном результате я хотел получить что то типа этого:

http://jsfiddle.net/artemhp/tCzZt/

Спасибо, попробую разобрать код и сделать в конечном счете то, что мне нужно будет.

Sign In

Таблица по всей высоте body

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