Bonjour à tous,
Je suis en train de me casser la tête sur un problème qui, j'en suis sûr est bête comme chou :
Je dispose de deux div l'un à la suite de l'autre, le deuxième (un footer pour les mentions légales) se met en position: fixed en bas de la page quelle que soit la taille prise par le premier, le premier div devant scroller s'il dépasse la hauteur normale de la page, sans que le scroll déborde sur le footer.
Jusque là, pas de souci avec Firefox, un position: fixed bien placé dans le footer et un overflow dans le premier div, et c'est réglé.
C'était sans compter ces buse d'IE et de CHM (fichiers d'aide windows) qui ne reconnaissent pas position : fixed. Jusqu'à présent, mes tentatives approchant le résultat voulu se soldent par un gros espace en bas du footer.
Je vous livre un exemple :
(Common4IE étant bien entendu inclus via commentaires conditionnels)
Une suggestion ?
Merci d'avance
Je suis en train de me casser la tête sur un problème qui, j'en suis sûr est bête comme chou :
Je dispose de deux div l'un à la suite de l'autre, le deuxième (un footer pour les mentions légales) se met en position: fixed en bas de la page quelle que soit la taille prise par le premier, le premier div devant scroller s'il dépasse la hauteur normale de la page, sans que le scroll déborde sur le footer.
Jusque là, pas de souci avec Firefox, un position: fixed bien placé dans le footer et un overflow dans le premier div, et c'est réglé.
C'était sans compter ces buse d'IE et de CHM (fichiers d'aide windows) qui ne reconnaissent pas position : fixed. Jusqu'à présent, mes tentatives approchant le résultat voulu se soldent par un gros espace en bas du footer.
Je vous livre un exemple :
(Common4IE étant bien entendu inclus via commentaires conditionnels)
<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="Common4All.css">
<script type="text/javascript">
if (navigator.appName == "Microsoft Internet Explorer") {
document.write('<LINK rel="stylesheet" href="Common4IE.css" type="text/css" media="screen">');
onload = function() { document.body.focus() };
}
</script>
</head>
<body>
<div id="content">
ceci est le contenu
</div>
<div id="footer">
(c) Machin 1989-2008, all rights reserved
</div>
</body>
</html>
/* Common4All.css */
body {
font-size: 1em;
color: #000000;
background-color: #ffffff;
margin: 0px 0px 0px 0px;
padding: 0px 0px 70px 0px;
}
div#content {
padding: 0px 40px 0px 40px;
margin: 30px 0px 0px 0px;
overflow: visible;
}
div#footer {
height: 40px;
width: 100%;
bottom: 0px;
padding: 2px 0px 0px 0px;
border-top: 1px solid black;
background-color: #CED9E0;
position: fixed;
}
/* Common4IE.css */
body {
height: 100%;
margin: 0px 0px 135px 0px;
padding: 0px 0px 95px 0px;
}
body.bodyParameter {
margin: 0px 0px 180px 0px;
}
div#content {
height: 100%; overflow: visible;
}
div#footer {
padding: 6px 0px 0px 0px;
}
Une suggestion ?
Merci d'avance