Переполнение скрыто ниже не сверху в css

overflow-y:hidden будет скрывать вид как верхней части, так и нижней части. Можем ли мы просто показать верхнюю часть, но не нижнюю часть. Теперь мне нравится что-то вроде этого overflow-y-top:visible; overflow-y-bottom:hidden;
Аналогично overflow-x-left:visible;overflow-x-right:hidden
Так что-то мы можем сделать в css?

Конкретная проблема:

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

Теперь я хочу, чтобы содержимое было скрыто не стрелкой. Итак, есть ли какой-нибудь метод, чтобы сделать только нижнюю часть div скрытой не топ?

Ответы

Ответ 1

Вы можете добавить отступы к верхней части элемента, сколько бы вы ни хотели отобразить. Затем это может измениться на столько, сколько вам нужно, используя javascript. Если я правильно понимаю, то, что вы ищете, это то, что стрелка /viewmore всегда отображается. поэтому добавляем padding-top: 20px; или любая другая единица измерения, которая вам нравится, должна работать

Я добавил здесь простой javascript, чтобы он работал. Вы, вероятно, хотите анимацию и все такое...

Смотрите это jsfiddle: http://jsfiddle.net/KPbLY/85/

Чтобы фон не входил в отступ (как упомянуто в комментариях), используйте другой вложенный div, такой как:

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

Ответ 2

Сначала рассмотрим код HTML. Вы хотите:

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

Затем для CSS вы хотите:

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

Очень сложно сказать, что вы можете щелкнуть что-то, если нет cursor:pointer. Кроме того, мы хотим указать пользователям, когда кнопка неактивна (например, бесполезно нажать "просмотреть больше" , если вы уже просматриваете каждый

Все правильно, позвольте добраться до JavaScript. Вы упомянули, что используете библиотеку, но не тот, поэтому я просто буду считать jQuery. Во-первых, нам нужно установить наши переменные:

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

Затем, нажав #arrow, мы хотим изменить высоту #main, чтобы удалить #content2, #content3 и #content4, оставив только #content1 (в основном, мы хотим "удалить" высоту, равную differenceInHeight). Мы также хотим инактивировать #arrow, так как нет смысла говорить "смотреть меньше", если вы уже просматриваете меньше. Наконец, мы хотим удостовериться, что активна функция "просмотреть больше" (так как мы перейдем к ней позже).

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

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

Наконец, мы хотим включить #toggle_view. При нажатии на нее мы хотим снова добавить высоту, которую мы сняли (differenceInHeight). Затем, поскольку мы все уже рассмотрели, мы можем инактивировать "просмотреть больше" . Наконец, нам нужно снова активировать "просмотр меньше".

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

});

Для всего, что собрано, см. this jsFiddle.

Ответ 3

Попробуйте это

#content {
    display: none;
}

или

#content {
    visibility: hidden;
}

Ответ 4

Я думаю, что вы хотите что-то, что работает так:

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

со следующим действием jQuery:

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

Ссылка на Fiddle: http://jsfiddle.net/audetwebdesign/bQ8G3/

Вы можете добавить стиль CSS, чтобы сначала скрыть содержимое, если это необходимо. Самый чистый способ сделать это - обернуть элементы, которые будут отображаться/скрыты в родительском элементе, а затем показывать/скрывать родительский элемент.

Ответ 5

Теперь вы можете использовать css

Как это выглядит

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

Демо