Depuis que je suis nouveau dans la programmation Web, je n'ai pas encore acquis beaucoup d'expérience en CSS. Actuellement, je construis une application Web avec un en-tête redimensionnable. Par conséquent, je voulais savoir s'il est possible de définir la largeur d'un div enfant par rapport à la hauteur de son div parent.
Je sais comment gérer le problème en code javascript, mais je préférerais une solution css pure.
Le code css ressemblerait à ceci:
<div class="parent"> <div class="child"></div> </div>
Le code HTML ressemble à ceci:
.parent {
position: relative;
height: 200px;
width: 600px;
}
.parent .resized {
height: 100px;
}
.child {
position: absolute;
height: 20%;
width: 10% [of parent height];
}
Actuellement, la largeur de l'enfant reste la même, puisque la largeur du parent reste la même. Je voudrais que la largeur de l'enfant diminue lorsque la hauteur du parent est redimensionnée.
Merci d'avance.
3 Réponses :
La largeur et la hauteur de votre enfant lorsqu'elles sont données en% fonctionneront, mais elles seront déterminées en utilisant la dimension correspondante du parent. Donc, si la largeur de la div enfant est de 10%, elle sera dimensionnée à 10% de la div parent, et si la hauteur est de 20%, alors la div enfant aura une hauteur qui est de 20% de sa div parent.
Vous pouvez voir cela se produire dans l'exemple suivant: exemple de code avec des styles de bordure pour faire la distinction entre les div enfants et parents
Définition de la largeur à 10% de la hauteur du parent à l'aide de jquery
Si vous souhaitez définir la largeur du div enfant à un pourcentage de sa hauteur parent, vous aurez besoin d'une approche jQuery ui comme dans l'exemple suivant: Redimensionner la largeur à 10% de l'échantillon de hauteur de div parent a>.
Pour l'exemple ci-dessus, vous devez inclure les fichiers css jquery, jquery ui et jquery ui; puis appelez simplement la méthode resizable sur l'objet jquery pour le div parent ($ (". parent"). resizable ()) et définissez un événement lors du redimensionnement s'arrête pour le div parent. Dans cet événement d'arrêt, vous pouvez écrire du code de sorte que la largeur du div enfant soit 10% de la hauteur du div parent.
Le code principal que vous devez comprendre est donné ci-dessous. Dans l'événement ready de jquery, c'est-à-dire lorsque tous les éléments dom sont prêts, vous devez rendre le div parent redimensionnable, puis définir l'événement stop resize pour cela. Notez que j'utilise le sélecteur de classe pour les divs parent et enfant, c'est-à-dire $ (". Parent") et $ (". Child") .
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>
<style>
.parent {
position: relative;
height: 200px;
width: 600px;
border: 1px solid red;
}
.parent .resized {
height: 100px;
}
.child {
position: absolute;
height: 20%;
width: 10%;
border: 1px solid green;
}
</style>
<script>
$(document).ready(function() {
$(".parent").draggable().resizable( {
stop: function(e, ui) {
$(".child").width($(".parent").height() * 0.1);
}
});
});
</script>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
Si vous souhaitez jouer avec l'exemple ci-dessus sur votre ordinateur, utilisez simplement le balisage / code de page comme ci-dessous.
$(document).ready(function() {
$(".parent").resizable( {
stop : function(e, ui) {
alert("stopped");
//resize the child div now
var childHeight =0.1 * $(".parent").height();
$(".child").width(childHeight);
}
});
});
Attribuez simplement la valeur de la propriété de hauteur de vos parents à un css variable , puis utilisez calc () pour attribuer la largeur de votre élément enfant à une valeur correspondant à 10% de la hauteur de votre parent.
Vérifiez et exécutez l ' extrait de code ci-dessous pour un exemple pratique de ce que je ont décrit ci-dessus:
<div class="parent"> <div class="child"></div> </div>
.parent {
position: relative;
--parentHeight: 300px;
height: var(--parentHeight);
width: 600px;
background-color: red;
}
.parent .resized {
height: 100px;
}
.child {
position: absolute;
height: 20%;
width: calc(var(--parentHeight) / 10);
background-color: green;
}
NB Au cas où vous auriez besoin d'une rétrocompatibilité pour IE11, vous pouvez utiliser un polyfill comme indiqué dans la première réponse sur cet autre Fil SO .
pas besoin de définir la variable au niveau racine, vous pouvez simplement utiliser la valeur par défaut: jsfiddle.net/1hjp058o
qu'en est-il de la prise en charge du navigateur var () ?
@RajnishCoder Ajout d'une note à la fin de la réponse. À votre santé.
Puisque l'élément parent est une hauteur fixe (dans votre exemple 100px ou 200px), vous pouvez également créer un sélecteur pour l'enfant.
.parent > .child {
position: absolute;
height: 20%;
width: 20px;
}
.resized > .child {
position: absolute;
height: 20%;
width: 10px;
}
J'ai ajouté un échantillon complet où la hauteur du div enfant est en fait fixée à 10% de la hauteur du div parent dans ma réponse d'origine. Veuillez consulter le nouvel échantillon et la réponse.