[CSS] Height: 100% - Softwareontwikkeling

woensdag 17 augustus 2005 18:15

Acties:

Topicstarter

Ik ben bezig met een website waarin ik in principe 1 vlak wil gebruiken voor de inhoud. De inhoud wordt vervolgens verdeeld over 2 kolommen. Ik dacht dus de 2 kolommen (col1 en col2) netjes in het grote vlak (content) te plaatsen. Om het er mooi uit te laten zien heb ik de hoogte van col1 en col2 op 100% gezet.

In theorie werkt dit ook, want als je content een hoogte geeft (die groter is dan de hoogte in col1 en col2) dan schalen col1 en col2 netjes mee.

Alleen nu wordt content niet even hoog als de hoogste kolom (col1 of col2). Kortom... hoe krijg ik content even hoog als de hoogste van col1 en col2?

Ik heb al gezocht, maar uiteraard weet ik eigenlijk niet waar ik op moet zoeken. Ik kan me ook niet voorstellen dat dit onmogelijk is en waarschijnlijk is de oplossing zelfs heel eenvoudig

Wat doe ik fout en wat kan de oplossing zijn?

code:

<html>
<head>
<style type="text/css" media="all">
.content {
    position: absolute;
    top: 10px;
    left: 0px;
    width: 500px;
    z-index: 1;
    background-color: #CE0203;
    border: 1px dashed;
}
.col1 {
    position: absolute;
    top: 0px;
    left: 250px;
    width: 240px;
    height: 100%;
    z-index: 1;
    background-color: #c5c5c5;
}
.col2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 240px;
    height: 100%;
    z-index: 1;
    background-color: #c5c5c5;
}
</style>
</head>

<body>

<div class="content">
<div class="col1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tincidunt. Nulla eleifend. Etiam ut urna quis arcu tincidunt eleifend. Nam consectetuer turpis eget massa. Praesent feugiat blandit enim. Aliquam pharetra, lacus id tristique bibendum, ligula ipsum lacinia neque, ac accumsan ante turpis sit amet risus. Cras eros nisl, gravida ac, tempus ac, bibendum non, nunc. Praesent sed erat. Etiam nulla. Sed ac velit. Proin a erat. Phasellus tempus pede in orci. Sed varius, turpis nec scelerisque hendrerit, tellus mi pulvinar lorem, at facilisis odio nibh ultrices ligula. Morbi pellentesque congue risus. Aenean tellus.</div>
<div class="col2">
In bibendum
</div>
</div>

</body>
</html>

Oeps, foutje in topic titel.... Ik weet niet hoe ik dat nog kan wijzigen.

[ Voor 7% gewijzigd door reddevil001 op 17-08-2005 18:16 ]

None

woensdag 17 augustus 2005 18:18

Acties:

Leftblank

Een oplossing voor je eerste probleem heb ik niet, voor 't tweede wel; klikken op de knop Afbeeldingslocatie: http://gathering.tweakers.net/global/templates/tweakers/images/icons/icon_hand.gif

links van je topicname bovenaan de page; dan past een mod em wel aan waarschijnlijk

woensdag 17 augustus 2005 18:24

Acties:

--MeAngry--

aka Qonstrukt

Je kunt de ene kolom in de andere kolom plaatsen, en dan zorgen dat de geneste kolom een 100% hoogte heeft zorgt ervoor dat deze altijd even hoog is als de andere kolom.

Tesla Model Y RWD (2024)

woensdag 17 augustus 2005 18:30

Acties:

Luxx

Hijs nu het zeil gezwind...

Hoe ik het precies moet uitleggen weet ik niet, volgens mij komt het omdat de 100% de hoogte van 'content' is (dat is zijn parent?), deze is '0' (zie dashed border) dus maken ze de div's col1 en col2 zo klein mogelijk. Als je content alsvolgt definieerd, werkt het wel:

code:

.content {
     z-index: 1;
    background-color: #CE0203;
    border: 1px dashed;
}

Waarom gebruik je die div trouwens sowieso? als je toch absoluut gaat positioneren is hij vrij onnodig... toch?

Als je dan ook nog even aan body meegeeft dat hij geen padding of margins gebruikt

code:

body
{
    
    padding:0px;
    margin:0px;
}

staat de 'content' nog op de juiste plaats ook.

[ Voor 15% gewijzigd door Luxx op 17-08-2005 18:31 ]

HYEHEHEHEEHHEEHee, hier had iets zinnigs kunnen staan, maar dat is niet.

woensdag 17 augustus 2005 18:35

Acties:

Willem

h

Motor onderhoud bijhouden

woensdag 17 augustus 2005 18:43

Acties:

reddevil001

Topicstarter

Luxx schreef op woensdag 17 augustus 2005 @ 18:30:
Hoe ik het precies moet uitleggen weet ik niet, volgens mij komt het omdat de 100% de hoogte van 'content' is (dat is zijn parent?), deze is '0' (zie dashed border) dus maken ze de div's col1 en col2 zo klein mogelijk. Als je content alsvolgt definieerd, werkt het wel:
code:
1
2
3
4
5
.content {
     z-index: 1;
    background-color: #CE0203;
    border: 1px dashed;
}

Hmm, ik zit in een soort loopje te denken...
Zowel kolom 1 als 2 moeten de 100% hoogte krijgen van content. Maar content moet wel eerst weten hoe lang de langste van kolom 1 en 2 is om te kijken hoe hoog content moet worden.

Ik moet dus eigenlijk vragen hoe ik het voor elkaar krijg dat content (de parent van col1 en col2) de hoogste hoogte van col1 en col2 krijgt. Is col1 hoger dan col2, dan moet content de hoogte van col1 krijgen. Is col2 hoger dan col1, dan moet content de hoogte van col2 krijgen. Uiteraard moet de kleinere kolom vervolgens weer even hoog worden als de andere kolom.

Waarom gebruik je die div trouwens sowieso? als je toch absoluut gaat positioneren is hij vrij onnodig... toch?

Hij moet absoluut, want als je hem relatief maak, dan gaat col2 schuin onder col1 staan (i.p.v. naast elkaar).
Verder is het enige alternatief om tabellen te gaan gebruiken, maar dan heb je weer minder mogelijkheen om bijvoorbeeld m.b.v. css een print-versie te maken van de website.

None

woensdag 17 augustus 2005 19:00

Acties:

tweakerbee

dus..?

Wat jij wilt kan gewoon niet. Je kunt hem of laten flowen of een hoogte meegeven. "De langste van de twee" is gewoon geen optie.
Schijnbaar zijn er wel hacks.

http://www.fu2k.org/alex/css/layouts/3Col_NN4_FMFM_C.mhtml

Dat is mijn geweldige idee.

[ Voor 39% gewijzigd door tweakerbee op 17-08-2005 19:43 ]

You can't have everything. Where would you put it?

woensdag 17 augustus 2005 19:02

Acties:

Luxx

Hijs nu het zeil gezwind...

Hmm... een smerige workaround, die je mischien wel kan helpen:

code:

<style type="text/css" media="all">

body{
    padding:0px;
    margin:0px;
}
    
.content {
        position:absolute;
        height:auto;
        width:100%;
        background-color: #CE0203;
                  border: 1px dashed;
}
.col1 {
    position: relative;
    top: 0px;
    left: 0px;
    width: 240px;
    height:100%;
    background-color: #c5c5c5;
}
.col2 {
    position: absolute;
    height:100%;
    top: 0px;
    left: 250px;
    width: 240px;
    background-color: #c5c5c5;
}
</style>

Maar goed, nu gerbuik ik wel absoluut en relatief positioneren door elkaar... misschien kan je er iets mee...

HYEHEHEHEEHHEEHee, hier had iets zinnigs kunnen staan, maar dat is niet.

woensdag 17 augustus 2005 19:07

Acties:

reddevil001

Topicstarter

Luxx schreef op woensdag 17 augustus 2005 @ 19:02:
Hmm... een smerige workaround, die je mischien wel kan helpen:

Hij werkt.... zolang col1 het hoogst is. In mijn geval is dat niet bruikbaar. In ieder geval bedankt.

tweakerbee schreef op woensdag 17 augustus 2005 @ 19:00:
Wat jij wilt kan gewoon niet. Je kunt hem of laten flowen of een hoogte meegeven. "De langste van de twee" is gewoon geen optie.

Daar ziet het nu wel naar uit.
Dan is dus de enige oplossing om een tabel te gebruiken. Of heeft iemand nog een geweldig idee?

None

woensdag 17 augustus 2005 19:42

Acties:

tweakerbee

dus..?

http://css-discuss.incutio.com/?page=AnyColumnLongest

Hier kun je nog meer ideeen opdoen.

You can't have everything. Where would you put it?

woensdag 17 augustus 2005 19:52

Acties:

Verwijderd

ik weet niet precies wat je wil
maar volgens mij moet je het zo ongeveer doen:

code:

<html>
<head>
<style type="text/css" media="all">
.content {
    position: absolute;
    top: 10px;
    left: 0px;
    width: 500px;
    background-color: #ff0000;
    border: 1px dashed;
}
.col1 {
    position: relative;
    width: 240px;
    height: 100%;
    background-color: #00ff00;
    float: right;
}
.col2 {
    position: relative;
    width: 240px;
    height: 100%;
    background-color: #0000ff;
    float: left;
}
</style>
</head>

<body>

<div class="content">
<div class="col1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis tincidunt. Nulla eleifend. Etiam ut urna quis arcu tincidunt eleifend. Nam consectetuer turpis eget massa. Praesent feugiat blandit enim. Aliquam pharetra, lacus id tristique bibendum, ligula ipsum lacinia neque, ac accumsan ante turpis sit amet risus. Cras eros nisl, gravida ac, tempus ac, bibendum non, nunc. Praesent sed erat. Etiam nulla. Sed ac velit. Proin a erat. Phasellus tempus pede in orci. Sed varius, turpis nec scelerisque hendrerit, tellus mi pulvinar lorem, at facilisis odio nibh ultrices ligula. Morbi pellentesque congue risus. Aenean tellus.</div>
<div class="col2">
In bibendum
</div>
</div>

</body>
</html>

Een absolute div (de parent (content dus)) groeit alleen mee als er een relative div inzit. Col1 en Col2 moeten dus beide relative zijn. Met float: left; en float: right; kun je zorgen dat ze naast elkaar komen. Eventueel zou je ze met een margin precies neer kunnen zetten waar je ze hebben wilt.

edit: .de content div zal nu dus met de grootste van de twee 'meegroeien'

[ Voor 16% gewijzigd door Verwijderd op 17-08-2005 20:02 ]