Empilhamento Divs com CSS

votos
0

Eu sei que isto é particularmente difícil com CSS e o conjunto atual de navegadores, mas mesmo assim eu tenho a exigência.

Eu preciso ser capaz de ter 3 divs em uma coluna. Cada div deve ser capaz de assumir uma determinada percentagem do espaço vertical (por exemplo, 33%). O conteúdo de cada div poderia acabar sendo maior do que o espaço disponível, de modo que o div deve ser capaz de transbordar e dar as barras de rolagem do usuário.

Meu problema é que eu estou tendo dificuldade para descobrir como dar a cada painel que a altura vertical. Alguma ideia?

Publicado 09/12/2008 em 17:57
fonte usuário
Em outras línguas...                            


3 respostas

votos
1

O seguinte torna corretamente no IE7, Firefox 3, e Google Chrome, agora que eu já corrigiu o erro boneheaded na CSS:

<html>
<head>
<style type="text/css">
#one {height: 33%; overflow: auto;}
#two {height: 33%; overflow: auto;}
#three {height: 33%; overflow: auto;}
</style>
</head>

<body>

<p id="one">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

<p id="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

<p id="three">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget pede et eros adipiscing ornare. Sed ipsum dui, pulvinar eget, iaculis at, fermentum ac, lorem. Phasellus bibendum diam a nibh. In turpis lacus, condimentum id, faucibus ut, rhoncus id, enim. Quisque nec nunc at lacus placerat facilisis. Etiam mi lectus, placerat sit amet, ultricies at, tempus in, augue. Nunc in ante et erat ullamcorper pulvinar. Etiam turpis sapien, consequat vel, dignissim in, porttitor at, lectus. Integer dictum, massa eu scelerisque pretium, magna ligula auctor sapien, et tincidunt sem libero ac arcu. In at metus. Quisque quis diam at ipsum eleifend volutpat. Mauris tempor rutrum lectus. Proin fermentum nisi eu sem. Nulla eu eros. Donec velit metus, tristique tincidunt, egestas sed, tincidunt fermentum, nibh. In hac habitasse platea dictumst. Vivamus porta. Proin rhoncus ullamcorper leo. Nulla viverra, eros a dictum interdum, ante diam luctus metus, non placerat tellus metus ac lacus.</p>

</body>

</html>
Respondeu 09/12/2008 em 18:11
fonte usuário

votos
5

Talvez eu estou faltando alguma coisa, mas tendo em conta:

  <div id="column">
    <div id="a" class="cell">A</div>
    <div id="b" class="cell">B</div>
    <div id="c" class="cell">C</div>
  </div>

O que há de errado com:

    #column
    {
        height: 100%;
        width: 20%;
    }

    #column .cell
    {
        height: 31%;
        margin: 1%;
        background-color: green;
        overflow: auto;
    }
Respondeu 09/12/2008 em 18:11
fonte usuário

votos
1

Eu não vou responder diretamente sua pergunta, mas eu espero que você não downvote me para ele !!

O maior quadro que eu vi aqui que faz seriamente bom empilhamento de divs é o grande http://960.gs

Ele permite que você defina tamanhos fixos para divs e salta divs que não cabem em seu layout abaixo. As técnicas do css lá, incluindo reset.css de Meyer são excelentes.

Ele garantiu aprendizagem para todos, mesmo que você acabou de roubar o css e não usar a grade.

Respondeu 03/04/2009 em 19:17
fonte usuário

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more