web-dev-qa-db-fra.com

débordement caché ci-dessous pas top en css

overflow-y:hidden masquera la vue à la fois la partie supérieure et la partie inférieure. Pouvons-nous simplement montrer la partie supérieure mais pas la partie inférieure . Maintenant, j'aime quelque chose comme ceci overflow-y-top:visible; overflow-y-bottom:hidden;
De même overflow-x-left:visible;overflow-x-right:hidden
Y a-t-il quelque chose que nous puissions faire en CSS?

Problème spécifique mien:

HTML:

<div id="main">
   <div id="arrow">▲</div>
   <div id="content">id="toggle_view">view more</div>
   <div id="content1"> this is any thext</div>
   <div id="content2"> this is any thext</div>
   <div id="content3"> this is any thext</div>
   <div id="content4"> this is any thext</div>
</div>

Css: 

#main {overflow-y:hidden;height:100px;position:relative}
#arrow {position:absolute;top:-30px;}
#toggle_view{position:absolute;right:0;bottom:0;}

Maintenant, je veux que le contenu ne soit pas caché par la flèche . Y a-t-il une technique pour que la partie ci-dessous de div cachée ne soit pas top?

cssoverflow
13
vusan

Vous pouvez ajouter du rembourrage en haut de l'élément en fonction de la quantité d'affichage que vous souhaitez afficher. Vous pouvez alors modifier le nombre de fois que vous avez besoin d'utiliser JavaScript. Si je comprends bien, ce que vous cherchez, c’est que la flèche/vue est toujours affichée. donc, ajouter un padding-top: 20px; ou l’unité de mesure de votre choix devrait fonctionner

J'ai ajouté quelques javascript simple ici juste pour le faire fonctionner. Vous voulez probablement des animations et tout ça ...

Voir ce jsfiddle: http://jsfiddle.net/KPbLY/85/

Pour que l'arrière-plan n'entre pas dans le remplissage (comme indiqué dans les commentaires), utilisez un autre div imbriqué tel que:

http://jsfiddle.net/KPbLY/87/

8
Don

Regardons d'abord le code HTML. Tu veux:

<div id="arrow">▲ (view less)</div>
<div id="main">
   <div id="content1">text from #content1</div>
   <div id="content2">text from #content2</div>
   <div id="content3">text from #content3</div>
   <div id="content4">text from #content4</div>
</div>
<div id="toggle_view">view more</div>

Ensuite, pour le CSS, vous voulez:

#main {overflow-y:hidden;height:100px;position:relative}
#arrow {cursor: pointer;}
#toggle_view{ cursor: pointer;}
.inactive { color: gray; }

C'est vraiment difficile de dire que vous pouvez cliquer sur quelque chose s'il n'y a pas de cursor:pointer. De plus, nous voulons indiquer aux utilisateurs quand un bouton est inactif (par exemple, il est inutile de cliquer sur "Voir plus" si vous visualisez déjà tous les

Très bien, passons au JavaScript. Vous avez mentionné que vous utilisiez une bibliothèque, mais pas laquelle, donc je supposerai simplement jQuery. Premièrement, nous devons définir nos variables:

var heightOfMain = $('#main').height();
var heightOfContent1 = $('#content1').height();
var differenceInHeight = heightOfMain - heightOfContent1;

Ensuite, lorsque vous cliquez sur #arrow, nous voulons changer la hauteur de #main pour supprimer #content2, #content3 et #content4, en ne laissant que #content1 (nous voulons essentiellement "supprimer" une hauteur égale à differenceInHeight). Nous voulons aussi ensuite désactiver #arrow, car il est inutile de dire "Voir moins" si vous visualisez déjà moins. Enfin, nous voulons nous assurer que "Voir plus" est actif (puisque nous le basculerons plus tard).

$('#arrow').click(function() {

    $('#main').animate({
        height: heightOfContent1 
    });  
     $(this).addClass('inactive');
     $('#toggle_view').removeClass('inactive');
});

Enfin, nous voulons activer #toggle_view. En cliquant dessus, nous voulons rajouter la hauteur que nous avons décollée (differenceInHeight). Ensuite, puisque tout est déjà visualisé, nous pouvons désactiver "voir plus". Enfin, nous devons réactiver "Voir moins". 

$('#toggle_view').click(function() {

    //you want to remove contents 2 through 4, which have a combined height
    //of differenceInHeight
    $('#main').animate({
        height: differenceInHeight });  
        $(this).hide();
        $('#arrow').show();

});

Pour tout mettre en place, voir ce jsFiddle . 

2
Fluoxetine

Essaye ça

#content {
    display: none;
}

ou

#content {
    visibility: hidden;
}
1
Johan

Maintenant, vous pouvez utiliser css 

Comme ça 

#main {overflow-y:hidden;height:100px;position:relative; background:red;}

#toggle_view{position:absolute;right:0;bottom:0;}

#arrow {position:absolute;top:50px;right:0;background:green;padding:5px; cursor:pointer;z-index:2;}
#main > #arrow ~ div{display:none;}
#main > #arrow:focus ~ div, #main > #arrow:hover ~ div{display:block;}

Démo

0
Rohit Azad

Je pense que vous voulez quelque chose qui fonctionne comme ceci:

<div class="show-panel">
   <div class="arrow">&#9650;</div>
   <div class="content">This is some content... 
                        several paragraphs for example.</div>
</div>

avec l'action jQuery suivante:

$(".arrow").click(function(){
    $(this).next().toggle();
});

Référence Fiddle: http://jsfiddle.net/audetwebdesign/bQ8G3/

Vous pouvez ajouter un style CSS pour masquer initialement le contenu si vous le souhaitez. Le moyen le plus propre consiste à envelopper les éléments à afficher/masquer dans un élément parent, puis à afficher/masquer l'élément parent.

0
Marc Audet