28173 sujets

CSS et mise en forme, CSS3

Tables height:100% imbriquées = depassement de la hauteur total

Bonjour,

Je flanche sur le problème suivant. J'ai le code ci-dessous qui dépasse la hauteur de la page.

Vous allez me dire "enlèves le DocType". J'aimerai bien, mais je ne peux pas.

Le principe est que la partie footer reste au fond de la page tant que le contenu ne dépasse pas l'écran, et si le contenu dépasse l'écran, le footer suit le contenu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title></title>
		<style>
			html, body
{
	padding:0;
	margin: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: x-small;
  color: black; 
  height:100%;  
}


.MainTable
{
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	border: 2px solid green;
}

.MainCell
{
	height:100%;
	border: 1px dotted green;
	vertical-align:top;
}

.MainCellMenu
{
	height:20px;
	border: 1px dotted green;
	vertical-align:top;
}

.ContentTable
{
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	border: 2px solid red; 
}

.ContentCell
{
	height:100%;
	vertical-align:top;
	border: 1px dotted red;
}

.MenuTable
{
	padding:0;
	height:100%;
	width:100%;
	border: 2px solid blue;
}

.MenuCellHeader
{
	height:50px;
	vertical-align:top;
	border: 1px dotted blue;
}

.MenuCellFooter
{
	height:50px;
	vertical-align:bottom;
	border: 1px dotted blue;
}

.MenuMainCell
{
	height:100%;
	vertical-align:top;
	border: 1px dotted blue;
	background-color:gray;
}

</style>				
	</head>
	<body>
		<table class="MainTable">
			<tr>
				<td class="MainCellMenu">MENU</td>
			</tr>
			<tr >
				<td class="MainCell">
					<table class="ContentTable">
						<tr class="ContentCell">
							<td>
								<table class="MenuTable">
									<tr>
										<td class="MenuCellHeader">Header</td>
									</tr>
									<tr>
										<td class="MenuMainCell">Menu</td>
									</tr>
									<tr>
										<td class="MenuCellFooter">footer</td>
									</tr>
								</table>
							</td>
							<td class="ContentCell">Content</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</body>
</html>

Modifié par darioly (05 Jul 2007 - 10:14)
Sujet clos
Aller à