Keskustelu: Nettisivujen teko: CSS ja height

Voisin vannoa että aihetta on käsitelty aikasemminkin jossain mutta ratkaisua ongelmaani en silti löytänyt.

Elikkäs, http://xs219.xs.to/xs219/07385/Image17.png

Ja seuraavassa ote tyylitiedostosta:

#content-reuna {
		position: absolute;
		left: 270px;
		width: 701px;
		top: 215px;
		height: 100%;
		min-height: 300px !important;
		background-color: #000000;
		-moz-opacity: 0.45;
		filter:alpha(opacity=45);
		opacity: 0.45;
		border: 3px double #202020;
}

#content {
		position: absolute;
		left: 278px;
		top: 223px;
		width: 689px;
		min-height: 288px !important;
		color: #fff;
		border: 1px solid #fff;
}

-reuna on tuo punaseksi väritetty (näkemisen helpottamiseksi) ja content on varsinainen tekstialue (valkoinen border omaksi referenssiksi). Ne ovat erikseen taustan läpinäkyvyyden takia, en halua että valkoiseksi tarkoitettu teksti haalistuu samalla joten <div>:t toistensa sisään ei myöskään onnistu.

Miksi -reuna loppuu liian ylös? Jos annan #content:lle arvon height: 100%;, ei se kuitenkaan täyty koko korkeutta tekstin määrän mukaan vaan alareuna tulee kesken kaiken ja teksti jatkuu sen yli. body { height: 100%; } ei ole käytössä, tosin kokeiltu on eikä se ihmeempiä auttanut. Myös kaikki mahdolliset relativet absoluten sijaan on kokeiltu, 100% -> auto jne mutta eipä ole toiminut. Millä siis saan molemmat menemään yksiin?

Nyt kyllä jo väsyttää, mutta en tajunnut mitään, joten voisitko hieman tarkentaa.

#content ja #content-reuna pitäis olla yhtä korkeita ja mennä toistensa mukaisesti. Näin siis lyhyesti.

Jos haluat siis ihan vain läpinäkyvän taustan, käytä läpikuultavaa 1x1 pikselin kokoista PNG-kuvaa. Sen voi IE:ssä korjata toimimaan oikein. Et sitten tarvitse kahta elementtiä.

Myös 1 x X tai X x 1 kokoiset kuvat saa IE:hen oikein, mutta sitten meneekin jo ohitse IE:n filterin kykyjen jos tarvii sitä isompaa toistuvaa taustaa.

Tässä myös (testaamatonta) ylimääräisen elementin kanssa leikkimistä, eli miten saada absoluuttinen elementti samaan kokoon.

<div id="document">
    <div id="content">

    </div>
    <b id="bg"></b>
</div>

#document {
margin : auto 10px;
padding : 0;
position : relative;
width : 770px;
}

#content {
position : relative;
z-index : 1;
}

#bg {
display : block;
height : 100%;
left : 0;
margin : 0;
padding : 0;
position : absolute;
top : 0;
width : 100%;
z-index : 0;
}