Tervehdys jälleen kerran.
Elikkäs, ongelmana on sellainen että en saa divin korkeutta 100% sivusta tai niin korkeaksi kuin on tarpeen.
Alla olevilla koodeilla sivu näyttää oikealta ja divit venyvät koko sivun korkuisiksi. Jos kuitenkin ylittää korkeuden niin selaimen scrollbar ei toimi (pysyy harmaana). Eli en näe mitenkään mitä on sivun korkeuden ylittävällä alueella.
HTML:
<div class="box_container"> <div class="box_left_border"><div class="box_left"></div></div> <div class="box_container_middle"> <div class="box_top_border"><div class="box_top">Test Caption</div></div> <div class="box_content_spacer_1"></div> <div class="box_menu"> </div> <div class="box_content_spacer_1"></div> <div class="box_content"> tekstiä yli sivun reunan<br><br>... </div> <div class="box_content_spacer_1"></div> <div class="box_bottom_border"><div class="box_bottom">Test Caption</div></div> </div> <div class="box_right_border"><div class="box_right"></div></div> </div>
CSS:
html {overflow-y: scroll; height: 100%;}
* {padding:0; margin:0; font-family: "Lucida Grande", "Lucida Sans Unicode", arial, helvetica, verdana, sans-serif;}
body {
background-color: #b4cbc6;
line-height: 130%;
color: black;
//font-family: "Palatino Linotype", sans-serif;
font-size: 12px;
font-weight: normal;
min-height: 100%;
height: 100%;
}
div.box_top_border{
border: 1px solid #b4cbc6;
border-width: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float: left;
}
div.box_top {
background:#cfe0db;
height: 100px;
width: 1176px;
}
div.box_bottom_border{
border: 1px solid #b4cbc6;
border-width: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
margin: auto 0px 0px 0px;
float: left;
}
div.box_bottom {
background:#cfe0db;
height: 100px;
width: 1176px;
}
div.box_menu {
border: 1px solid #b4cbc6;
border-width: 0px 0px 0px 0px;
padding: 0px 0px 0px 190px;
width: 1176px;
float: left;
background:url(images/header.png);
background-repeat: repeat-x;
}
div.box_content {
border: 1px solid #b4cbc6;
border-width: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 1176px;
float: left;
//height: 100%;
}
div.box_content_spacer_1 {
border: 1px solid #b4cbc6;
border-width: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 1176px;
float: left;
height:5px;
background:url(images/bg4.png);
background-repeat: repeat-x;
}
div.box_container {
background-color: #eaf3f2;
margin:0 auto;
overflow: hidden;
width: 1280px;
min-height:100%; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
}
div.box_container_middle{
border: 1px solid #b4cbc6;
border-width: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 1176px;
min-height:100%; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
float: left;
}
div.box_left_border{
border: 1px solid #b4cbc6;
border-width: 0px 1px 0px 0px;
padding: 0px 1px 0px 0px;
width: auto;
min-height:100%; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
float: left;
}
div.box_left {
background:#b4cbc6;
width: 50px;
background-image: url(../images/bg2.png);
background-repeat: repeat-y;
min-height:100%; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
}
div.box_right_border{
border: 1px solid #b4cbc6;
border-width: 0px 0px 0px 1px;
padding: 0px 0px 0px 1px;
min-height:100%; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
float: right;
}
div.box_right {
background:#b4cbc6;
background-image: url(../images/bg3.png);
background-repeat: repeat-y;
min-height:100%; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
width: 50px;
}Vähän kaikenlaista olen koittanut ja löysin netistä
height: auto !important;
tuollaisen koodinpätkän, mutta tuo koodi sekoittaa sivun totaalisesti. Divit ei näy todellakaan siellä missä niiden pitäisi.
EDIT: Eli siis box_left_border, box_left, box_container_middle, box_right_border, box_right pitäisi olla aina venytettynä sivun ylälaidasta alalaitaan ja muuttua sitä mukaan kun box_contentsiin lisätään tavaraa.
Taino... Ei se sitä sivua ilmeisesti totaalisesti sekoitakkaan. Se ei vaan piirrä noita box_left_border, box_left, box_right_border, box_right näytölle.
Kuinkahan saisi edes niin että nuo venyvät box_container_middle:n korkeuden mukaan?
Jos nyt on ihan pakko saada 100% height ja vielä ihan IE6:sta alkaen, niin demosivu ja koodi:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fi">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">/*<![CDATA[*/
html,body,#satanen {
height: 100%;
margin: 0;
padding: 0;
}
#satanen {
background: #DDD;
border-collapse: collapse;
width: 100%;
}
#satura {
vertical-align: top;
}
/*]]>*/</style>
</head>
<body><table id="satanen"><tr><td id="satura">
<div id="dokumentti">
<h1>Kyllä tästä satasen saa</h1>
<button onclick="this.style.height = this.style.height ? '' : '2000px'">Korkeus</button>
</div>
</td></tr></table></body>
</html>Mutta noin yleisesti ottaen: tämä on sellainen tekninen kikkailu jota 99,99% sivun kävijöistä ei taatusti mitenkään noteeraa. Yleensä on parempi jo lähtökohtaisesti suunnitella sisältö ja sivun rakenne niin, ettei tarvitse miettiä 100% korkeuksien perään.
Tässä esimerkissä taulukkoelementti on pakollinen, koska IE6 ja IE7 eivät tue display: table;a. Taulukkoelementtihän toimii luonnostaan siten, että jos minkään solun sisältö ylittää asetetun taulukon korkeuden, niin taulukko sitten kasvaa kasvamistaan.
Aihe on jo aika vanha, joten et voi enää vastata siihen.