height:100%; + scrollbar

mozart · May 15, 2008

Примерно получается следующее: голый html без DOCTYPE! + CSS, таблицей заданы колонки: 200 пикс., 60% и 40% остального пространства (еще одна встроенная таблица). В колонке с шириной 60% надо встроить блок (не обязательно div, можно все что угодно в рамках html(xhtml)+css), который будет растягиваться по ширине на 100% колонки, и на 100% по высоте оставшегося ОКНА БРАУЗЕРА (под "оставшегося" понимается наличие сверху хедера и снизу - футера) и имел полосу прокрутки. То есть я хочу сделать так, что бы сайт не вылезал за пределы окна браузера вообще ни по горизонтали, ни по вертикали с, практически, любым разрешением мониторов (практически потому, что я не беру в учет разрешения мониторов 800х600 и ниже), а не поместившийся контент можно было просматривать по средствам полосы прокрутки. Искал долго! Это МОЖНО сделать, НО! НО только через фиксированную высоту сего блока! При задании DOCTYPE! пустая (или практически пустая) таблица не дотягивает высоту в 100% (очень заметно при просмотре с использованием больших разрешений мониторов).

Подскажите пожалуйста как быть, может я где то что то не досмотрел или что упустил?! Может с DOCTYPE!'ом не правильно работал, и вообще его не правильный выбрал?

Таблица:

<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
 <td rowspan="3" width="200px" height="100%">Здесь меню!</td>
 <td width="100%" height="160px">Хедер!</td>
</tr>
<tr>
 <td width="100%" height="30px">Дополнительная навигация!</td>
</tr>
<tr>
 <td width="100%" height="100%">
 <table width="100%" height="100%" cellpadding="0" cellspacing="0">
 <tr>
 <td width="60%" height="100%">Сюда надо вставить блок с прокруткой!</td>
 <td width="40%" height="100%">Дполнительная панель!</td>
 </tr>
 </table>
 </td>
</tr>
<tr>
 <td colspan="2" width="100%" height="20px">Футер!</td>
</tr>
</table>

В

margin и padding 0.

Scrum · May 15, 2008

Ничего не понял.

Давай начнем с этого примера, что еще нужно ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
 <title></title>
 <style type="text/css">
 <!--
 html, body {
 margin: 0;
 padding: 0;
 }
 table {
 height: 100%;
 border-collapse: collapse;
 }
 td {
 padding: 0;
 }

 -->
 </style>
</head>

<body>
<table width="100%" cellspacing="0">
<tr>
 <td rowspan="3" width="200" height="100%">Здесь меню!</td>
 <td width="100%" height="160">Хедер!</td>
</tr>
<tr>
 <td width="100%" height="30">Дополнительная навигация!</td>
</tr>
<tr>
 <td width="100%" height="100%">
 <table width="100%" cellspacing="0">
 <tr>
 <td width="60%" height="100%">Сюда надо вставить блок с прокруткой!</td>
 <td width="40%" height="100%">Дполнительная панель!</td>
 </tr>
 </table>
 </td>
</tr>
<tr>
 <td colspan="2" width="100%" height="20px">Футер!</td>
</tr>
</table>
</body>

</html>

mozart · May 15, 2008

Ничего не понял.
Давай начнем с этого примера, что еще нужно ?

Туда, где написано "Сюда надо вставить блок с прокруткой!" надо вставить прокрутку содержимого с целью сделать сайт, который по высоте занимает только высоту окна браузера.

mozart · May 19, 2008

Переработал код с использованием position:fixed (спасибо htmlbook.ru/рецепты). В FF, Opera, Netscape Navigator - все отлично, идеально отображается и растягивается вне зависимости от количества содержимого. При большом обьеме информации в блоке "CONTENT" появляется прокрутка. В IE6 и Maxton2 - блоки растягиваются только в зависимости от количества содержимого (если не заданы определенные высота и ширина). Складывается впечатление, что IE6 и Maxton2 не понимают top:, right:, bottom: и left:, а только float. Overflow в IE6 и Maxton2 тоже работает только при фиксированной высоте блока. Ставлю IE7 - все нормально...

Может кто нибудь подскажет рецепт для IE6?.. Код ниже.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251'>
<title>Untitled Document</title>
<style type="text/css">
body {
margin:0;
padding:0;
text-align:center;
}

#menu {
width:160px;
position:fixed;
float:left;
top:10px;
left:10px;
bottom:40px;
background-color:#4088b8;
color:white;
padding:10px;
}

#header {
position:fixed;
top:10px;
left:200px;
right:10px;
height:100px;
background-color:red;
color:white;
padding:10px;
}

#content {
position:fixed;
top:140px;
left:200px;
right:10px;
bottom:40px;
background-color:#003978;
color:white;
padding:10px;
overflow:auto;
}

#footer {
position:fixed;
left:10px;
bottom:10px;
right:10px;
height:20px;
background-color:#dadada;
}

</style>
</head>
<body>

<div id="menu"><h2>MENU</h2></div>
<div id="header"><h1>HEADER</h1></div>
<div id="content">CONTENT</div>
<div id="footer">FOOTER</div>

</body>
</html>

Scrum · May 20, 2008

научитесь правильно верстать таблицами коль уж взялись за них.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>
  <title></title>
  <style type="text/css">
  <!--
  html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
  }
  table {
	width: 100%;
	height: 100%;
	table-layout: fixed;
  }
  td {
	padding: 0;
	vertical-align: top;
  }
  p {
	margin: 0;
  }
  #scrollbox {
	overflow: auto;
  }
  -->
  </style>
</head>

<body>

	<table>
		<tr>
			<td rowspan="3" width="200">menu</td>
			<td colspan="2" height="160">header</td>
		</tr>
		<tr>
			<td colspan="2" height="30">menu</td>
		</tr>
		<tr>
			<td height="100%" width="60%">
				<div id="scrollbox">
					<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
				</div>
			</td>
			<td>menu</td>
		</tr>
		<tr>
			<td colspan="3" height="20">footer</td>
		</tr>
	</table>
<script language="JavaScript" type="text/javascript">
<!--
function fixbox() {
var body = document.body.offsetHeight;
document.getElementById("scrollbox").style.height = body - 224;
}
function reload() {
window.location.reload(true);
fixbox ();
}
fixbox ();
window.onresize= reload;
-->
</script>
</body>

</html>

mozart · May 20, 2008

Спасибо - работает!

Тока несколько НО!

1) ширина колонки с текстом занимает не 60%, а примерно 40%, мож 50% - как бороться?

2) IE6 умудряется блокировать скрипт (Maxton2 - не блокирует), пока не разрешишь не увидишь нижней части текста, прокрутка не появляется и физически не работает - просмотреть можно только выделяя содержимое - как бороться?

Пытался переписать тот же скрипт (JS - не знаю вообще) заменив height на width и подставив свои значения - ноль эмоций, фунт презрения...

Что делать?..

Scrum · May 20, 2008

уважаем кажется я и так вам слишком много дал.

не пора ли самому добить все остальные не устраивающие Вас недостатки.?

mozart · May 20, 2008

И на том спасибо! Просвятил т?много...

mozart · May 21, 2008

Может кто нибудь подскажет заплатку для IE6, пост #4?..

Sign In

height:100%; + scrollbar

Question

mozart

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Scrum

Link to comment

Share on other sites

mozart

Link to comment

Share on other sites

mozart

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

mozart

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

mozart

Link to comment

Share on other sites

mozart

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information