Salut à tous, content de rejoindre votre petite communauté d'alsacreations.
J'arrive avec un problème que je n'arrive pas à résoudre en css.
J'ai donc une page web avec un header, un menu, une barre de séparation et le contenu central.
je voudrais que ma page prenne toujours 100% en largeur et en hauteur de l'écran, donc pas de scrollbar sur la page entiere.
J'y arrive sans probleme en largeur (quoique des erreurs d'arrondis de explorer m'empechent de mettre width à 100%).
Par contre, en hauteur, je n'y arrive pas :
mon header prend 70px de hauteur, je ne sais pas comment dire à mon container de prendre le reste de la place en hauteur. J'ai essayé quelques solutions en jouant par exemple sur le padding-top mais rien n'y fait.
Alors avant d'assigner des hauteurs en javascript, peut-être que quelqu'un ici pourra me dire comment réaliser cela en css.
J'arrive avec un problème que je n'arrive pas à résoudre en css.
J'ai donc une page web avec un header, un menu, une barre de séparation et le contenu central.
je voudrais que ma page prenne toujours 100% en largeur et en hauteur de l'écran, donc pas de scrollbar sur la page entiere.
J'y arrive sans probleme en largeur (quoique des erreurs d'arrondis de explorer m'empechent de mettre width à 100%).
Par contre, en hauteur, je n'y arrive pas :
mon header prend 70px de hauteur, je ne sais pas comment dire à mon container de prendre le reste de la place en hauteur. J'ai essayé quelques solutions en jouant par exemple sur le padding-top mais rien n'y fait.
Alors avant d'assigner des hauteurs en javascript, peut-être que quelqu'un ici pourra me dire comment réaliser cela en css.
<!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" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
html, body
{
height: 100%;
background: #FFF;
font: #000 0.8em/1em Verdana, Arial, Helvetica, sans-serif;
/* overflow: hidden;*/
}
#header
{
position: absolute;
height: 70px;
width: 99.9%;
background-color: purple;
}
#container
{
position: absolute;
top:70px;
padding-top:-70px;
width: 99.9%;
height:100%;
background-color :yellow;
}
#menu
{
float: left;
width : 21.9%;
height:80%;
overflow: auto;
background-color :red;
}
#splitbar
{
float: left;
width: 1%;
height:80%;
background: blue;
}
#main
{
float: left;
width: 77%;
height:80%;
overflow:auto;
background-color :green;
}
</style>
<title>PAGE DE TEST</title>
</head>
<html>
<body>
<form>
<div id="header">
<h1>MY TEST PAGE</h1>
</div>
<div id="container">
<div id="menu">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi leo. Nullam dignissim auctor est. Ut justo eros, facilisis non, consequat at, venenatis egestas, risus. Curabitur eleifend, diam sit amet sollicitudin tincidunt, leo diam adipiscing nisl, vel pretium elit ante sed ligula. Proin sodales faucibus pede. Pellentesque vulputate sem eu nibh. Donec mollis metus fringilla nisi. Morbi at nisi quis nulla fringilla dapibus. Praesent euismod velit in erat. Fusce luctus fringilla neque. Quisque quis justo. Donec in nisi in mi sollicitudin dictum. Praesent vel tortor eu justo fermentum consectetuer. In ipsum erat, consectetuer quis, dapibus nec, varius sed, arcu.
</div>
<div id="splitbar"> </div>
<div id="main">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi leo. Nullam dignissim auctor est. Ut justo eros, facilisis non, consequat at, venenatis egestas, risus. Curabitur eleifend, diam sit amet sollicitudin tincidunt, leo diam adipiscing nisl, vel pretium elit ante sed ligula. Proin sodales faucibus pede. Pellentesque vulputate sem eu nibh. Donec mollis metus fringilla nisi. Morbi at nisi quis nulla fringilla dapibus. Praesent euismod velit in erat. Fusce luctus fringilla neque. Quisque quis justo. Donec in nisi in mi sollicitudin dictum. Praesent vel tortor eu justo fermentum consectetuer. In ipsum erat, consectetuer quis, dapibus nec, varius sed, arcu.
Ut placerat mattis mauris. Nullam magna felis, mollis sit amet, molestie eu, ornare a, nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc condimentum nisi vitae justo. Praesent in magna. Fusce consequat velit vitae nisl. Sed eu massa. Fusce consectetuer. Integer ac pede. Aliquam ut massa. Donec sagittis pellentesque metus. Ut ligula. Ut ultrices consequat metus. Proin lacus augue, feugiat sit amet, eleifend mollis, rhoncus non, orci.
Suspendisse ut urna eu metus scelerisque dictum. Sed vel lorem pretium leo suscipit tempus. Fusce condimentum, lacus sed volutpat tristique, tellus tellus luctus arcu, vitae vestibulum leo dolor vel risus. Mauris scelerisque mollis turpis. Donec sit amet dui. Curabitur eu magna. Suspendisse lacinia. Nulla fermentum iaculis lectus. Fusce non nisl ac ligula dictum viverra. Nam magna nibh, rutrum ut, laoreet sagittis, ultricies ut, nulla. Mauris non neque.
Suspendisse sapien magna, pellentesque at, dapibus sit amet, consectetuer nec, neque. Fusce placerat sodales quam. Mauris nonummy, eros quis fermentum hendrerit, sapien sapien consectetuer diam, a aliquam enim tortor eget justo. Quisque facilisis condimentum massa. Sed ante eros, ornare non, vestibulum posuere, mollis et, magna. Nulla vitae diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse potenti. Maecenas vel justo et ipsum lacinia consectetuer. Vestibulum vitae mauris eget nulla aliquet pellentesque. Ut vitae neque in libero mollis congue. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ullamcorper justo eu massa. Sed sed est. Ut fermentum volutpat sapien. Pellentesque convallis semper augue. Aliquam mattis odio et magna. Nullam urna ligula, tempor a, dapibus eget, bibendum vitae, diam.
Phasellus imperdiet justo ac ipsum. Vestibulum eleifend dolor at ligula. Aenean facilisis elementum nisl. In accumsan felis ac leo. Suspendisse vel dui non nisl dignissim ultrices. Mauris euismod dolor eu nibh. In ultrices massa vitae erat. Suspendisse sodales. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus pretium, dui sit amet auctor tincidunt, odio ante posuere est, ac dapibus nisi libero sit amet enim. Vestibulum sed libero. Nulla suscipit. Mauris mollis facilisis turpis. Integer sed nunc at velit ultricies blandit. Ut id sem.
</div>
</div>
</form>
</body>
</html>
,
), etc ?