Как скрыть переполнение «сверху»?

Question

Как скрыть переполнение «сверху»?

0

Есть ли способ скрыть переполнение div "сверху", а не "внизу"?

Этот jsFiddle иллюстрирует, что я имею в виду. Вложенный div имеет overflow-y:hidden, но это скрывает нижнюю часть его содержимого. Я хочу скрыть верхнюю часть.

_{Обязательный исходный код (дословно из jsFiddle):}

*{
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}
*{margin:0;padding:0;border:0;}
#centered{
  margin:20px auto 0;
  overflow-y:hidden;
  height:150px;
  outline:5px solid green;
}
#centered,
#top,
#bottom{width:150px;}
#top   {height:120px;background-color:red;}
#bottom{height:150px;background-color:#555;}
#top,#bottom{
  color:white;
  text-align:center;
  padding:0 10px;
}
#top{padding-top:50px;}
#bottom{padding-top:60px;}

<div id="centered">
  <div id="top">
    this div should be "overflowed away"
    <em>at the top!</em>
  </div>
  <div id="bottom">
    this content should show
  </div>
</div>

kjo 02 дек. 2013, в 18:02

Источник

0

Вы имеете в виду, что вы хотите, чтобы контент проходил снизу вверх, а не сверху вниз?
BoltClock♦ 02 дек. 2013, в 16:46
0

Я думаю, что инкапсуляция всего в контейнере, а затем выравнивание по дну должны помочь: jsfiddle.net/eithe/fK867/6 Вам все равно придется поэкспериментировать с отступами.
eithed 02 дек. 2013, в 16:48

Теги:

html

css

1 ответ

Ещё вопросы

Вы имеете в виду, что вы хотите, чтобы контент проходил снизу вверх, а не сверху вниз?
Я думаю, что инкапсуляция всего в контейнере, а затем выравнивание по дну должны помочь: jsfiddle.net/eithe/fK867/6 Вам все равно придется поэкспериментировать с отступами.

SW4 · Answer 1 · 2013-12-02T14-16-00.000Z

См. Этот FIDDLE, вам нужно обернуть содержимое в absolute позиционированном DIV с bottom значением, равным 0, в то время как родительскому контейнеру задана позиция relative

HTML

<div id="centered">
    <div id='content'>
        <div id="top">this div should be "overflowed away" <em>at the top!</em>

        </div>
        <div id="bottom">this content should show</div>
    </div>
</div>

CSS

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}
#centered {
    margin:20px auto;
    overflow-y:hidden;
    height:150px;
    border:5px solid green;
    width:150px;
    position:relative;
}
#content {
    bottom:0px;
    position:absolute;
}
#top {
    min-height:120px;
    background-color:red;
    padding-top:50px;
}
#bottom {
    background-color:#555;
    padding:60px 10px 0 0;    
}
#top, #bottom {
    color:white;
    text-align:center;
}

Не совсем верно: jsfiddle.net/isherwood/fK867/4
Смотрите: jsfiddle.net/fK867/9 - там были некоторые плохо структурированные CSS и конфликтующие свойства
Здорово. Вероятно, следует обновить скрипку в ответе.