J'aimerai faire une marge qui s'adapte à la taille de mon écran. Suivant la résolution, ma marge descend plus ou moins sur ma page.
J'ai fait une marge avec une div que j'ai placé sur la gauche de ma page mais impossible de la faire descendre tout en bas. Avec height:100%; cela descend jusqu'en bas de ma page au chargement mais quand je scroll vers le bas ma marge s'arrête un moment et ne descend pas jusqu'a mon footer.
Je suis déjà tombé sur ceci mais ca ne résout pas mon problème.
Voici mon screen, j'aimerai que ma marge aille jusqu'en bas, sachant qu'elle va en bas au chargement selon m'a résolution, mais qu'elle ne va pas jusqu'au footer
Vous êtes ici sur un forum d'entraide communautaire et non pas sur un forum de demande de service, le but n'est donc pas de fournir une réponse toute faite ou de directement fournir la solution à quiconque viendrait sans la moindre trace. Afin d'obtenir de l'aide et une solution à votre problème, il est fortement recommandé de présenter clairement l'état actuel du problème en nous fournissant :
Un descriptif clair et précis du problème
La tentative actuelle de résolution que vous avez effectué : avec les codes HTML et CSS, colorés à l'aide du bouton </>
Le résultat attendu et le résultat actuel
Toutes pistes de recherches pouvant aider à la résolution
Manque de recherche
La question que vous posez est très fréquente, cela démontre un manque de recherche évident. Internet et ce forum fourmillent de ressources répondant à votre besoin.
Je vous invite à effectuer de vraies recherches qui sont à la base d'un bon apprentissage…
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Je recentre donc mon problème. J'ai une div d'id marge que j'ai sur la gauche de mon écran. Pour arriver en bas de ma page html je dois scroller en allant vers le bas, le texte ne tient pas sur ma résolution actuelle. Mon problème est que je n'arrive pas à faire descendre cette div jusqu'en bas, lorsque j'arrive sur ma page elle descend à 100% de ma résolution, mais pas à 100% de ma page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemple</title>
<link rel="stylesheet" type="text/css" href="biais.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script defer="defer" src="biais.js"></script>
</head>
<body onload="chargement();">
<header>
<nav>
<div class="symbole">
i3S
</div>
</nav>
</header>
<div id="marge">
<p id="identifiant"></p>
</div>
<!-- <script type="text/javascript"> setTimeout(function(){ alert("Hello"); }, (50));</script> -->
<div id="accueil">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi maximus augue tortor, id condimentum elit pellentesque non. Praesent cursus id felis a hendrerit. Quisque ac dui bibendum, finibus mi vel, maximus felis. Sed purus libero, vehicula quis velit ut, blandit lacinia purus. Vestibulum vitae nisl massa. Integer ornare tempor vestibulum. Donec varius nisl posuere nisi pulvinar pellentesque. Cras placerat enim ipsum, eu rhoncus magna rhoncus at. Ut sem urna, finibus vel luctus nec, laoreet ut nisl. Pellentesque nec purus eu elit mattis imperdiet. Aenean placerat auctor sem, quis feugiat augue pretium posuere. Morbi dictum nunc eu est gravida dignissim.
Curabitur finibus volutpat dolor non egestas. Nulla eu tristique dolor, porttitor viverra justo. Vivamus egestas nec diam ac suscipit. Maecenas eleifend tortor sed velit pellentesque, in dignissim nisi sodales. Praesent condimentum, est quis ornare scelerisque, lectus nibh elementum dui, commodo tristique sapien lectus sit amet sem. Etiam rhoncus imperdiet urna, a ullamcorper eros interdum at. Donec in tempus lorem. Nulla fringilla risus in lectus ultrices, ac commodo libero venenatis. Pellentesque est ante, placerat et turpis in, malesuada pulvinar tellus.
Duis blandit sagittis tincidunt. Aenean gravida, nisi fermentum maximus hendrerit, odio lorem rhoncus arcu, nec tincidunt mauris magna id felis. Donec enim massa, efficitur a convallis in, suscipit ac est. Ut vel pulvinar quam, id auctor odio. Aenean consequat euismod risus, eget mollis ipsum varius nec. Sed porttitor, nisi eget accumsan malesuada, ex justo aliquam augue, sodales vestibulum eros risus maximus justo. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque arcu elit, suscipit eu massa et, lobortis varius massa. Proin non leo quam. Phasellus vehicula consequat ipsum, quis eleifend nisl elementum at. Fusce ut pretium tortor, ut scelerisque ipsum. Fusce a erat quis justo sollicitudin tempus egestas eu mi. Donec laoreet, sapien nec elementum facilisis, felis risus euismod felis, a finibus turpis massa nec nunc.
Sed nisl erat, tincidunt et odio tristique, consequat iaculis ex. Sed in purus vel eros euismod feugiat et in nisi. Etiam imperdiet leo in dui elementum, ut vulputate dui bibendum. Integer posuere dictum risus, sit amet fermentum augue euismod sit amet. Sed odio quam, sollicitudin quis tortor non, aliquam congue lectus. Nulla sit amet posuere metus, sit amet elementum ligula. Phasellus et ante placerat, venenatis justo vel, egestas nunc. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec ullamcorper commodo ipsum, elementum ornare lorem suscipit non. Pellentesque sed risus id turpis volutpat malesuada non non velit. Maecenas euismod pulvinar enim, sed pellentesque tortor. Proin fermentum pharetra sollicitudin. Cras elementum ligula quam, pellentesque aliquet nisl imperdiet vel. Vivamus pharetra leo a eros lacinia ultricies. Maecenas in mauris eu risus viverra tincidunt.
Integer rhoncus feugiat nibh, vel varius urna pharetra et. Nunc turpis tortor, eleifend sit amet nunc id, volutpat tincidunt metus. Nullam sed nisi consectetur, sagittis dolor a, malesuada odio. Aenean accumsan felis turpis, in sodales orci ornare id. Nulla facilisi. Nullam pharetra nunc vitae turpis tristique venenatis. Integer nec pellentesque sapien. Mauris blandit, dui eu dapibus viverra, ex neque sagittis eros, non varius arcu neque eu dolor. Nunc mollis purus eu accumsan convallis. Maecenas tristique, sapien sed auctor commodo, risus enim convallis felis, at bibendum libero lacus nec nisl. Ut maximus metus hendrerit, tempor ante non, pulvinar quam. Nunc efficitur nulla at felis porttitor tempor. Vivamus convallis dolor et magna posuere, sed feugiat eros auctor. Pellentesque ex lorem, volutpat in feugiat nec, ornare sit amet nisl. Vivamus vel sagittis odio.</p>
</div>
</body>
</html>
Ton code est inutilement compliqué, et ce faisant, tu te compliques la vie.
Beaucoup trop de position absolute, de hauteurs forcées, de largeurs forcées, des floats, etc. Garde ton code simple, et il sera bien plus facile à manipuler et tes résultats seront beaucoup plus simples à obtenir. N'ajoute pas ce qui n'a pas besoin d'être là.
En simplifiant ton code et en utilisant le même exemple que le lien que je t'ai fourni dans mon tout premier message, voilà le résultat que tu peux obtenir : JSFiddle - Code Playground
Bonne continuation !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Pas d'aide concernant le code par MP, le forum est là pour ça :)
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !