| Autor |
Nachricht |
Cerberus1982
Threadersteller
Dabei seit: 26.02.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 26.02.2007 16:00
Titel DIV höhe per JS anpassen - ich glaub ich werd blöd |
  |
|
Hallo leute!
Also erstmal, bin neu hier  seid lieb zu mir 
Gut..also zu meinem problem:
ich habe mein Layout mit DIV´s aufgebaut und per css angeordnet - dat passt soweit auch
| Code: |
[body{margin:0px auto; font-family: Verdana, Arial, Helvetica, sans-serif;}
div#main {position: absolute; left: 50%; margin-left: -400px; /* neg. Hälfte von width:500px = zentriertes DIV */
width: 800px; background-color: #ffffff; border:1px solid black;}
div#header{height: 150px; background-color: #666666; padding: 0;}
div#content{background-color: transparent; padding: 0;}
div#footer {width: 800px; height:30px; background-color: #A4FF3C; padding: 0;}]
|
Im Content DIV wird - wie der name ja schon sagt der Content angezeigt. Dieser wird in der Regel per Include eingebunden. Stellt auch keinen Großen Akt dar.
Mein Problem ist nun folgendes: ich möchte, daß der Content frame immer MINDESTENS die ganze höhe des Browsers ausnutzt.
psyeudocode:
wenn header+footer+contenthöhe < anzeigbare höhe -> dann setze content.height = 100%(abüzlgich header+footer)
wenn header+footer+contenhöhe > anzeigbare höhe -> dann einfach so anzeigen
wenn ich das erreichen will, hätte ich gedacht, mache ich das mit JS, im body tag:
| Code: | | <body onload ="hoehe"> |
... denke soweit is mal der ansatz nicht verkehrt.
nun das Problem:
Das JS ändert mir partou nicht die höhe des DIV´s 
| Code: | function hoehe() {
var hoehe = -1;
var breite = -1;
if (window.innerHeight) {
// 1. methode: alle browser, die nicht IE sind
hoehe = window.innerHeight;
hoehe = hoehe-205;
breite = 795;
document.getElementById('content').height = hoehe;
}
else if (document.body && meinframe.document.body.offsetHeight) {
// 2. methode: Sonderbehandlung für den IE
hoehe = document.body.offsetHeight;
hoehe = hoehe-200;
breite = 800;
document.getElementById('content').style.height = hoehe;
} |
Tja und im Body schaut das Div so aus:
bin echt Ratlos..könnt ihr mir helfen?? 
DAAANKE
Zuletzt bearbeitet von Mischpult am Mo 26.02.2007 17:32, insgesamt 1-mal bearbeitet
|
|
| |
  |
 |
sahnemuh
Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 42
Geschlecht: 
|
Verfasst Mo 26.02.2007 16:05
Titel Re: DIV höhe per JS anpassen - ich glaub ich werd blöd ;-) |
|
|
| Cerberus1982 hat geschrieben: | Hallo leute!
Also erstmal, bin neu hier seid lieb zu mir
Gut..also zu meinem problem:
ich habe mein Layout mit DIV´s aufgebaut und per css angeordnet - dat passt soweit auch
| Code: |
[body{margin:0px auto; font-family: Verdana, Arial, Helvetica, sans-serif;}
div#main {position: absolute; left: 50%; margin-left: -400px; /* neg. Hälfte von width:500px = zentriertes DIV */
width: 800px; background-color: #ffffff; border:1px solid black;}
div#header{height: 150px; background-color: #666666; padding: 0;}
div#content{background-color: transparent; padding: 0;}
div#footer {width: 800px; height:30px; background-color: #A4FF3C; padding: 0;}]
|
Im Content DIV wird - wie der name ja schon sagt der Content angezeigt. Dieser wird in der Regel per Include eingebunden. Stellt auch keinen Großen Akt dar.
Mein Problem ist nun folgendes: ich möchte, daß der Content frame immer MINDESTENS die ganze höhe des Browsers ausnutzt.
psyeudocode:
wenn header+footer+contenthöhe < anzeigbare höhe -> dann setze content.height = 100%(abüzlgich header+footer)
wenn header+footer+contenhöhe > anzeigbare höhe -> dann einfach so anzeigen
wenn ich das erreichen will, hätte ich gedacht, mache ich das mit JS, im body tag:
| Code: | | <body onload ="hoehe"> |
... denke soweit is mal der ansatz nicht verkehrt.
nun das Problem:
Das JS ändert mir partou nicht die höhe des DIV´s
| Code: | function hoehe() {
var hoehe = -1;
var breite = -1;
if (window.innerHeight) {
// 1. methode: alle browser, die nicht IE sind
hoehe = window.innerHeight;
hoehe = hoehe-205;
breite = 795;
document.getElementById('content').height = hoehe;
}
else if (document.body && meinframe.document.body.offsetHeight) {
// 2. methode: Sonderbehandlung für den IE
hoehe = document.body.offsetHeight;
hoehe = hoehe-200;
breite = 800;
document.getElementById('content').style.height = hoehe;
} |
Tja und im Body schaut das Div so aus:
bin echt Ratlos..könnt ihr mir helfen??
DAAANKE |
kleiner tip:
höhe = 700 birnen, äpfel..?
|
|
| |
|
|
|
Anzeige
|
|
|
Cerberus1982
Threadersteller
Dabei seit: 26.02.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 26.02.2007 16:11
Titel
|
|
|
hatte ich zuerst auch dort stehen... hatte bevor ich versucht habe die größe des divs zu ändern im div einen iframe und habe diesen versucht px werte zu übergeben... nahm er nicht..so wie oben nahm ers...
ich probiers gleich mal..viell. mag er meine divs ja dann
|
|
| |
|
|
Cerberus1982
Threadersteller
Dabei seit: 26.02.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 26.02.2007 16:35
Titel
|
|
|
Irgendwie bringts des leider auch ned..also den erfolg
ich stell mal den kompletten code rein  vielleicht is ja jemand so lieb und probierts mal aus
| Code: |
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<link rel=STYLESHEET TYPE="text/css" HREF="./css/site.css">
<title>Tierheim Weiden u.U. e.V.</title>
<script type="text/javascript">
function hoehe() {
var hoehe = -1;
var breite = -1;
if (window.innerHeight) {
// 1. methode: alle browser, die nicht IE sind
hoehe = window.innerHeight;
hoehe = hoehe-250;
hoehe = hoehe+"px";
document.getElementById('content').height = hoehe;
}
else if (document.body && meinframe.document.body.offsetHeight) {
// 2. methode: Sonderbehandlung für den IE
hoehe = document.body.offsetHeight;
hoehe = hoehe-200;
hoehe=hoehe+"px";
document.getElementById('content').style.height = hoehe;
}
}
</script>
</head>
<body onload ="hoehe()" onresize ="hoehe()" class = "body">
<div id="main">
<div id="header">
<?php
include("./include/header.inc");
?>
</div>
<div id="navigation"></div>
<div id="content" name ="content">
test
</div>
<div id="footer"></div>
</div>
</body>
</html>
|
| Code: |
/* CSS-Definitionsdatei, die Site-weite Stylesheets enthält */
/* DIV Layer Definition*/
body{margin:0px auto;height:100%; font-family: Verdana, Arial, Helvetica, sans-serif;}
div#main {position: absolute; left: 50%; margin-left: -400px; /* neg. Hälfte von width:500px = zentriertes DIV */
width: 800px; height: 100%; background-color: #ffffff; border:1px solid black;}
div#header{height: 150px; background-color: #666666; padding: 0;}
div#navigation{height: 20px; background-color: #A4FF3C; padding: 0;}
div#content{background-color: #D4D4D4; padding: 0;}
div#footer {position: absolute; bottom: 0; width: 800px; height:30px; background-color: #A4FF3C; padding: 0;}
/* Text Formatierung */
.newsdate {font-size: 9px; color: #0000CC;}
.newstext {font-size: 11px; color: #000000;}
.pethead {font-size: 12px; color: #0000CC; font-weight:bold}
.pettext {font-size: 12px; color: #000000;}
.navi_header {font-size: 11px; color: #ffffff;}
.navi_header2 {font-size: 11px; color: #000000; text-align:center;}
.pettext {font-size: 12px; color: #000000;}
|
|
|
| |
|
|
Cerberus1982
Threadersteller
Dabei seit: 26.02.2007
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Mo 26.02.2007 16:38
Titel
|
|
|
sorry..war die falsche CSS
hier die richtige:
| Code: |
/* CSS-Definitionsdatei, die Site-weite Stylesheets enthält */
/* DIV Layer Definition*/
body{margin:0px auto;height:100%; font-family: Verdana, Arial, Helvetica, sans-serif;}
div#main {position: absolute; left: 50%; margin-left: -400px; /* neg. Hälfte von width:500px = zentriertes DIV */
width: 800px; background-color: #ffffff; border:1px solid black;}
div#header{height: 150px; background-color: #666666; padding: 0;}
div#navigation{height: 20px; background-color: #A4FF3C; padding: 0;}
div#content{background-color: gray; padding: 0;}
div#footer {position: relativ; width: 800px; height:30px; background-color: #A4FF3C; padding: 0;}
/* Text Formatierung */
.newsdate {font-size: 9px; color: #0000CC;}
.newstext {font-size: 11px; color: #000000;}
.pethead {font-size: 12px; color: #0000CC; font-weight:bold}
.pettext {font-size: 12px; color: #000000;}
.navi_header {font-size: 11px; color: #ffffff;}
.navi_header2 {font-size: 11px; color: #000000; text-align:center;}
.pettext {font-size: 12px; color: #000000;}
|
wie eingangs schon beschrieben..ich kann nach wie vor die höhe des content-divs ned ändern 
|
|
| |
|
|
SURE612
Dabei seit: 02.12.2005
Ort: Bärlin / CB
Alter: -
Geschlecht:
|
Verfasst Mi 28.02.2007 04:15
Titel
|
|
|
reicht für dein problem nich nur css?
is weiß nich warum die javascript mit reinwürgst
klappt's in css mit % nich?
|
|
| |
 |
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 28.02.2007 10:06
Titel
|
|
|
Hier mal eine CSS-Lösung - vielleicht bringt Dich das ja weiter:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/1999/PR-xhtml1-19991210/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>header-content-footer</title>
<style type="text/css">
HTML, BODY {
height:100%;
}
BODY {
padding:0;
margin:0;
}
DIV#container {
position:relative;
min-height:100%;
background:yellow;
margin-bottom:-30px;
}
DIV#h {
position:relative;
width:100%;
height:100px;
background:green;
}
DIV#f {
position:relative;
width:100%;
height:30px;
clear:both;
background:red;
}
</style>
<!--[if lte IE 6]>
<style type="text/css">
DIV#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
</body>
<div id="container">
<div id="h">header</div>
<div id="c">content content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content contentcontent content content content
<p style="height:30px"> <!-- spacer element --></p>
</div>
</div>
<div id="f">footer</div>
</html> |
Zuletzt bearbeitet von Raumwurm am Mi 28.02.2007 11:31, insgesamt 2-mal bearbeitet
|
|
| |
|
|
FalkoWa
Dabei seit: 07.02.2007
Ort: Much
Alter: 41
Geschlecht:
|
Verfasst Mi 28.02.2007 16:26
Titel Re: DIV höhe per JS anpassen - ich glaub ich werd blöd ;-) |
|
|
| sahnemuh hat geschrieben: | kleiner tip:
höhe = 700 birnen, äpfel..? |
JavaScript kennt keine Bezeichner wie Pixel bei den Größenangaben.
Im Gegensatz zu CSS muss hier immer nur die Zahl hingeschrieben werden.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Höhe anpassen per Js
Iframe Höhe per Javascript anpassen
float:left höhe anpassen
Wrapper soll sich 100% der Höhe des Contents anpassen...
[html/css] element soll sich immer an die höhe anpassen.
PHP-Upload-Script. Glaub ich. :-)
|
|
Willkommen auf dem Portal für Mediengestalter
