Scroll the contents of the DIV without the contents exiting the DIV

Question

Scroll the contents of the DIV without the contents exiting the DIV

Navigation

#1 by (1 votes)

6

Hello, I have a problem, I would like my DIV from the right corner to accompany the contents of the left until the contents of the left, but if I put position fixed in the right DIV, it stays fixed until the end of the page. Can anybody help me? :

/* DIV COM AS DUAS COLUNA */
#paginas {
   max-width: 1024px;
   display:block;
   float:left;
}

/* DIV DA ESQUERDA COM CONTEÚDO DE ROLAGEM */
#paginas-coluna1 {
  display:block;
  float:left;
  max-width:520px;
}

/* DIV DA DIREITA QUE DEVERIA FICAR FIXA AO LADO DO CONTEÚDO DA ESQUERDA ATÉ ACABAR O CONTEÚDO DA DIV PAGINAS-COLUNA1*/
#paginas-coluna2 {
  display:block;
  float: right;
  max-width: 504px;
  height: 730px;
}



/*CONTEUDOS INTERNO DA DIV DA DIREITA */ 


#campo-video2 {
  display:block;
  float:right;
  height: 270px;
  width: 466px;
}
#carga-horaria {
  width:273px;
  height:106px;
  display:block;
  background-color:#2BABE1;
  float: right;
  color: #fff;
  margin-top: 20px;
  text-align: center;
  font-family: arial;
  font-weight: bold;
  padding: 18px;
}
#botao-matriculapagina {
  width:194px;
  height:106px;
  display:block;
  float:right;
  background-color: #008DD1;
  margin-top: 20px;
  color: #fff;
  font-weight: bold;
  padding: 20px;
  text-align: center;
  font-size: 17px;
}
#botao-matriculapagina2 {
  width:91px;
  height:32px;
  line-height:32px;
  font-weight:normal;
  margin: 0 auto;
  background-color:#2BABE1;
  font-size:14px;
  cursor:pointer;
}

css css3 posicionamento

asked by anonymous 14.11.2014 / 20:27

1 answer

Problem retrieving inserted id How to increase the text size of a WebView?

score 1 · Answer 1

Use the table + table-cell values for the CSS property display :

.div-pai {
    display: table;
    width: 100%;
}
.div-filha-esquerda, .div-filha-direita {
    display: table-cell;
    width: 50%;
}

This will make the div sets behave like a table, by aligning their heights.

Obviously does not work in IE < 8. If you have to support IE to include CSS alignment ( here and here ), or, lastly, by JavaScript.

If you want only part of the content to be stretched to the end, use position:absolute with bottom: 0 and top: [xx]px . Where [xx] is the fixed displacement of the top. If you want something more dynamic, it will have to be JavaScript, I believe.

.conteudo-esticado {
  position: absolute;
    top: 85px;
    right: 0;
    bottom: 0;
    left: 0;
}
.div-esticado-esq, .div-esticado-dir {
  float: left;
  height: 100%;
  width: 50%;
}

.paginas {
  display: table;
  max-width: 1024px;
  width: 100%;
}
.paginas-coluna1,
.paginas-coluna2 {
  display: table-cell;
  position: relative;
  width: 50%;
}
.paginas-coluna1 { background: #ff9999; }
.paginas-coluna2 { background: #9999ff; }

.conteudo-espichado {
  border: 1px solid #000;
  position: absolute;
    top: 85px;
    right: 0;
    bottom: 0;
    left: 0;
  width: 100%;
}
.div-espichada-esq, .div-espichada-dir {
  float: left;
  height: 100%;
  width: 50%;
}
.div-espichada-esq { background: #dd4444; }
.div-espichada-dir { background: #4444dd; }

<div class="paginas">
  <div class="paginas-coluna1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie turpis quis urna dapibus gravida. Maecenas ac mi id nibh volutpat ultrices. Duis vehicula nec urna ac volutpat. Nulla nec tortor sit amet diam iaculis euismod. In hac habitasse platea
    dictumst. Nulla facilisi. Quisque consequat quam id leo efficitur hendrerit. Pellentesque luctus mattis massa, quis dapibus erat ullamcorper ut. Nunc neque justo, consequat ac nunc nec, molestie dictum nisi. Pellentesque suscipit ac nunc id bibendum.
    Ut nec pharetra odio. Maecenas gravida erat vel condimentum tempus. Duis sit amet massa lobortis, pellentesque sapien et, feugiat mauris. Curabitur ac urna nec magna bibendum dapibus id sit amet ex. Sed et leo posuere, aliquam mi vel, auctor lorem.
    Cras blandit orci vel diam ullamcorper commodo.
  </div>
  <div class="paginas-coluna2">
    <div style="height:80px">imagem aqui por exemplo, ou uma div com altura fixa</div>
    <div class="conteudo-espichado">
      <div class="div-espichada-esq">conteudo</div>
      <div class="div-espichada-dir">conteudo</div>
    </div>
  </div>
</div>

<br>
<br>

<div class="paginas">
  <div class="paginas-coluna1">
  </div>
  <div class="paginas-coluna2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla molestie turpis quis urna dapibus gravida. Maecenas ac mi id nibh volutpat ultrices. Duis vehicula nec urna ac volutpat. Nulla nec tortor sit amet diam iaculis euismod. In hac habitasse platea
    dictumst. Nulla facilisi. Quisque consequat quam id leo efficitur hendrerit. Pellentesque luctus mattis massa, quis dapibus erat ullamcorper ut. Nunc neque justo, consequat ac nunc nec, molestie dictum nisi. Pellentesque suscipit ac nunc id bibendum.
    Ut nec pharetra odio. Maecenas gravida erat vel condimentum tempus. Duis sit amet massa lobortis, pellentesque sapien et, feugiat mauris. Curabitur ac urna nec magna bibendum dapibus id sit amet ex. Sed et leo posuere, aliquam mi vel, auctor lorem.
    Cras blandit orci vel diam ullamcorper commodo.
  </div>
</div>