Scroll bar only in one div

Question

Scroll bar only in one div

Navigation

#1 by (1 votes)

1

I'm trying to create a table with only two rows. My intention is that the table be responsive and that the scroll bar only appear on the second line if the content exceeds height . In Chrome it works perfectly more in 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%;
}

Would someone give me a hand?

css div responsivo

asked by anonymous 24.11.2017 / 20:24

1 answer

How to use objects.filter in django? How to pass structure to function?

score 1 · Answer 1

You can use the calc function to set the height of div less the height of the header and adding overflow: hidden; to 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>