essayer de créer une barre de navigation latérale avec une position fixe (uniquement pour la hauteur)
Essayé de position fixe, mais elle chevauche avec le contenu.
Création de la barre latérale en utilisant ceci
https://reacttraining.com/react-router/web/example/idebar i experte la barre de navigation à fixer, mais ne chevauche pas d'autres contenus.
3 Réponses :
Il suffit d'ajouter document.body.style.marginleft = "20%"; . Si la barre latérale est à gauche
cela fera le débordement du contenu
Ajouter Flex: 1 sur la barre latérale puis flex 2 sur les divs restants après elle.
code d'échantillon: Le nombre de la flexion concerne la largeur de la largeur la colonne.
Veuillez utiliser ci-dessous CSS et check, car inner DIV est généré de manière dynamique que j'ai appliquée CSS en utilisant un sélecteur enfant
p>
#root > div > div:first-child{
padding: 10px;
width: 40%;
background: rgb(240, 240, 240);
height: 100vh;
position: fixed;
left: 0;
top: 0;
bottom: 0;
overflow: auto;
}
#root > div > div:nth-child(2){
flex: 1 1 0%;
padding: 10px;
width: 58%;
margin-left: 41.5%;
}
En cas de
fixe , l'élément est supprimé de la disposition normale de la page et aucun espace ne sera créé pour cela. D'où autre contenu coulerait derrière elle. Vous devez créer un espace. Si la barre NAV est fixée à gauche, vous devrez peut-être fournir une marge gauche avec la même largeur que le conteneur pour celui qui se chevauche ci-dessous.