✔ 2 divs - einer mit height 100%

domi1984 · 15. Januar 2009

halli hallo,

ich habe folgendes problem.

ich hätte gerne einen schmalen header (ca. 40 px)
und drunter einen content bereich, der 100% hoch ist. in diesem Content bereich soll ein java applet platz finden das auch 100% höhe hat. jedoch addiert er mir immer die 40px vom header mit hinzu und verschiebt dadurch das applet und es erscheint eine scrollbar.

bräuchte hilfe bei dem passenden grund layout

mein beispiel

HTML:

<style>
html, body
 {
 height: 98%;
 width: 98%;
 background: #ffffff;
 }
.oben
{
height: 35px;
background: #ffffff;
margin-bottom:10px;

.chat
{
height: 100%;
background: #cccccc;
}
</style>

<body>
<div class="oben">oben</div>
<div class="chat">APPLETCODE</div>
</body>

Maik · 15. Januar 2009

Hi,

dies wäre eine Möglichkeit zur technischen Umsetzung:

CSS:

html, body
 {
 height:100%;
 margin:0;
 padding:0;
 background: #ffffff;
 }

.oben
{
position:absolute;
top:0;
right:0;
left:0;
height: 35px;
background: #ffffff;
}

.chat
{
position:absolute;
top:35px;
right:0;
left:0;
bottom:0;
background: #cccccc;
}

Übrigens fehlt in deinem Stylesheet der zweiten Regelmenge .oben die schliesende }-Klammer.

Und beachte bitte unsere Netiquette (Punkt 15) bzgl. deiner durchgängigen Kleinschreibung. Vielen Dank!

mfg Maik

domi1984 · 15. Januar 2009

bei deinem code erscheint trotzdem eine scrollbar :-(

lg

Maik · 15. Januar 2009

Vielleicht sagt dir das hier zu:

Code:

html, body
 {
 height:100%;
 margin:0;
 padding:0;
 background: #ffffff;
 overflow:hidden; /* unterbindet den Scrollbalken im Viewport */
 }

.oben
{
position:absolute;
top:0;
right:0;
left:0;
height: 35px;
width:100%;
background: #ffffff;
}

.chat
{
position:absolute;
top:35px;
right:0;
left:0;
bottom:0;
background: #cccccc;
overflow:auto; /* Inhalt der Chat-Box ist scrollbar */
}

... ansonsten wohl das hier:

Code:

html, body
 {
 height:100%;
 margin:0;
 padding:0;
 background: #ffffff;
 overflow:hidden; /* unterbindet den Scrollbalken im Viewport */
 }

.oben
{
position:absolute;
top:0;
right:0;
left:0;
height: 35px;
width:100%;
background: #ffffff;
}

.chat
{
position:absolute;
top:35px;
right:0;
left:0;
bottom:0;
background: #cccccc;
overflow:hidden; /* unterbindet den Scrollbalken in der Chat-Box */
}

mfg Maik

domi1984 · 16. Januar 2009

also nun ist es so.

der firefox macht alles richtig. jedoch der Internet Exlorer (6 & 7) stellen das untere div überhaupt nicht mehr da.

was nun?

Maik · 16. Januar 2009

Der IE7 stellt mit meinem Stylesheet die untere Box sehr wohl dar, wenn ihm das HTML-Dokument im standardkonformen Modus übergeben wird, was denn bei dir nicht der Fall ist.

Was den IE6 angeht, empfehle ich dir das CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken.

Und nochmal die Bitte an dich, in deinen Beiträgen auf die Groß- und Kleinschreibung zu achten.

mfg Maik

domi1984 · 16. Januar 2009

also ich habe es jetz soweit:

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS-Beispiel 1: position_fixed</title>

<style type="text/css">
<!--
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	border: 0;
	padding: 0;
}
body {
	background-color: #fff;
	overflow: hidden;	/* Scrollbalken im Fenster unterbinden */
}
#mitte {
	position: absolute;
	top: 150px;		/* Abstand zum oberen Fensterrand */
	left: 0;		/* Abstand zum linken Fensterrand */
	bottom: 0;		/* Abstand zum unteren Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
	overflow: auto;		/* Scrollbalken, falls notwendig */
	height:100%
/* nur für IE: */
	width: expression((document.body.clientWidth - 300) + "px");
				/* left-Wert + right-Wert = 300 */
	height: expression((document.body.clientHeight - 200) + "px");
				/* top-Wert + bottom-Wert = 200 */
}
#mitte .inhaltDiv {

}
#oben {
	position: absolute;
	top: 0;			/* Abstand zum oberen Fensterrand */
	left: 0;		/* Abstand zum linken Fensterrand */
	right: 0;		/* Abstand zum rechten Fensterrand */
	height: 150px;		/* Blockhöhe */
	padding: 0;		/* Interpretation Boxmodell! */
	background-color: #cfc;
	overflow: hidden;	/* Scrollbalken unterbinden */
/* nur für IE: */
	width: expression(document.body.clientWidth + "px");
				/* left-Wert + right-Wert = 0 */
}
#oben .inhaltDiv {
	margin: 10px;		/* Abstand des Inhalts zum Blockrand */
}

-->
</style>
</head>

<body>

<div id="mitte"><div class="inhaltDiv">
<APPLET name="chat" code="de/spin/chat/small/Client.class"
    codebase="test.php"
   WIDTH = "100%"
HEIGHT = "100%"
HSPACE = "0" 
VSPACE = "0">
<PARAM name="properties" value="properties.txt">
<PARAM name="language" value="language.txt">
<PARAM name="port" value="8000">
<PARAM name="virtual" value="default">
<PARAM name="channel" value="Ratsch_Tratsch">


</APPLET>
</div></div>

<div id="oben"><div class="inhaltDiv">
<h2>#oben</h2>
</div></div>



</body>
</html>

jedoch ist das applet wieder nicht auf 100% höhe. hab es laut den Downloadfiles umgebaut. Wo liegt nun das problem?

Maik · 16. Januar 2009

Das liegt dann vermutlich an deinem Java-Applet.

mfg Maik

domi1984 · 16. Januar 2009

das hat aber bei höhe 100% und beim Firefox funktioniert es auch. an dem liegt das nicht.

Maik · 16. Januar 2009

Versuch es mal hiermit:

CSS:

* html #mitte .inhaltDiv {
height:100%;
}

Ansonsten, ist die Seite irgendwo erreichbar, um dort mal einen Blick drauf werfen zu können?

mfg Maik

✔ 2 divs - einer mit height 100%

domi1984

Grünschnabel

Maik

domi1984

Grünschnabel

Maik

domi1984

Grünschnabel

Maik

domi1984

Grünschnabel

Maik

domi1984

Grünschnabel

Maik

Neue Beiträge