Scroll bar only in a div

Asked

Viewed 1,284 times

1

I’m trying to create a table with only two lines. My intention is that the table is responsive and that the scroll bar appears only in the second row if the content exceeds the height. In the Chrome works perfectly more in the Firefox is not working.

HTML: 

<table border=1>
   <tr>
      <td height="100">
         <h2>Cabeçalho</h2>
      </td>
   </tr>
   <tr>
      <td>
         <div class="conteudo">
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo</p><br>
            <p>Olá Mundo1</p><br>
         </div>
      </td>
   </tr>
</table>

CSS:

html, body {
    margin:0;
    padding:0;
    height:100%;
}

.conteudo{
    width:100%;
    min-height:100%;
    background-color:#999;
    overflow: auto;
    color: #fff;
}

table {
    width:100%;
    height:100%;
    min-height:100%;
}

Somebody give me a hand??

css div responsive

  • Dude, the only problem is that tables are not meant to be responsive. When you set their dimensions in percentage, you end up leaving room for error, because, as we know, browsers interpret our code. This way, my advice is that in this case, try not to solve with percentage. And if possible, since the theme is responsiveness, update your controller to a list, or cards, that works much better on mobile devices for example...

  • I get it. Disregarding the question of responsiveness, why does Chrome’s scroll bar only work on div and Firefox doesn’t? Any idea?

  • Perhaps because of this implicit and explicit question. Do you know that height has a frills with a ne percentage? It only works if the parent element has a certain height, and so on. Try to put the height, even in percentage, on all parent elements of the div. These issues usually give a lot of headache in cross-browser.

  • Apparently I found a solution. I swapped the contents for an iframe. It seems that solved. :)

1 answer

3

You can use the function Calc to set the height of the div minus header height and adding overflow: hidden; in the html, body:

html, body {
    margin:0;
    padding:0;
    height:100%;
    overflow: hidden;
}

.conteudo{
    width:100%;
    height: calc(100vh - 116px);
    background-color:#999;
    overflow: auto;
    color: #fff;
}

table {
    width:100%;
}
<table border=1>
  <tr>
      <td height="100">
          <h2>Cabeçalho</h2>
      </td>
  </tr>
  <tr>
      <td>
          <div class="conteudo">
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
              <p>Olá Mundo</p><br>
          </div>
      </td>
  </tr>
</table>

  • Put face ball show ... worked ... I had already solved using iframe or instead of div. More was exactly what I was looking for. Thanks. A hug.

  • 1

    @Cicero cool guy! If you can mark in the answer to give as resolved would be very good. Abs!!

Browser other questions tagged css div responsive

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