overflow nascosto sotto non superiore in css

Question

overflow-y:hidden nasconde la vista sia nella parte superiore che nella parte inferiore. Possiamo solo mostrare la parte superiore ma non la parte inferiore. Ora mi piace qualcosa di simile overflow-y-top:visible; overflow-y-bottom:hidden;
Analogamente overflow-x-left:visible;overflow-x-right:hidden
Quindi c'è qualcosa che possiamo fare in css?

specifico problema delle mine:

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;} 

Ora voglio rendere il contenuto nascosto non la freccia. Quindi c'è qualche tecnica per rendere solo la porzione inferiore di div nascosta non superiore?

Answer 1

È possibile aggiungere il riempimento alla parte superiore dell'elemento per quanto si desidera visualizzare, Ciò potrebbe quindi cambiare a quanto necessario utilizzando javascript. Se capisco correttamente però, quello che stai cercando è che la freccia/viewmore sia sempre visualizzata. quindi aggiungere un padding-top: 20px; o qualsiasi altra unità di misura che ti piace dovrebbe funzionare

Ho aggiunto qualche semplice javascript qui solo per farlo funzionare. Probabilmente si desidera animazioni e tutto ciò che ...

Vai a questa jsfiddle: http://jsfiddle.net/KPbLY/3/

Per avere lo sfondo non andare in l'imbottitura (come indicato nei commenti) utilizzare un altro div nidificato come ad esempio:

http://jsfiddle.net/KPbLY/4/

Answer 2

Prova questo

#content { 
    display: none; 
} 

o

#content { 
    visibility: hidden; 
} 

Answer 3

Penso che si desidera qualcosa che funziona in questo modo:

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

con la seguente azione jQuery:

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

Fiddle Riferimento: http://jsfiddle.net/audetwebdesign/bQ8G3/

È possibile aggiungere uno stile CSS per nascondere inizialmente il contenuto, se ciò viene richiesto. Il modo più semplice per farlo è avvolgere gli elementi da mostrare/nascondere in un elemento genitore e quindi mostrare/nascondere l'elemento genitore.

Answer 4

ora è possibile utilizzato per css

Come come questo

#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;} 

Demo

Answer 5

Diamo un'occhiata al codice HTML prima. Si desidera:

<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> 

Poi per il CSS, si vuole:

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

E 'davvero difficile dire qualcosa è possibile fare clic se non c'è cursor:pointer. Inoltre, vogliamo indicare agli utenti quando un pulsante è inattivo (es. È inutile fare clic su "visualizza di più" se lo stai già visualizzando ogni

Tutti onesti, andiamo al JavaScript. usando una libreria, ma non quale, quindi assumerò solo jQuery.In primo luogo, abbiamo bisogno di impostare le nostre variabili:

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

Poi, quando si clicca su #arrow, vogliamo cambiare l'altezza di #main per rimuovere #content2, #content3, e #content4, lasciando solo #content1 alle spalle (in pratica, vogliamo "rimuovere" un'altezza pari a differenceInHeight). Desideriamo anche inattivare lo #arrow, poiché non ha senso dire "visualizza meno" se stai già visualizzando di meno. Infine, vogliamo essere sicuri che "view more" sia attivo (visto che lo cambieremo più avanti).

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

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

Infine, vogliamo abilitare #toggle_view. Facendo clic su questo, vogliamo aggiungere nuovamente l'altezza che abbiamo tolto (differenceInHeight). Quindi, dato che abbiamo già visto tutto, possiamo disattivare la "visualizzazione di più". Infine, dobbiamo attivare di nuovo "visualizza di meno".

$('#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(); 

}); 

Per tutto ciò che viene messo insieme, vedere this jsFiddle.