Scroll DIV content without leaving the DIV

Asked

Viewed 1,330 times

6

Hello, I have a problem, I would like my DIV of the right corner to follow the content of the left until the content of the left is finished, only if I put position Fixed in the DIV of the right it is fixed until the end of the page. pictures of the problem.Someone can 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;
}

Como era pra ficar

Como está ficando

css css3 positioning

  • I liked the image, it’s very explanatory, but there’s no way you could make an example with a small part of it in the snippet code (it’s a button that adds executable code when you’re creating the question that looks like jsfiddle) or in http://jsfiddle.net :D itself

  • Paul, thank you for your support, I am providing the code as requested :)

  • Google Sticky Footer. I think this solves your problem.

1 answer

1

Use the values table+table-cell to the property display of the CSS:

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

This will make the Divs sets behave as a table, aligning their heights.

Obviously, nay works in IE < 8.
If have to support IE<8, use a conditional comment to include CSS alignment (here and here), or, ultimately, by Javascript.

If you want only part of the content to be stretched to the end, use position:absolute with bottom: 0 and the top: [xx]px. Where [xx] is the top fixed offset. If you want something more dynamic, you have to use 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>

  • Thanks for the help Andre, but it has not been solved yet the main problem that would be the right column descend until the end of the contents of the left column, example in the images, has something to do with position Fixed ? something like that?

  • @Leonardomax what doesn’t work? You don’t want the div height of the right to follow the div height of the left?

  • I updated the answer. Take a look

Browser other questions tagged css css3 positioning

You are not signed in. Login or sign up in order to post.