2 lager bredvid varandra i samma höjd samt mininum höjd.

6 svar · 324 visningar · startad av Addeladde 18 aug. 2005

AddeladdeMedlem sedan jan. 20013 406 inlägg

Frågan18 aug. 2005 13:32#1

Hej

Håller just på med min första helt lagerbaserade webbplats och har stött på patrull.
Jag har två lager som ligger bredvid varandra. Det vänstra lagret är en meny som uppdateras från en databas. Den kan alltså variera i höjd. Lagret till höger uppdaterar sin information från en databas vilket gör att den också kan variera i höjd. Hur får jag nu dessa två lager att bli jämnhöga. Självklart måste det fungera i IE, Safari, Firefox. Om inte menyn eller det högra lagret har så mycket information i sig så ska de ändå ha minimun höjden 450 pixlar. Är detta svårt att få till? Gärna exempel

Min kod ser ut så här:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#layerSublevel3{
  width: 190px;
  height: 100%;
  background: url(../bilder/system/layout/menu/sublevel3Bg.gif) no-repeat 0px 0px;
  border-bottom: 1px solid #A3C4C4;
  border-right: 1px solid #A3C4C4;
  float: left;
  padding-top: 30px;
  font: bold 12px Verdana, Arial, Helvetica, sans-serif;
  color: #000000;
  cursor: default;
}

#layerContent{
  width: 578px;
  height: 100%px;
  border-bottom: 1px solid #A3C4C4;
  border-right: 1px solid #A3C4C4;
  float: left;
  padding: 15px;

}
</style>
</head>

<body>
  <div style="width: 768px; height: 450px;">
    <div id="layerSublevel3"></div><div id="layerContent"></div>
  </div>
</body>
</html>

AddeladdeMedlem sedan jan. 20013 406 inlägg

18 aug. 2005 14:29#2

Känns inte som rätt väg med ett javascript men det löser problemet i alla fall.

<script>
function changeColumnheight(){
  var lColum, rColum, maxHeight
  if(document.getElementById('layerSublevel3') && document.getElementById('layerContent')){
    if(document.all){
      lColum = document.getElementById('layerSublevel3').offsetHeight;
      rColum = document.getElementById('layerContent').offsetHeight;
    }
    else{
      lColum = document.getElementById('layerSublevel3').innerHeight;
      rColum = document.getElementById('layerContent').innerHeight;
    }
	if((lColum+40)>rColum)
	  maxHeight = lColum;
	else
	  maxHeight = rColum;
	maxHeight+= 40;
	if(maxHeight<450)
	  maxHeight: 450;
    document.getElementById('layerSublevel3').style.height=maxHeight+'px';
    document.getElementById('layerContent').style.height=maxHeight+'px';
	document.getElementById('contentSpace').style.height=maxHeight+'px';
  }
}

</script>

echoSweMedlem sedan nov. 20041 189 inlägg

21 aug. 2005 10:10#3

Lösningen med enbart css är inte att få kolumnerna att få samma höjd utan att få dem att se ut som de är lika höga.

struktur:
wrapper
sub
content

på wrapper:

<div id="wrapper" class="clear">

lägger du en clearfix:

.clear:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clear {height: 1%;}
/* End hide from IE-mac */

Sen lägger du till denna bild (bifogad)
till wrappers css:

#wrapper {
	width: 768px;
	min-height: 450px;
	border-bottom: 5px solid red;
	background-image:url(temp.gif);
}

(IE är dum i huvudet med min-height som jag har fattat och jag har inte testat det där)

Ja... Sedan så lägger du in dina två andra divvar i din wrapper, (se htmlfilen) för att sedan floata dem som passar dig.

#sub{
	background-color: grey;
	float: left;
	width: 168px;
}
#content {
	background-color:#000033;
	float: right;
	width:600px;
}

echoSweMedlem sedan nov. 20041 189 inlägg

21 aug. 2005 10:10#4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
	color: white;
	font: 12px/16px Arial;
}
#wrapper {
	width: 768px;
	min-height: 450px;
	border-bottom: 5px solid red;
	background-image:url(temp.gif);
}
.clear:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clear {height: 1%;}
/* End hide from IE-mac */
#sub{
	background-color: grey;
	float: left;
	width: 168px;
}
#content {
	background-color:#000033;
	float: right;
	width:600px;
}
</style>
</head>

<body>  
<div id="wrapper" class="clear">
    <div id="sub"> Integer tristique wisi non nibh. Curabitur turpis justo, lacinia at, lacinia sit amet, ultricies facilisis, ligula. Sed aliquet velit quis diam. </div>
	<div id="content"> 
	  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sollicitudin, ligula eu porta sodales, pede sem laoreet ipsum, in posuere mi dolor sit amet ante. Donec vitae ante eu lorem dictum eleifend. Vivamus vehicula, velit nec accumsan dapibus, felis magna vulputate turpis, vitae tristique mi orci mollis leo. Aenean vitae sem. Curabitur rhoncus. Nam lobortis venenatis ligula. Mauris mattis pede vel risus. Vestibulum mauris lectus, sodales nec, molestie at, varius in, libero. Sed diam magna, semper a, sagittis eget, varius a, quam. Aenean vitae elit blandit tortor sollicitudin pretium. Quisque venenatis turpis ut turpis. Curabitur lobortis orci et dolor. Mauris consequat pede et lorem tempus posuere. Vestibulum eget diam. Nulla a tellus. </p>
	  <p> Nunc porta, ipsum nec suscipit consectetuer, nisl wisi pharetra ligula, sit amet lobortis lacus libero nec justo. Phasellus id tellus sit amet mauris dapibus vehicula. Fusce sed nibh. Donec sit amet massa. Proin lobortis, wisi nec facilisis volutpat, urna libero convallis dui, a sagittis metus mauris a ipsum. Donec volutpat. Vivamus ante elit, commodo sed, elementum sed, egestas non, nibh. Sed interdum erat eget leo. Etiam vulputate metus vitae lorem. Praesent aliquet sapien nec lectus. Praesent nec quam vel tortor dapibus iaculis. Aenean vehicula. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus mollis tortor. Vestibulum vehicula tempus nisl. Phasellus dapibus. Sed lobortis ullamcorper purus. </p>
	</div>
</div>
</body>
</html>

echoSweMedlem sedan nov. 20041 189 inlägg

21 aug. 2005 10:13#5

tänkte att när jag ändå har visat en full lösning för allt annat så kan jag visa för ie's höjd också.

lägg till följande i din css:
* html #wrapper { height: 450px; }

K@llenMedlem sedan mars 20032 667 inlägg

21 aug. 2005 10:22#6

http://www.alistapart.com/articles/fauxcolumns/

echoSweMedlem sedan nov. 20041 189 inlägg

21 aug. 2005 13:06#7

Det var den tekniken jag visade.