eXma » Diskutieren » Computer und Technik
Startseite - Veranstaltungen - Mitglieder - Suche
Vollständige Version anzeigen: CSS nochmal
Socres
15 Oct 2008, 11:04
Ich bin mal wiederan das leidiges Problem gemacht, finde dazu rein garnix im Netz was irgendwie richtig passt, vieleicht hats ja schonmal jemand gemacht. Im idealfall solls ausschliesslich übers styling passieren und kein javascript zum einsatz kommen:



zwei divs liegen in einem frame, das oberste ändert die höhe automatisch, das darunter angeordnete soll die höhe abhängig davon ändern (also den restbereich ausfüllen) und einen scrollbalken bekommen:


[CODE]
+------------------------------------------------------+
|Body |
| +-------------------------------------------------+ |
| | div1 (ändert beim | |
| | zusammenschieben | |
| | des browsers die höhe | |
| +-------------------------------------------------+ |
| | div2 (mit scrollbalken) | |
| | | |
| +-------------------------------------------------+ |
+------------------------------------------------------+

problem ist non folgendes:
für einen scrollbalken muss ich dem unteren div ne höhe zuweisen. da ich die höhe nicht kenne (durch das veränderliche obere) hab ich dem 100% gegeben, leider füllen 100% die freie fläche nicht aus sondern werden als fixer wert benotzt und sind sozusagen genauso hoch wie das body element.
jetzt rückt natürlich mein div inkl scrollbar um die höhe des oberen divs aus meinem schwulen browserfenster raus....

ich will das es geht! angry.gif
Chris
15 Oct 2008, 11:26
mit "width:" eine Größe erzwingen und mit "overflow:scroll" das Fenster zu Scrollleisten zwingen ...
Perseus
15 Oct 2008, 13:34
CODE

<?xml version="1.0" encoding="iso-8859-1" ?>
<!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" lang="de" xml:lang="de">
<head>
<title>Socres Test</title>
<style type="text/css">
.top {
width:100%;
height:10%;
overflow:hidden;
background-color: #00FF00;
position:absolute;
top:0;
left:0;
}
.bottom {
width:100%;
background-color: #ff0000;
padding:10px;
position:absolute;
top:10%;
left:0;
height:90%;

}
.text {
margin:10px;
height:90%;
width:90%;
overflow-x:hidden;
overflow-y:auto;
}

</style>
</head>
<body style="background-color: #0000ff;overflow:hidden;">
<div class="top">Menu blabla</div>

<div class="bottom">
<p class="text">
   Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.</p>
   </div>
</body>
</html>

valid xHTML 1.0


meine Kontonummer kriegst per PM.
Socres
15 Oct 2008, 14:15
hat sich erledigt, machs per javascript...

perseus, deins nutzt mir nix, du gibts für das obere div nen festen wert an, dieses ist bei mir aber live veränderlich... da liegt ne liste mit buttons drinne und wenn das browserfenster schmal wird werd das menü mehrzeilig...

aber javascript ist mein freund und domready sowie resize als events bestimmen die ausführung der höhenermittlung