J'ai deux DIV (l'un est une barre latérale et l'autre une partie de contenu) dont j'ai besoin pour avoir la même hauteur mais j'ai un problème. La barre latérale comprend quelques li s. Je veux que la hauteur de la barre latérale soit la même que celle de la partie contenu, mais lorsque j'utilise flex , la hauteur de la barre latérale peut être plus longue que la partie contenu (car les deux parties sont dynamiques). Donc, j'ai besoin de faire défiler la barre latérale lorsque la hauteur est plus longue que la partie de contenu .
jQuery( window ).load(function($) {
$(".sidebar").height($(".content").height());
});
Mon code CSS:
jQuery(document).ready(function($) {
$(".sidebar").height($(".content").height());
});
3 Réponses :
Ce que vous avez est très proche! Si vous définissez à la place les propriétés flex sur le parent, vous aurez deux divs de même hauteur. J'ai ajouté quelques couleurs pour illustrer:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="container">
<div class="sidebar">
<ul>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
<li>
</ul>
</div>
<div class="sub-container">
<div class="content">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up
one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
</div>
</div>
</section>
.container {
display: flex;
flex: 1 0 auto;
}
.sidebar {
background: red;
overflow-y: scroll;
min-width: 50px;
}
.sub-container {
background: lime;
}
Voici quelques lectures sur le raccourci flex que vous utilisez: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow
Si vous avez besoin du barre latérale pour faire défiler lorsque la hauteur est plus longue que le contenu, alors vous pouvez utiliser jQuery pour faire correspondre les hauteurs des éléments sur un événement resize (pour le garder cohérent) comme ceci:
$(document).ready(function() {
var a = '.content';
var b = '.sidebar'
matchHeight(a, b); // set at beginning
$(window).resize(function() {
matchHeight(a, b); // reset on window resize
})
});
// set height of one element to another
// target: height to match
// el: element to match to target height
function matchHeight(target, el) {
var targetHeight = $(target).height();
$(el).css('height', targetHeight);
}
<section class="container">
<div class="sidebar">
<ul>
<li><li>
<li><li>
<li><li>
<li><li>
<li><li>
</ul>
</div>
<div class="content">hello content</div>
</section>
.container {
display: flex;
flex: 1 0 auto;
}
.sidebar {
background: red;
}
.content {
background: lime;
}
avez-vous bien lu ma question? J'ai besoin de faire défiler la barre latérale lorsque la hauteur est plus longue que la partie du contenu
Doit avoir passé sous silence cette partie! J'ai ajouté une solution jQuery, mais ce n'est pas la plus jolie chose. Vous souhaiterez peut-être gérer la condition où, si la hauteur de la barre latérale
Je sais ce que vous voulez dire, mais le problème est de charger des images dans la partie contenu qui nous font avoir une mauvaise hauteur lorsque nous utilisons
Hmmm, après avoir lu la page de documentation jQuery api.jquery.com/load-event I ' Je suis enclin à penser que vous devriez lier le gestionnaire d'événement de chargement aux éléments
Je suis vraiment confus maintenant, diriez-vous votre idée dans votre réponse par code? Merci
La page de documentation jQuery pour .load () le dit mieux que moi - et là sont des exemples de code!
Avez-vous vu ma question complètement? J'ai essayé mais rien ne se passe !!! pour obtenir la hauteur après le chargement de la fenêtre
$ (document) .ready et lorsque j'utilise jQuery (window). load ( pour obtenir de la hauteur, rien ne se passe !!!
img , et non au document comme vous l'avez montré dans votre question initiale. Essayez ça et dites-moi ce qui se passe!
Voici votre code, c'est un moyen très simple d'obtenir la barre latérale et le contenu principal en utilisant flexbox; Exemple de codepen ici
Html va ici ...
body{
margin:0px;
padding:0px;
}
.container{
display:flex;
}
.sidebar{
height:100vh;
width:200px;
background:#ccc;
overflow:auto; // overflow:auto; will scroll when your content reach 100vh height
}
css va ici
<section class="container">
<div class="sidebar">
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>
</div>
<div class="content">content goes here...</div>
</section>
Je ne veux pas utiliser la position: absolue car ... vous pouvez voir ma page dans ce lien: end -eng.com/landing-grammar
Je n'ai pas utilisé de position, vous pouvez y parvenir en utilisant flexbox
J'ai besoin de faire défiler la barre latérale lorsque la hauteur est plus longue que la partie du contenu.
Oui, vous pouvez vérifier l'exemple de codepen @ Sh.Dehnavi selon vos besoins, j'ai résolu votre problème copain
vous pouvez ajouter plus d'élément de liste pour voir le problème de défilement
Oui, votre code est correct mais comment puis-je faire sur ma page ( end-eng.com/landing-grammar ) Je pense que ces deux éléments sont différents.
votre html est le même que le mien, vous pouvez remplacer votre css par le mien
comme je l'ai dit ci-dessus, je voulais que la barre latérale défile lorsque la barre latérale est plus longue que le contenu. donc je l'ai résolu par CSS pur:
mon nouveau code HTML:
.container {
display: flex;
}
.sidebar , .content {
flex: 1 0 auto;
}
.sidebardiv {
position: absolute;
top: 0;
right: 0;
height: 100%;
overflow: auto;
padding: 0 8px 0 8px;
}
mon nouveau code CSS:
<section class="container">
<div class="sidebar">
<div class="sidebardiv">
<ul>
<li><li>
<li><li>
<li><li>
<li><li>
<li><li>
</ul>
</div>
</div>
<div class="content"></div>
</section>
avez-vous essayé
$ ('img'). load ()au lieu de$ (window) .load ()?@Frish Non mon ami. Je l'ai résolu par CSS.
Cool, qu'est-ce que tu as fini avec?
@Frish Ma réponse est ci-dessous, mon ami