✔ div höhe an browserfenster anpassen

angelozehr · 24. Juli 2008

Hi zusammen,

ich weiss dass hier im Forum diverse ähnliche Threats bereits diskutiert wurden. doch keiner konnte mir wirklich weiter helfen.

ich bein ein javascript neuling würd ich sagen und es ist durchaus möglich (und irgendwie hoffe ich das sogar), dass ich einfach einen kleinen Fehler gemacht habe und ihr mir ganz schnell helfen könnt.

ich habe folgendes "Problem":

ich habe eine Seite mit 3 div's übereinander

HTML:

<div id="oben" style="height:112px;">
</div>
<div id="inhalt" style="background-color:#CCFFCC;">
</div>
<div id="unten"style="height:113px;">
</div>

ich will nun, dass der mittlere div eine Höhe annimmt, sodass das komplette browserfenster gefüllt ist.

ich dachte ich könnte das ja über javascript in einer funktion lösen, die beim laden aufgerufen wird

HTML:

<body onload="funktion()">

der Javascript sah dann so aus:

Code:

function funktion() {
	hohe = window.innerHeight ;
	neue = (hohe - 225);
	div  = document.getElementById("inhalt");
	div.style.height = neue ;
	alert(div.style.height); //um die Zahl zu überprüfen
}

aber das alert spuckt mir eine leere Fehlermeldung aus und die Höhe des div verändert sich nicht.

hat irgendjemand eine Idee warum?
oder wie man diese Situation anders anpacken könnte? ich wäre euch total dankbar!

liebe grüsse

Maik · 24. Juli 2008

Hi,

angelozehr hat gesagt.:
oder wie man diese Situation anders anpacken könnte?

schau dir mal die folgenden CSS-Tutorials an:

Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken (falls der mittlere Bereich scrollfähig sein soll)
CSS-Layout mit 100%-Höhe (falls der mittlere Bereich in der Höhe zunehmen soll)

mfg Maik

angelozehr · 24. Juli 2008

danke für die links
den ersten find ich besonders gut - ziemlich simpel und genau was ich brauche

jedoch bring ich es einfach nicht bei mir hin! ich versteh nicht was ausschlaggebend ist, dass der div die richtige höhe annimmt!

ich habe:

Code:

html {
	height:100%;
}
body {	
	background-color:#E9E1D8;
	text-align:center;
	height: 100%;
}
#wrapper {
	position: relative;
	margin: 0 auto;
	width: 911px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
.contents {     
	padding-left:10px;
	padding-right:10px;
	width:891px;
	overflow:visible;
	background-color:#CFC6B7;
	text-align:left;
}
/*das sind alle die div's, die übereinander liegen (header, inhalt, footer)*/
#header{
	height:132px;
}

#inhalt {
	padding-bottom:20px;
}

#footer {
	position:absolute;
	bottom: 0;
	height:29px;
	padding-top:5px;
	padding-bottom:5px;
}

HTML:

<body>
<div id="wrapper">
 <div id="header">
 </div>
 <div id="inhalt">
 </div>
 <div id="footer">
 </div>
</div>
</body>

Maik · 24. Juli 2008

Hi,

wenn du dir meine Beispiel-Variante "Modell mit Header und Footer" näher anschaust, siehst du, dass der Hintergrund für den mittleren Teil im DIV #wrapper eingebunden, und vom Hintergrund des Header- und Footerbereichs überdeckt wird.

Das ist der "Gimmick" an dem Konzept.

mfg Maik

Chumper · 24. Juli 2008

Bei deinem ersten Post hätte das 'px' hinter der Zuweisung gefehlt

angelozehr · 24. Juli 2008

@ chumper

naja.. ich hab jetzt den Weg über CSS gewählt - der war mir eigentlich sowieso lieber, da es so auch noch nachdem die Seite fertig geladen ist, dynamisch ist.. aber danke

@ Maik

Danke für den Tipp! Das hatte ich in jenem Moment gerade auch festgestellt, als ich das gelesen hab

ich konnte das Problem nun endlich lösen - nicht ganz optimal, aber gut genug

wie bei dir habe ich den zu maximierenden div einfach auf 100% und die anderen darauf gestellt
leider kann ich so nicht mehr bei dem footer einen transparenten Hintergrund nehmen (was ich gerne gehabt hätte um später ein <body>-Hintergrundbild einzufügen - aber wie gesagt.. nicht perfet - aber gut genug!)

Herzlichen Dank an alle Interessierten ;-)

PS: wie immer hat natürlich der IE noch Probleme gemacht mit position:absolute
ich hab mich dann nach einigen Versuchen darauf eingelassen einfach 90% zu nehmen, sodass das untere Ende des inhalt-div's unter dem footer-div verschwindet - so siehts aus wie ich es will

angelozehr · 24. Juli 2008

NEUES PROBLEM!!

argh.. das hört aber auch nie auf

nun hab ich folgendes problem:

wenn der Inhalt des <div id="inhalt"> grösser (sprich: höher) wird erscheint kein scrollbalken (nur im Internet Explorer) und der Inhalt wird am unteren Bildrand einfach abgeschnitten

nun.. was jetzt

eigentlich sollte doch

HTML:

height: auto !important;

genau das auslösen
warum klappt das nicht?

der footer ist position bottom:0px; und wird nach unten gerückt (nur im Firefox, nicht Opera)

HILFEE

Maik · 24. Juli 2008

Kannst du bitte mal deinen aktuellen Quellcode zeigen, denn in meinen Beispielen taucht kein derartiges Problem auf.

mfg Maik

Maik · 24. Juli 2008

Mit deinem zuletzt gezeigten Quellcode kann ich das Problem in keinem der mir zur Verfügung stehenden Browser reproduzieren, sprich: der Inhalt wird nicht abgeschnitten und der Scrollbalken eingeblendet

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<title>tutorials.de | demo_angelozehr</title>

<style type="text/css">
<!--
html {
        height:100%;
}
body {
        background-color:#E9E1D8;
        text-align:center;
        height: 100%;
}
#wrapper {
        position: relative;
        margin: 0 auto;
        width: 911px;
        min-height: 100%;
        height: auto !important;
        height: 100%;
        background-color:#CFC6B7;
        text-align:left;
}
.contents {
        padding-left:10px;
        padding-right:10px;
        width:891px;
        overflow:visible;
        text-align:left;
}
/*das sind alle die div's, die übereinander liegen (header, inhalt, footer)*/
#header{
        height:132px;
}

#inhalt {
        padding-bottom:39px;
}

#footer {
        position:absolute;
        bottom: 0;
        height:29px;
        padding-top:5px;
        padding-bottom:5px;
}
-->
</style>

</head>
<body>

<div id="wrapper">
 <div id="header">header</div>
 <div id="inhalt">
      <div id="contents">
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
           <p>dummy text to expand the box</p>
      </div>
 </div>
 <div id="footer">footer</div>
</div>

</body>
</html>

Getestet unter WinXP Prof. SP2 im FF 2.x + 3.x, IE 6 + 7, Netscape 7.1, Opera 9.5, Safari 3.0.4, SeaMonkey 1.1.6

mfg Maik

angelozehr · 24. Juli 2008

wow - danke für den grossen Aufwand mirzuliebe

ich weiss auch nicht so recht was bei meinem Beispiel auschlaggebend für den Fehler ist.

hier das CSS Stylesheet:

HTML:

@charset "utf-8";
/* CSS Document */

* html html {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

body {
	background-color:#E9E1D8;
	margin:0px;
	font-family:Verdana,sans-serif;
	font-size:11px;
	color:#615849;
	text-align:center;
	background-image:url(images/background.jpg);
	background-position:bottom;
	background-attachment:fixed;
}

* html body {
	margin:0px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

h1{
	font-size:13px;
	font-weight:bold;
	font-family:Helvetica;
}

h2 {
	font-weight:bold;
	font-size:12px;
	font-family:Helvetica;
}

img {
	border-width:0px;
}

a {
	color:#000000;
	text-decoration:none;
}

a:hover {
	text-decoration:underline;
}

input {
	border-width:1px;
	border-style:solid;
	border-color:#615849;
	background-color:#E9E1D8;
	height:14px;
	color:#615849;
	font-size:11px;
}

input:focus {
	background-color:#EEEBE6;
}

.submit {
	height:17px;
	padding-bottom:1px;
}

* html .submit {
	height:18px;
	width:44px;
}

* html input {
	width:120px;
}

.submit:hover {
	background-color:#EEEBE6;
}

.contents {
	padding:10px;
	width:891px;
	overflow:visible;
	background-color:#CFC6B7;
	margin:10px auto;
	text-align:left;
}

#wrapper {
	margin:auto;
	position: relative;
	width:911px;
}

* html #wrapper {
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

#inhalt {
	padding-bottom:20px;
	padding-top:0px;
}

#center {
	margin-left:345px;
}

#key {
	margin:70px;
	margin-left:344px;
}

#footer {
	position:fixed;
	bottom:0px;
	font-size:9px;
	line-height:7px;
	text-align:center;
	padding-top:5px;
	padding-bottom:5px;
	background:none;
}

* html #footer {
	position:absolute;
	left:0px;
	bottom:0px;
}

hier der HTML bzw PHP Teil:

HTML:

<!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="en" lang="de">
<head>
<?php
include('mysqlconnect.php');
?>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>Home</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<div id="wrapper">

<div id="header" class="contents">
 <img src="http://www.tutorials.de/forum/images/header.jpg" alt="Header" />
</div>

<div id="navigation" class="contents">
<a href="dersupport.php" title="Der Support"
><img src="http://www.tutorials.de/forum/images/dersupport.jpg" alt="Der Support" onmouseover="rollOver(this)" onmouseout="rollOut(this)" /></a><a 
href="reparaturen.php" title="Reparaturen"><img 
src="http://www.tutorials.de/forum/images/reparaturen.jpg" alt="Reparaturen" onmouseover="rollOver(this)" onmouseout="rollOut(this)" /></a><a 
href="kaufberatung.php" title="Kaufberatung"><img 
src="http://www.tutorials.de/forum/images/kaufberatung.jpg" alt="Kaufberatung" onmouseover="rollOver(this)" onmouseout="rollOut(this)" /></a><a 
href="markeeigenbau.php" title="Marke Eigenbau"><img 
src="http://www.tutorials.de/forum/images/markeeigenbau.jpg" alt="Marke Eigenbau" onmouseover="rollOver(this)" onmouseout="rollOut(this)" /></a><a 
href="webdesign.php" title="Webdesign"><img 
src="http://www.tutorials.de/forum/images/webdesign.jpg" alt="Webdesign" onmouseover="rollOver(this)" onmouseout="rollOut(this)" /></a>
</div>

<div id="inhalt" class="contents">
<img src="http://www.tutorials.de/forum/images/herzlichwillkommen.jpg" alt="Herzlich Willkommen" />
<?php
$sql = mysql_query("SELECT * FROM willkommen where id = 1") or die (mysql_error());
while($dsatz = mysql_fetch_assoc($sql)) {
	echo( '<h1>' . $dsatz["titel"] . '</h1><br />' . $dsatz["text"] );
}
?>
</div>

<div id="footer" class="contents">
 <span id="info">
  &copy; <a href="webdesign.php" title="Webdesign">Webdesign</a> 2008 - <a 
  href="mailto:xyz.xyz@domainname.ch">Angelo Zehr</a><br /><br />
  <img src="http://www.tutorials.de/forum/images/xhtml_icon.gif" alt="Valid xhtml" /> 
  <img src="http://www.tutorials.de/forum/images/css_icon.gif" alt="Valic css" /> 
  <img src="http://www.tutorials.de/forum/images/php_icon.gif" alt="PHP powered" /> 
  <img src="http://www.tutorials.de/forum/images/browser_icon.gif" alt="All browsers supported" /> 
 </span>
</div>

</div>
</body>
</html>

nochmal Herzlichen Dank

http://gametek.ga.funpic.de/nullpc/ habs hier noch hochgeladen zum direkt ansehen - irgendwie siehts jetzt nochmal anders aus als auf meinem xampp server lokal %-)

✔ div höhe an browserfenster anpassen

angelozehr

Mitglied

Maik

angelozehr

Mitglied

Maik

Chumper

Erfahrenes Mitglied

angelozehr

Mitglied

angelozehr

Mitglied

Maik

Maik

angelozehr

Mitglied

Neue Beiträge