4

Estou a tentar dar height e overflow-y numa div para limitar o tamanho da div e adicionar uma scroll.

Algo como isto:

inserir a descrição da imagem aqui

Para tal estou a carregar uma lista de dados vindos da BD (estou a trabalhar em ASP MVC) na div, e adiciono a height e o overflow-y na mesma:

<div id="divListaEstabs" style="height: 60%; overflow-y: scroll;">
        <input type="checkbox" id="selectall">Seleccionar todos
        <br />
        @foreach (var item in ViewBag.estabelecimentos)
        {
            <input type="checkbox" value="@item.IdFilial" name="filialCopia"/>@item.Nome<br />
        }
</div>

Problema?

É adicionada a scroll na div, mas a mesma não fica limitada na altura, aumentando o tamanho da página (como mostra a imagem): inserir a descrição da imagem aqui

2 Respostas 2

4

Tu tens a altura(height) em %. Experimenta em px:

<div id="divListaEstabs" style="height: 60px; overflow-y: scroll;">
        <input type="checkbox" id="selectall">Seleccionar todos
        <br />
        @foreach (var item in ViewBag.estabelecimentos)
        {
            <input type="checkbox" value="@item.IdFilial" name="filialCopia"/>@item.Nome<br />
        }
</div>
1
  • Era mesmo esse o erro :) Commented 17/04/2014 às 10:13
1

Tente mudar, de heigth para max-heigth, assim vc terá mais flexibilidade e responsividade no modal:

<div id="divListaEstabs" style="max-height: 10em; overflow-y: scroll;">
    <input type="checkbox" id="selectall">Seleccionar todos
    <br />
    @foreach (var item in ViewBag.estabelecimentos)
    {
        <input type="checkbox" value="@item.IdFilial" name="filialCopia"/>@item.Nome<br />
    }
</div>
3
  • eu experimentei isso. O erro estava mesmo onde o pc_oc disse: ao usar % para definir a height deixar de dar, tem de ser com px Commented 17/04/2014 às 11:30
  • Eu usaria outra unidade então como em, para manter a responsividade da tela.
    – andervoc
    Commented 17/04/2014 às 11:38
  • Exacto, assim também dá Commented 17/04/2014 às 11:53

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .