Ir para conteúdo
Fórum Script Brasil
  • 0

Tabela elástica com conteúdo e scroll

Fabio Brolesi

Perguntado por Fabio Brolesi,

 Share

Pergunta

Fabio Brolesi

Fabio Brolesi

Postado
Postado

Pessoal,

estou com uma dúvida.

Estou fazendo um site sem tableless (estou realmente usando tabelas, por requisição do cliente). Acontece que essa tabela tem 3 células: uma representando o cabeçalho, outra representando o menu lateral e a última sendo o conteúdo. O cliente quer que o cabeçalho e o menu lateral sempre sejam visíveis. Resolvi então fazer com que a célula de conteúdo tivesse no CSS um overflow:auto. Acontece que eu estou setando a altura da tabela, e eu queria deixar ela com 100% na largura e na altura.

Alguém já passou por isso? Sabe como resolver?

Grato.

Link para o comentário
Compartilhar em outros sites

13 respostass a esta questão

Posts Recomendados

  • 0
*FIT*

*FIT*

Postado
Postado

Se por acaso você setar um valor automatico para as outras células, ou seja, vão crescer de acordo com o conteúdo, setar 100% para essa célula, ela vai pegar o valor que resta para ela.

Pelo menos quando trabalho com divs, é isso que acontece, será que com table não funciona?

Link para o comentário
Compartilhar em outros sites
  • 0
Fabio Brolesi

Fabio Brolesi

Postado
  • Autor
Postado
Fabio Brolesi, como esta o codigo da sua página? Pode postar aqui?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
</head>
<body>
<table>
    <tr>
        <td colspan="2" valign="top">
            HEADER
        </td>
    </tr>
    <tr>
        <td valign="top">
            Menu lateral
        </td>
        <td valign="top">
        <div style="overflow: auto; height: 700px; width: 700px;">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien est, adipiscing sit amet laoreet sit amet, ornare eget libero. Nullam id odio nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc id lorem quam, vitae volutpat libero. Morbi quis augue leo, sit amet suscipit justo. Donec nibh ipsum, dictum vel mollis non, fringilla vitae eros. Phasellus porttitor libero ut ante accumsan luctus. Integer purus nunc, mollis ac aliquam cursus, accumsan et arcu. Integer lacinia mollis felis, ac suscipit sem molestie vestibulum. Etiam quis mi odio, at tincidunt nunc. Quisque interdum, lacus a suscipit adipiscing, eros urna hendrerit purus, posuere lacinia nisl nisl non tellus. Integer a facilisis nunc. Sed imperdiet elementum ante ut rutrum. Etiam at lectus ipsum. Maecenas eget mauris neque. Maecenas orci sapien, dictum id mollis ultricies, vestibulum tincidunt quam. Aliquam urna massa, vestibulum id auctor quis, hendrerit ac massa. Fusce tempus mollis posuere. Morbi magna risus, tincidunt et malesuada hendrerit, interdum vitae nunc.
</p>
<p>
Morbi in blandit leo. Etiam congue ullamcorper elit id rutrum. Nulla facilisi. Cras ut neque nec orci gravida volutpat vitae ac orci. Cras a nisl mi. Aliquam at lacus ac felis lacinia luctus. Aenean non dolor id ipsum dictum scelerisque ac id magna. Maecenas molestie sapien dignissim lectus sagittis a elementum dui mollis. Duis nec ante a felis dictum dictum sed non urna. Fusce consectetur dui dolor, tristique venenatis nulla.
</p>

<p>
Praesent at lectus ut nulla convallis cursus. Cras lectus dui, aliquam consequat malesuada at, placerat et tellus. Sed in eros eget ante sollicitudin tempor vitae sed enim. Ut sollicitudin leo eget nisl cursus euismod. Pellentesque imperdiet enim ac velit viverra non posuere mauris sollicitudin. Nulla dapibus, sapien non bibendum euismod, neque magna pulvinar turpis, sed adipiscing odio nisl ac ligula. Phasellus id convallis orci. Quisque a urna sed risus viverra tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla nunc augue, fermentum eget auctor sed, accumsan at justo. Morbi tristique ornare orci eget molestie. Sed pellentesque lorem at nunc ornare quis vestibulum elit rhoncus. Cras eu risus justo, ut sollicitudin diam. Maecenas diam erat, faucibus non euismod sit amet, posuere ac nulla. Praesent justo lectus, malesuada ut luctus id, interdum et erat. Vivamus pellentesque auctor diam et gravida. Suspendisse a justo suscipit magna ultrices sodales. Suspendisse nec nisi felis. Phasellus non nisl eu dolor interdum porttitor. Ut gravida odio at libero egestas consequat.
</p>
<p>
Nulla metus risus, dictum non adipiscing nec, aliquam at leo. Ut eu mollis mi. Nunc viverra arcu non libero bibendum in cursus metus imperdiet. Nulla consectetur lacinia urna, auctor blandit nulla rutrum eu. Morbi et massa quam. Cras ligula arcu, bibendum at placerat vel, hendrerit in eros. Cras vitae mattis mauris. Aenean faucibus mauris molestie leo ultricies in pulvinar eros adipiscing. Suspendisse risus tellus, malesuada sed pharetra sed, aliquam quis ante. Vivamus sit amet ullamcorper metus. Integer interdum, est ut dictum dapibus, tellus urna auctor est, eu vestibulum risus libero sit amet tellus. Vivamus non libero non enim facilisis interdum ac quis enim.
</p>
<p>
In eu eros id ipsum lobortis suscipit. Quisque vitae ante eget lectus pellentesque sagittis. Nam eu felis odio, eu mollis magna. Donec ultrices orci id ligula varius in vestibulum nisl bibendum. Sed in dignissim velit. Aliquam varius, leo non pretium dapibus, enim elit vulputate turpis, sit amet pellentesque odio elit a urna. Sed id libero non urna vulputate porttitor. Etiam cursus placerat ullamcorper. Nullam a mi velit. Etiam elementum fringilla lectus, vel consectetur urna vehicula vel. Fusce egestas eros et diam malesuada a egestas felis euismod. Integer vitae eros nisi, et sodales dui. Pellentesque semper risus nec tellus posuere elementum et at diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien est, adipiscing sit amet laoreet sit amet, ornare eget libero. Nullam id odio nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc id lorem quam, vitae volutpat libero. Morbi quis augue leo, sit amet suscipit justo. Donec nibh ipsum, dictum vel mollis non, fringilla vitae eros. Phasellus porttitor libero ut ante accumsan luctus. Integer purus nunc, mollis ac aliquam cursus, accumsan et arcu. Integer lacinia mollis felis, ac suscipit sem molestie vestibulum. Etiam quis mi odio, at tincidunt nunc. Quisque interdum, lacus a suscipit adipiscing, eros urna hendrerit purus, posuere lacinia nisl nisl non tellus. Integer a facilisis nunc. Sed imperdiet elementum ante ut rutrum. Etiam at lectus ipsum. Maecenas eget mauris neque. Maecenas orci sapien, dictum id mollis ultricies, vestibulum tincidunt quam. Aliquam urna massa, vestibulum id auctor quis, hendrerit ac massa. Fusce tempus mollis posuere. Morbi magna risus, tincidunt et malesuada hendrerit, interdum vitae nunc.
</p>
<p>
Morbi in blandit leo. Etiam congue ullamcorper elit id rutrum. Nulla facilisi. Cras ut neque nec orci gravida volutpat vitae ac orci. Cras a nisl mi. Aliquam at lacus ac felis lacinia luctus. Aenean non dolor id ipsum dictum scelerisque ac id magna. Maecenas molestie sapien dignissim lectus sagittis a elementum dui mollis. Duis nec ante a felis dictum dictum sed non urna. Fusce consectetur dui dolor, tristique venenatis nulla.
</p>

<p>
Praesent at lectus ut nulla convallis cursus. Cras lectus dui, aliquam consequat malesuada at, placerat et tellus. Sed in eros eget ante sollicitudin tempor vitae sed enim. Ut sollicitudin leo eget nisl cursus euismod. Pellentesque imperdiet enim ac velit viverra non posuere mauris sollicitudin. Nulla dapibus, sapien non bibendum euismod, neque magna pulvinar turpis, sed adipiscing odio nisl ac ligula. Phasellus id convallis orci. Quisque a urna sed risus viverra tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla nunc augue, fermentum eget auctor sed, accumsan at justo. Morbi tristique ornare orci eget molestie. Sed pellentesque lorem at nunc ornare quis vestibulum elit rhoncus. Cras eu risus justo, ut sollicitudin diam. Maecenas diam erat, faucibus non euismod sit amet, posuere ac nulla. Praesent justo lectus, malesuada ut luctus id, interdum et erat. Vivamus pellentesque auctor diam et gravida. Suspendisse a justo suscipit magna ultrices sodales. Suspendisse nec nisi felis. Phasellus non nisl eu dolor interdum porttitor. Ut gravida odio at libero egestas consequat.
</p>
<p>
Nulla metus risus, dictum non adipiscing nec, aliquam at leo. Ut eu mollis mi. Nunc viverra arcu non libero bibendum in cursus metus imperdiet. Nulla consectetur lacinia urna, auctor blandit nulla rutrum eu. Morbi et massa quam. Cras ligula arcu, bibendum at placerat vel, hendrerit in eros. Cras vitae mattis mauris. Aenean faucibus mauris molestie leo ultricies in pulvinar eros adipiscing. Suspendisse risus tellus, malesuada sed pharetra sed, aliquam quis ante. Vivamus sit amet ullamcorper metus. Integer interdum, est ut dictum dapibus, tellus urna auctor est, eu vestibulum risus libero sit amet tellus. Vivamus non libero non enim facilisis interdum ac quis enim.
</p>
<p>
In eu eros id ipsum lobortis suscipit. Quisque vitae ante eget lectus pellentesque sagittis. Nam eu felis odio, eu mollis magna. Donec ultrices orci id ligula varius in vestibulum nisl bibendum. Sed in dignissim velit. Aliquam varius, leo non pretium dapibus, enim elit vulputate turpis, sit amet pellentesque odio elit a urna. Sed id libero non urna vulputate porttitor. Etiam cursus placerat ullamcorper. Nullam a mi velit. Etiam elementum fringilla lectus, vel consectetur urna vehicula vel. Fusce egestas eros et diam malesuada a egestas felis euismod. Integer vitae eros nisi, et sodales dui. Pellentesque semper risus nec tellus posuere elementum et at diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien est, adipiscing sit amet laoreet sit amet, ornare eget libero. Nullam id odio nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc id lorem quam, vitae volutpat libero. Morbi quis augue leo, sit amet suscipit justo. Donec nibh ipsum, dictum vel mollis non, fringilla vitae eros. Phasellus porttitor libero ut ante accumsan luctus. Integer purus nunc, mollis ac aliquam cursus, accumsan et arcu. Integer lacinia mollis felis, ac suscipit sem molestie vestibulum. Etiam quis mi odio, at tincidunt nunc. Quisque interdum, lacus a suscipit adipiscing, eros urna hendrerit purus, posuere lacinia nisl nisl non tellus. Integer a facilisis nunc. Sed imperdiet elementum ante ut rutrum. Etiam at lectus ipsum. Maecenas eget mauris neque. Maecenas orci sapien, dictum id mollis ultricies, vestibulum tincidunt quam. Aliquam urna massa, vestibulum id auctor quis, hendrerit ac massa. Fusce tempus mollis posuere. Morbi magna risus, tincidunt et malesuada hendrerit, interdum vitae nunc.
</p>
<p>
Morbi in blandit leo. Etiam congue ullamcorper elit id rutrum. Nulla facilisi. Cras ut neque nec orci gravida volutpat vitae ac orci. Cras a nisl mi. Aliquam at lacus ac felis lacinia luctus. Aenean non dolor id ipsum dictum scelerisque ac id magna. Maecenas molestie sapien dignissim lectus sagittis a elementum dui mollis. Duis nec ante a felis dictum dictum sed non urna. Fusce consectetur dui dolor, tristique venenatis nulla.
</p>

<p>
Praesent at lectus ut nulla convallis cursus. Cras lectus dui, aliquam consequat malesuada at, placerat et tellus. Sed in eros eget ante sollicitudin tempor vitae sed enim. Ut sollicitudin leo eget nisl cursus euismod. Pellentesque imperdiet enim ac velit viverra non posuere mauris sollicitudin. Nulla dapibus, sapien non bibendum euismod, neque magna pulvinar turpis, sed adipiscing odio nisl ac ligula. Phasellus id convallis orci. Quisque a urna sed risus viverra tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla nunc augue, fermentum eget auctor sed, accumsan at justo. Morbi tristique ornare orci eget molestie. Sed pellentesque lorem at nunc ornare quis vestibulum elit rhoncus. Cras eu risus justo, ut sollicitudin diam. Maecenas diam erat, faucibus non euismod sit amet, posuere ac nulla. Praesent justo lectus, malesuada ut luctus id, interdum et erat. Vivamus pellentesque auctor diam et gravida. Suspendisse a justo suscipit magna ultrices sodales. Suspendisse nec nisi felis. Phasellus non nisl eu dolor interdum porttitor. Ut gravida odio at libero egestas consequat.
</p>
<p>
Nulla metus risus, dictum non adipiscing nec, aliquam at leo. Ut eu mollis mi. Nunc viverra arcu non libero bibendum in cursus metus imperdiet. Nulla consectetur lacinia urna, auctor blandit nulla rutrum eu. Morbi et massa quam. Cras ligula arcu, bibendum at placerat vel, hendrerit in eros. Cras vitae mattis mauris. Aenean faucibus mauris molestie leo ultricies in pulvinar eros adipiscing. Suspendisse risus tellus, malesuada sed pharetra sed, aliquam quis ante. Vivamus sit amet ullamcorper metus. Integer interdum, est ut dictum dapibus, tellus urna auctor est, eu vestibulum risus libero sit amet tellus. Vivamus non libero non enim facilisis interdum ac quis enim.
</p>
<p>
In eu eros id ipsum lobortis suscipit. Quisque vitae ante eget lectus pellentesque sagittis. Nam eu felis odio, eu mollis magna. Donec ultrices orci id ligula varius in vestibulum nisl bibendum. Sed in dignissim velit. Aliquam varius, leo non pretium dapibus, enim elit vulputate turpis, sit amet pellentesque odio elit a urna. Sed id libero non urna vulputate porttitor. Etiam cursus placerat ullamcorper. Nullam a mi velit. Etiam elementum fringilla lectus, vel consectetur urna vehicula vel. Fusce egestas eros et diam malesuada a egestas felis euismod. Integer vitae eros nisi, et sodales dui. Pellentesque semper risus nec tellus posuere elementum et at diam.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sapien est, adipiscing sit amet laoreet sit amet, ornare eget libero. Nullam id odio nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc id lorem quam, vitae volutpat libero. Morbi quis augue leo, sit amet suscipit justo. Donec nibh ipsum, dictum vel mollis non, fringilla vitae eros. Phasellus porttitor libero ut ante accumsan luctus. Integer purus nunc, mollis ac aliquam cursus, accumsan et arcu. Integer lacinia mollis felis, ac suscipit sem molestie vestibulum. Etiam quis mi odio, at tincidunt nunc. Quisque interdum, lacus a suscipit adipiscing, eros urna hendrerit purus, posuere lacinia nisl nisl non tellus. Integer a facilisis nunc. Sed imperdiet elementum ante ut rutrum. Etiam at lectus ipsum. Maecenas eget mauris neque. Maecenas orci sapien, dictum id mollis ultricies, vestibulum tincidunt quam. Aliquam urna massa, vestibulum id auctor quis, hendrerit ac massa. Fusce tempus mollis posuere. Morbi magna risus, tincidunt et malesuada hendrerit, interdum vitae nunc.
</p>
<p>
Morbi in blandit leo. Etiam congue ullamcorper elit id rutrum. Nulla facilisi. Cras ut neque nec orci gravida volutpat vitae ac orci. Cras a nisl mi. Aliquam at lacus ac felis lacinia luctus. Aenean non dolor id ipsum dictum scelerisque ac id magna. Maecenas molestie sapien dignissim lectus sagittis a elementum dui mollis. Duis nec ante a felis dictum dictum sed non urna. Fusce consectetur dui dolor, tristique venenatis nulla.
</p>

<p>
Praesent at lectus ut nulla convallis cursus. Cras lectus dui, aliquam consequat malesuada at, placerat et tellus. Sed in eros eget ante sollicitudin tempor vitae sed enim. Ut sollicitudin leo eget nisl cursus euismod. Pellentesque imperdiet enim ac velit viverra non posuere mauris sollicitudin. Nulla dapibus, sapien non bibendum euismod, neque magna pulvinar turpis, sed adipiscing odio nisl ac ligula. Phasellus id convallis orci. Quisque a urna sed risus viverra tempor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla nunc augue, fermentum eget auctor sed, accumsan at justo. Morbi tristique ornare orci eget molestie. Sed pellentesque lorem at nunc ornare quis vestibulum elit rhoncus. Cras eu risus justo, ut sollicitudin diam. Maecenas diam erat, faucibus non euismod sit amet, posuere ac nulla. Praesent justo lectus, malesuada ut luctus id, interdum et erat. Vivamus pellentesque auctor diam et gravida. Suspendisse a justo suscipit magna ultrices sodales. Suspendisse nec nisi felis. Phasellus non nisl eu dolor interdum porttitor. Ut gravida odio at libero egestas consequat.
</p>
<p>
Nulla metus risus, dictum non adipiscing nec, aliquam at leo. Ut eu mollis mi. Nunc viverra arcu non libero bibendum in cursus metus imperdiet. Nulla consectetur lacinia urna, auctor blandit nulla rutrum eu. Morbi et massa quam. Cras ligula arcu, bibendum at placerat vel, hendrerit in eros. Cras vitae mattis mauris. Aenean faucibus mauris molestie leo ultricies in pulvinar eros adipiscing. Suspendisse risus tellus, malesuada sed pharetra sed, aliquam quis ante. Vivamus sit amet ullamcorper metus. Integer interdum, est ut dictum dapibus, tellus urna auctor est, eu vestibulum risus libero sit amet tellus. Vivamus non libero non enim facilisis interdum ac quis enim.
</p>
<p>
In eu eros id ipsum lobortis suscipit. Quisque vitae ante eget lectus pellentesque sagittis. Nam eu felis odio, eu mollis magna. Donec ultrices orci id ligula varius in vestibulum nisl bibendum. Sed in dignissim velit. Aliquam varius, leo non pretium dapibus, enim elit vulputate turpis, sit amet pellentesque odio elit a urna. Sed id libero non urna vulputate porttitor. Etiam cursus placerat ullamcorper. Nullam a mi velit. Etiam elementum fringilla lectus, vel consectetur urna vehicula vel. Fusce egestas eros et diam malesuada a egestas felis euismod. Integer vitae eros nisi, et sodales dui. Pellentesque semper risus nec tellus posuere elementum et at diam.
</p>   </div>     
        </td>
    </tr>
</table>    
</body>
</html>

Link para o comentário
Compartilhar em outros sites
  • 0
*FIT*

*FIT*

Postado
Postado 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head><title></title>
</head>
<body style="overflow-y: hidden;overflow-x: hidden;">
<table>
    <tr>
        <td colspan="2" valign="top">
    
            HEADER
        
        </td>
    </tr>
    <tr>
        <td valign="top">
    
            Menu lateral
    
        </td>
        <td valign="top">
        <div style="overflow: auto; height: 90%; width: 100%;">

Aqui funcionou assim, da uma olhada ;)

Link para o comentário
Compartilhar em outros sites
  • 0
*FIT*

*FIT*

Postado
Postado

Estranho, realmente no fire fica assim como você disse, pensei que tinha testado no fire, mas devi ter sido no chrome(força do hábito,rs), desculpe!

Vou analizar aqui, mas em todo caso no chrome funcionou perfeitamente.

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...