11521 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Voilà je suis en train de réaliser un thème perso pour découvrir quelques trucs que je ne métrise pas totalement et là je suis confronté à un petit soucis.....

j'ai trouvé un petit script qui me permet de checker la résolution des navigateurs pour adapter la taille d'une div en fonction de l'affichage :


function adpaterALaTailleDeLaFenetre(){
  var largeur = document.documentElement.clientWidth,
  hauteur = document.documentElement.clientHeight;
   
  var source = document.getElementById('imgbanner'); // récupère l'id source
  source.style.height = hauteur+'px'; // applique la hauteur de la page
  source.style.width = largeur+'px'; // la largeur
}
// Une fonction de compatibilité pour gérer les évènements
function addEvent(element, type, listener){
  if(element.addEventListener){
    element.addEventListener(type, listener, false);
  }else if(element.attachEvent){
    element.attachEvent("on"+type, listener);
  }
}
// On exécute la fonction une première fois au chargement de la page
addEvent(window, "load", adpaterALaTailleDeLaFenetre);
// Puis à chaque fois que la fenêtre est redimensionnée
addEvent(window, "resize", adpaterALaTailleDeLaFenetre);


Mais l'image de ma div ne prend pas le 100% de largeur et de plus celà modifie un peu la largeur globale de la zone (si je me suis mal expliqué, vous trouverez ici le soucis : http://www.leconteromain.fr/themes/Perso/)

quelqu'un aurait une idée pour régler ça ?
Modifié par Pagearo (10 Dec 2015 - 00:54)
Modérateur
Bonjour,

Vu qu'une div prend naturellement 100% de la largeur de la page (ou plutôt de son conteneur), faut vraiment le faire exprès pour qu'elle ne le fasse pas. Smiley cligne

De quelle div s'agit-t-il déjà ?

Amicalement,

PS: sur le principe, faire du javascript pour régler ce genre de problème me semble une très mauvaise idée. A priori, ici, du css devrait suffire.
Modifié par parsimonhi (09 Dec 2015 - 19:48)
merci mais je viens de trouver, le soucis venait d'une propriété css de bootstrap que je n'avais pas vue....

le soucis est réglé

.wrapper .row {
margin: 0;
}