Stacking Divs mit CSS

stimmen
0

Ich weiß, dies ist besonders schwierig, mit CSS und dem aktuellen Satz von Browsern, aber dennoch habe ich die Anforderung.

Ich muss in der Lage , 3 divs in einer Spalte zu haben. Jedes div sollte einen bestimmten Prozentsatz des vertikalen Raumes aufzunehmen (beispielsweise 33%) in der Lage sein. Der Inhalt jedes div könnte größer ist als der verfügbare Platz am Ende, so sollte die div Lage sein , die Benutzer Scrollbalken überzulaufen und geben.

Mein Problem ist, dass ich habe Probleme, herauszufinden, wie jeder Platte, dass die vertikale Höhe zu geben. Irgendwelche Ideen?

Veröffentlicht am 09/12/2008 um 17:57
quelle vom benutzer
In anderen Sprachen...                            


3 antworten

stimmen
5

Vielleicht bin ich etwas fehlt, aber gegeben:

  <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>

Was ist falsch mit:

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

    #column .cell
    {
        height: 31%;
        margin: 1%;
        background-color: green;
        overflow: auto;
    }
Beantwortet am 09/12/2008 um 18:11
quelle vom benutzer

stimmen
1

Ich werde nicht direkt Ihre Frage beantworten, aber ich hoffe, du hast mich nicht downvote für sie !!

Der größte Rahmen Ich habe hier gesehen , die ernsthaft gute Stapelung von divs macht , ist die große http://960.gs

Es ermöglicht Ihnen, feste Größen für divs gesetzt und springt divs, die nicht unten in Ihrem Layout passt. Die Techniken, die in der CSS gibt, darunter Meyers reset.css sind ausgezeichnet.

Es ist garantiert für jeden etwas dabei zu lernen, auch wenn Sie nur den CSS stehlen und verwenden Sie nicht das Netz.

Beantwortet am 03/04/2009 um 19:17
quelle vom benutzer

stimmen
1

Im Folgenden macht richtig auf IE7, Firefox 3 und Google Chrome, jetzt, dass ich die boneheaded Fehler im CSS festgelegt haben:

<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>
Beantwortet am 09/12/2008 um 18:11
quelle vom benutzer

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