Bonjour j'ai un soucis d'affichage entre firefox et chrome et je n'arrive pas à m'en dépatouiller car je pensais que le problème était lié à la fonction javascript innerHeight mais en regardant sur le mdn chrome l'a prend bien en compte. Le problème d'affichage n'est que sur chrome, il rencontre un problème au niveau de la div "contain1" qui devrait prendre tout l'espace entre header et le menu horizontal du bas (marche sur edge et modzilla) mais qui ne réagis pas du tout comme je lui demande:/ . Il s'agit de mon site vitrine et ce bug pose un gros problème car je suis en recherche de stage et je ne peux envoyer mon cv tant que j'ai un problème d'affichage comme celui la sur chrome. Je vous remercie d'avance Je vous présente mon code
:
PS : dsl pour le long css mais comme je ne sais spas quelle propriété pose problème j'ai préféré tout mettre.
:
PS : dsl pour le long css mais comme je ne sais spas quelle propriété pose problème j'ai préféré tout mettre.
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accueil | Bienvenue </title>
<meta name="description" content="introduction">
<link rel="stylesheet" href="css/style.css">
<script type = "text/javascript" src ="javascript/jquery-3.1.1.js"></script>
</head>
<body>
<header id = "header">
<div class = "titre">
<div class = "titre1"></div>
<div class = "titre2"></div>
</div>
</header>
<nav id = "nav">
<ul id = "menu1">
<li class="active"></li>
<li class="desactive"></li>
<li class="desactive"></li>
<li class="desactive"></li>
<li class="desactive"></li>
</ul>
</nav>
<section id = "section1">
<article id = "contain1">
<object type="image/svg+xml" data="svg/accueil.svg">
</object>
</article>
<ul>
<li>
<div class = "bloc1"></div>
<div class = "bloc2"></div>
</li>
<li>
<div class = "bloc1"></div>
<div class = "bloc2"></div>
</li>
<li>
<div class = "bloc1"></div>
<div class = "bloc2"></div>
</li>
<li>
<div class = "bloc1"></div>
<div class = "bloc2"></div>
</li>
</ul>
</section>
<section id = "section2">
</section>
<section id = "section3">
</section>
<section id = "section4">
</section>
<section id = "section5">
</section>
<script type = "text/javascript" src ="javascript/proportions.js"></script>
<script type = "text/javascript" src ="javascript/scroll.js"></script>
</body>
</html>
*
{
box-sizing: border-box;
margin : 0;
padding : 0;
}
body
{
width : 100%;
margin : 0;
padding : 0;
}
/*/////////HEADER///////////*/
header
{
position: fixed;
width : 100%;
display : flex;
flex-direction: row;
}
header .titre
{
width : 30%;
display : flex;
flex-direction: column;
background : blue;
}
header .titre .titre1, header .titre .titre2
{
width : auto;
height : 50%;
margin-left : 10%;
margin-right : 10%;
display : flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
/*///////////NAV//////////////*/
nav
{
position : fixed;
width : 10%;
display : flex;
flex-direction: column;
justify-content: center;
}
nav ul
{
height : 20%;
width : auto;
margin-left : 10%;
margin-right : 10%;
display : flex;
flex-direction: column;
justify-content: space-around;
}
nav ul li
{
width : 10px;
height : 10px;
margin-left : auto;
margin-right : auto;
border-radius : 100%;
cursor : pointer;
text-decoration: none;
list-style-type: none;
display : none;
background : grey;
}
nav ul .active
{
background : black;
border : black 1px solid;
}
nav ul .desactive
{
background : #95a5a6;
border : #95a5a6 1px solid;
}
/*/////////////SECTION1///////////*/
#section1
{
width : 100%;
display : flex;
flex-direction: column;
background : yellow;
}
#section1 #contain1
{
width : 100%;
height : 60%;
margin-top : 20%;
display : flex;
flex-direction: column;
justify-content: center;
}
#section1 #contain1 object
{
width : auto;
height : 90%;
margin-left: 15%;
margin-right : 15%;
background : white;
}
#section1 ul
{
width : 100%;
height : 20%;
display : flex;
flex-direction: row;
background : red;
}
#section1 ul li
{
width : 25%;
height : 100%;
display: flex;
flex-direction: row;
border-top: 3px white solid;
border-left: 3px white solid;
border-right: 3px white solid;
}
#section1 ul li .bloc1
{
width : 70%;
height : 100%;
}
#section1 ul li .bloc2
{
width : 30%;
height : 100%;
}
/*/////////////SECTION2///////////*/
#section2
{
width : 100%;
display : flex;
flex-direction: column;
background : purple;
}
/*/////////////SECTION3///////////*/
#section3
{
width : 100%;
display : flex;
flex-direction: column;
background : pink;
}
/*/////////////SECTION4///////////*/
#section4
{
width : 100%;
display : flex;
flex-direction: column;
background : black;
}
/*/////////////SECTION5///////////*/
#section5
{
width : 100%;
display : flex;
flex-direction: column;
background : green;
}
// On définit les variables dont la taille doit etre calculée
var header = document.getElementById('header');
var nav = document.getElementById('nav');
var section1 = document.getElementById('section1')
var section2 = document.getElementById('section2')
var section3 = document.getElementById('section3')
var section4 = document.getElementById('section4')
var section5 = document.getElementById('section5')
// On définit la hauteur de l'écran
var hScreen = window.innerHeight
// On définit la hautur de nos blocs par rapport à la hauteur de l'écran
section1.style.height = hScreen;
section2.style.height = hScreen;
section3.style.height = hScreen;
section4.style.height = hScreen;
section5.style.height = hScreen;
nav.style.height = hScreen;
header.style.height = hScreen / 5;