Quelqu'un peut-il m'aider avec l'illustration ci-dessous?Réglage de la hauteur dynamique
<body>
<header height="100px"></header>
<main height="rest of the height of viewport"></main>
</body>
Je veux <header> de certaine hauteur prédéfinie, mais veulent que le repos de la hauteur de fenêtre sera saisie par <main>.
REMARQUE: Aucun code JavaScript SVP.
CSS
header {
height: 100px;
}
main {
height: calc(100vh - 100px);
}
Que se produit ici est, VH est votre taille de la fenêtre. Donc, nous devrions le soustraire en hauteur d'en-tête.
travail Fiddle: https://jsfiddle.net/y10p9atj/
Hope it helps.
Ceci est également possible en utilisant une boîte flexible dans css. Mais cela ne prendra pas en charge les anciens navigateurs comme IE9>.
<div class="flex">
<header class="header"></header>
<main class="flxGrow main"></main>
</div>
.flex{
display:flex;
flex-flow:column wrap;
height:100%
}
.flxGrow{
flex-grow:1;
}
.header{
padding:20px;
background:red;
}
.main{
background:blue
}
body,html{
height:100%;
margin:0
}
Principal avantage d'utiliser flexbox sur vh (hauteur verticale), Pas besoin de calculer les hauteurs manuelles de l'en-tête. Cette solution sera flexible avec n'importe quelle hauteur d'en-tête dynamique. Voir aussi le violon here
Essayez cette Son Permet de régler automatiquement toute résolution avec 100px moins de sa hauteur https://jsfiddle.net/samudrala/frw31kbh/
body {
margin: 0;
padding: 0;
height:100vh;
}
header {
height: 100px;
width: 100%;
background: #ff8800;
}
main {
height: calc(100% - 100px);
height:-webkit- calc(100% - 100px);
height:-moz-calc(100% - 100px);
width: 100%;
background: green;
}<body>
<header></header>
<main></main>
</body>
de travail agréable .. mais le travail avec des fenêtres en hauteur de la fenêtre cative safari –
http : //caniuse.com/#feat=viewport-units –
Si vous souhaitez prendre en charge les anciens navigateurs. Vous devriez utiliser javascript au lieu de css. Comme OP a dit. Pas de JS. C'est aussi facile de le faire sur js. –