Auto height div с переполнением и прокруткой при необходимости.

Ответ 1

Хорошо, после долгих исследований я нашел обходное решение, которое делает то, что мне нужно: http://jsfiddle.net/CqB3d/25/

CSS

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#caixa{
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}
#framecontentTop, #framecontentBottom{
position: absolute; 
top: 0;   
width: 800px; 
height: 100px; /*Height of top frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white; 
}

#framecontentBottom{
top: auto;
bottom: 0; 
height: 110px; /*Height of bottom frame div*/
overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
background-color: navy;
color: white;
}

#maincontent{
position: fixed; 
top: 100px; /*Set top value to HeightOfTopFrameDiv*/
margin-left:auto;
    margin-right: auto;
bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/
overflow: auto; 
background: #fff;
    width: 800px;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 800px; 
}

HTML:

<div id="framecontentBottom">
<div class="innertube">

<h3>Sample text here</h3>

</div>
</div>


<div id="maincontent">
<div class="innertube">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed scelerisque, ligula hendrerit euismod auctor, diam nunc sollicitudin nibh, id luctus eros nibh porta tellus. Phasellus sed suscipit dolor. Quisque at mi dolor, eu fermentum turpis. Nunc posuere venenatis est, in sagittis nulla consectetur eget... //much longer text...
</div>
</div>
</div>

может пока не работать с горизонтальной вещью, но это уже работа!

В основном я отказался от "начальных" ящиков - внутри коробки - внутри коробки и использовал фиксированное позиционирование с динамическими свойствами высоты и переполнения.

Надеюсь, это поможет тем, кто позже найдет вопрос!

EDIT: Это окончательный ответ.

Ответ 2

Быстрый ответ с основными точками

В значительной степени тот же ответ, что и лучший ответ от @Joum, чтобы оживить ваш поиск, чтобы попытаться найти ответ на поставленный вопрос и сэкономить время на расшифровку происходящего в синтаксисе -

Ответ

Установите фиксированный атрибут позиции, установите верхний и нижний атрибуты по своему вкусу для элемента или div, для которого вы хотите иметь "автоматический" размер по сравнению с его родительским элементом, а затем установите переполнение в скрытое.

.YourClass && || #YourId{
   position:fixed;
   top:10px;
   bottom:10px;
   width:100%; //Do not forget width
   overflow-y:auto;
}

Wallah! Это все, что вам нужно для вашего специального элемента, который вы хотите иметь динамическую высоту в соответствии с размером экрана и динамическим входящим контентом, сохраняя при этом возможность прокрутки.

Ответ 3

Я удивлен, что никто не упомянул calc().

Я не смог разглядеть ваш конкретный случай из ваших скриптов, но я понимаю вашу проблему: вам нужен контейнер height: 100%, который все еще может использовать overflow-y: auto.

Это не работает из коробки, потому что overflow требует некоторого жесткого ограничения размера, чтобы знать, когда он должен начать обработку переполнения. Итак, если вы пошли с height: 100px, он работал бы так, как ожидалось.

Хорошей новостью является что calc() может помочь, но это не так просто, как height: 100%.

calc() позволяет объединять произвольные единицы измерения.

Итак, для ситуации, которую вы описываете на картинке, вы включаете:

Поскольку все элементы выше и ниже розового div имеют известную высоту (скажем, 200px в общей высоте), вы можете использовать calc для определения высоты оле-розового цвета:

height: calc(100vh - 200px);

или, 'height - 100% высоты просмотра минус 200px.'

Тогда overflow-y: auto должен работать как шарм.

Ответ 4

Попробуйте следующее:
CSS:

#content {
  margin: 0 auto;
  border: 1px solid red;
  width:800px;
  position:absolute;
  bottom:0px;
  top:0px;
  overflow:auto
}

HTML:

<body>
<div id="content">
...content goes here...
</div>
<body>

Если вам не нравится абсолютное позиционирование в этом случае, просто можно играть с созданием родительского и дочернего div для этого, как с position:relative.

РЕДАКТИРОВАТЬ: Ниже должно работать (я только что нарисовал css inline на данный момент):

<div style="margin:0 auto; width:800px; height:100%; overflow:hidden">
<div style="border: 1px solid red; width:800px; position:absolute; bottom:0px; top:0px; overflow:auto">
...content goes here...
</div>
</div>

Ответ 5

Это горизонтальное решение с использованием FlexBox и без позитивного позиционирования absolute.

body {
  height: 100vh;
  margin: 0;
  display: flex;
  flex-direction: row;
}

#left,
#right {
  flex-grow: 1;
}

#left {
  background-color: lightgrey;
  flex-basis: 33%;
  flex-shrink: 0;
}

#right {
  background-color: aliceblue;
  display: flex;
  flex-direction: row;
  flex-basis: 66%;
  overflow: scroll;   /* other browsers */
  overflow: overlay;  /* Chrome */
}

.item {
  width: 150px;
  background-color: darkseagreen;
  flex-shrink: 0;
  margin-left: 10px;
}

<html>

<body>
  <section id="left"></section>
  <section id="right">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </section>
</body>

</html>

Ответ 6

Это то, что мне удалось сделать до сих пор. Наверное, это то, что вы пытаетесь вытащить. Единственное, что я все еще не могу присвоить правильную высоту контейнеру DIV.

- > JSFIDDLE

Ответ 7

Я думаю, это довольно легко. просто используйте этот css

.content {
   width: 100%;
   height:(what u wanna give);
   float: left;
   position: fixed;
   overflow: auto;
   overflow-y: auto;
   overflow-x: none;
}

после этого просто дайте этому классу ur div так же, как -

<div class="content">your stuff goes in...</div>