11540 sujets

JavaScript, DOM et API Web HTML5

Overflow: hidden et height() (jQuery)

Bonjour à tous,

Pour mon premier post, j'aurais besoin d'aide pour un problème, je m'explique:

j'ai ce code: 

<section id="content">
        <nav>
            <section class="wrapper">
                <article>
                    <section>


avec ce css : 
#content {
    
    /*  Boîte  */
    position: relative;
    width: 90%;
    height: 1467px;
    margin-top: 85px;
    overflow: hidden;

}

nav {
    
    /*  boîte  */
    position: absolute;
    top: 20px;
    left: 0px;
    width: 4776px;
    
}

.wrapper {
	
	/*  Boîte  */
    border-bottom: 1px solid #3F92D2;
    position: relative;
    width: 1024px;
    float: left;
    margin-right: 170px;
}


en fait le ".wrapper" est une page parmi 4 dont les 3 autres se trouvent "à coté" et vont glisser grâce à un menu.
Mon souci est que la "page" .wrapper est d'une certaine hauteur et j'aimerais que .content est la même de sorte qu'elle s'ajuste au contenu sans le faire disparaître.
Pour ça je voulais utiliser jQuery et la méthode height() pour récupérer la hauteur de .wrapper et la coller dans la css de .content.
Voici mon code jQuery:
$(document).ready(function() {
content.css("height",$(".wrapper").height());
}


Ce qui me renvoie une hauteur plus petite que celle de .wrapper. (j'imagine que c'est parce que le .wrapper est coupé par le overflow) Si il existe une méthode pour se passer de height tout en utilisant overflow-x, je prend Smiley lol

Ne voyant pas le problème si quelqu'un peut m'aider... Smiley smile

Merci d'avance Smiley cligne
Modifié par nedst (27 May 2013 - 19:06)
Merci pour ta réponse benj, j'avais déjà essayé sans succés mais en fait il faut écrire $(element).prop('scrollHeight') est ça fonctionne enfin presque parce que ça bloque toujours à l'initialisation:



$(document).ready(function() {
content = $("#content")
height = $(".wrapper").prop('scrollHeight')
content.css("height", height); //cette ligne envoie toujours une valeur coupé.

// Par contre ce code redimensionne avec la bonne valeur de la hauteur.
$(window).resize(function () {
                                   content.css("height", $(".wrapper").prop("scrollHeight") + 21);
                                   });


Si tu vois où est le problème fais le moi savoir Smiley cligne , moi je continue de chercher.
ah oui, utilise $(window).load au lieu de (document).ready.
Load() au contraire de ready() attend que tous les éléments de la page soient chargée. css, js, images...
Sujet clos
Aller à