J'ai le code HTML / CSS de base suivant pour une mise en page Flexbox que j'essaie d'utiliser pour une page Web:
<div class="container">
<div class="headerContainer">
<h1>Site Title</h1>
</div>
<div class="sidebarAndContentContainer">
<div class="sidebar">
<ul class="nav">
<li>Nav Link #1</li>
<li>Nav Link #2</li>
<li>Nav Link #3</li>
<li>Nav Link #4</li>
<li>Nav Link #5</li>
</ul>
</div>
<div class="content">
<h2>Page Title</h2>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>
body, div, html, h1, h2, li, p, ul {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
min-height: 100%;
}
.headerContainer {
background: darkblue;
color: white;
padding: 10px;
}
.sidebarAndContentContainer {
display: flex;
flex: 1;
}
.sidebar {
background: gray;
padding: 10px;
}
.nav {
color: white;
list-style: none;
}
.content {
padding: 10px;
}
La mise en page ressemble à ce que je veux dans Chrome, Firefox et Edge, mais lorsque je la charge dans IE11, le div de la barre latérale n'étire pas la longueur verticale de la page comme il se doit. En fait, il ne mesure que 20px (ce qui n'est que le rembourrage).
Pourquoi cela se produit-il dans IE11 (que je pensais compatible avec la flexbox), et plus inportant, comment puis-je résoudre ce problème? Merci.
Modifier : après avoir trouvé une solution de travail et l'avoir publiée, je ne pense pas que cette question soit une copie de celles liées en haut de la question car finalement, ces autres messages n'avaient pas le même problème ou ne répondaient pas à la question que je posais.
4 Réponses :
IE11 ne prend que partiellement en charge flexbox.
Consultez ce site si vous ne l'avez pas déjà fait: https://caniuse.com/#feat= flexbox
À moins que ce ne soit super critique, je ne pense pas qu'il vaut la peine de perdre trop de sommeil en prenant en charge un navigateur de 2 génération dont Microsoft est depuis longtemps éloigné.
Certaines personnes n'ont pas la possibilité d'abandonner le support jusqu'à ce qu'il atteigne le support de fin de vie de MS, AKA le monde merveilleux du développement d'entreprise. ;)
@ChrisW. dang, c'est dur.
D'où pourquoi Microsoft devrait parfois proposer de prendre l'onglet du bar pour obliger certains d'entre nous à boire lol. ;)
@ChrisW. Eh bien, je suppose que quelqu'un doit s'assurer que le bureau laissé dans le grenier pendant 10 ans peut toujours exécuter le site Web de l'entreprise sans problème lors du démarrage.
Essayez de le changer de flex: 1; à flex: 1 0 0;
Ce lien explique https://stackoverflow.com/a/22883146/6288545
Cela fonctionne très bien dans IE11, mais la couleur d'arrière-plan de la barre latérale est alors coupée à hauteur: 100%; dans Chrome lorsque le contenu est suffisant pour sortir de l'écran. Des pensées?
avez-vous essayé d'utiliser flex: 1 0 auto; ou flex: 1 0 100%;
J'ai pu utiliser votre réponse avec celle de Chris W. pour obtenir ce dont j'avais besoin. Merci beaucoup.
Le problème est simplement la sémantique hauteur-min vs hauteur . Essayez;
<div class="container">
<div class="headerContainer">
<h1>Site Title</h1>
</div>
<div class="sidebarAndContentContainer">
<div class="sidebar">
<ul class="nav">
<li>Nav Link #1</li>
<li>Nav Link #2</li>
<li>Nav Link #3</li>
<li>Nav Link #4</li>
<li>Nav Link #5</li>
</ul>
</div>
<div class="content">
<h2>Page Title</h2>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
</div>
body, div, html, h1, h2, li, p, ul {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.container {
display: flex;
flex-direction: column;
/* min-height: 100%; <---- Your Culprit */
height: 100%;
}
.headerContainer {
background: darkblue;
color: white;
padding: 10px;
}
.sidebarAndContentContainer {
display: flex;
flex: 1;
}
.sidebar {
background: gray;
padding: 10px;
}
.nav {
color: white;
list-style: none;
}
.content {
padding: 10px;
}
Dans l'ensemble, j'aime cette réponse, mais le seul problème que je vois est que lorsque le contenu défile hors de la page, la couleur d'arrière-plan de la barre latérale s'arrête à l'endroit où l'écran initial (non défilé) s'arrête (c'est-à-dire, hauteur: 100%; ). Des pensées?
Oui, vous devrez éventuellement apprendre comment fonctionne flex avec grow , shrink , base et order et changez votre structure globale. Je ne pensais pas que vous vouliez que vos éléments d'interface utilisateur actuels soient modifiés dans cette mesure, je répondais simplement à la question de savoir pourquoi cela n'allongeait pas la longueur verticale de votre page d'exemple dans IE11 :)
J'ai l'impression de bien comprendre flexbox et la plupart de ses propriétés, mais flex (et le longhand flex-grow , flex-shrink et < code> flex-based properties) me déroute vraiment. Je pense que c'est l'interaction entre les trois et les variations entre les navigateurs qui rend cela vraiment difficile. À la fin de la journée, j'ai pu utiliser votre réponse avec celle de Max Hughes et j'ai juste joué pour obtenir ce que je voulais (je publierai la solution finale dans une minute). Merci encore pour votre aide, mais l'explication flex-base dans l'article lié CSS Tricks me déroute toujours.
Ya c'est une sorte de douleur dans le cul. C'est pourquoi, personnellement, je choisis simplement de bonnes dispositions de style de modèle de boîte à l'ancienne pour la disposition de base au lieu de flex. Heureux que vous ayez un remède et passez un excellent week-end!
Tout d'abord, un grand merci à Chris W. et Max Hughes pour vos réponses et conseils. Sans cela, je n'aurais jamais trouvé de réponse. Cela dit, j'ai fini par devoir utiliser une combinaison des deux réponses pour obtenir ce que je cherchais.
Et avant de fournir la réponse, voici ce que je cherchais et que je n'obtenais pas auparavant: p>
Cela dit, les deux changements suivants apportés au code de ma réponse d'origine correspondent à toutes les conditions ci-dessus:
.container {
display: flex;
flex-direction: column;
height: 100%; /* Changed from min-height. */
}
...
.sidebarAndContentContainer {
display: flex;
flex: 1 0 auto; /* Changed from flex: 1. */
}
Il existe des solutions plus propres et plus efficaces. Voir les doublons que j'ai publiés.
Michael_B, pourriez-vous s'il vous plaît nous expliquer ce que vous entendez par «solutions plus propres et efficaces»? Les deux choses que j'ai vues étaient d'utiliser flex: auto au lieu de flex: 1 0 auto et de créer le html et / ou le body < / code> éléments display: flex également. Pour le premier, il y avait encore des bizarreries dans IE11, donc flex: auto n'est pas la même chose que flex: 1 0 auto , et j'ai lu à plusieurs endroits (et je suis d'accord) que l'ajout de display: flex aux éléments html et body n'est probablement pas idéal. Qu'est-ce que je rate? Merci.