Forum : position:fixed et responsive design

Bonjour,

Utilisant la feuille Knacss, j'ai attribué à mon <header> une position "fixed". Travaillant sous Chrome, j'ai dû passer par un reset de la position en "static" pour les "média queries", et ça fonctionne parfaitement. Si on ôte le commentaire HTML du <head>, Chrome décalera correctement le #content sur la droite.

En revanche, ça cafouille pas mal sous Firefox et IE8 (je n'ai pas testé sous IE7) : le #content passe sous la barre latérale gauche ; et déjà pour ce qui est d'une résolution d'écran de bureau. Je ne suis pas très étonné pour IE mais ce qui se passe avec Firefox me laisse perplexe. Auriez-vous une idée ?

Un code test, comme exemple :

<!DOCTYPE html>
<html class="no-js" lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="knacss.css" media="all">
    <!--<STYLE type="text/css">
  @media (min-width: 641px) {
    header{max-width: 13.5em;}
}
  </STYLE>-->
  </STYLE>
</head>
<body class="mw960p center ">
<div id="main" class="row">
<header class="col w20" style="background-color: red; position: fixed;height:100%;">
    <p>aside</p>
                <p>aside</p>
                <p>aside</p>
</header>
<div id="content" role="main" class="col w60" style="background-color: green;">
        <article class="art1 w50" style="background-color: #ccc;">
                        <p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
                        <p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
                        <p>Allez tchao bissame !</p>
                        </article>
        <section class="main row gut" style="background-color: brown;">
            <article class="art1 w50 col left" style="background-color: #ccc;">
                        <p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
                        <p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
                        <p>Allez tchao bissame !</p>
                        </article>
            <article class="art2 w50 col left" style="background-color: #ccc;">
                        <p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
                        <p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
                        <p>Allez tchao bissame !</p>
                        </article>
            <article class="art3 w50 col left" style="background-color: #ccc;">
                        <p>Lorem Elsass ipsum rechime amet non Choucroutewurscht ?</p>
                        <p>Yeuh non che suis au rechimehym avec Chulien. Tiens, un Picon sur le comptoir.</p>
                        <p>Allez tchao bissame !</p>
                        </article>
        </section>  
</div>
<aside id="sidebar" class="col w20" style="background-color: cyan;">
<p>aside</p>
                <p>aside</p>
                <p>aside</p>
</aside>
</div>
<footer class="line mod" style="background-color: pink;">
    <p>footer</p>
</footer>

</body>
</html>

position:fixed et responsive design

1 réponse