zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Overflow und prozentuale Höhe innerhalb eines 100% Divs

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.04.2009, 13:08
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.11.2005
Beiträge: 175
insanic! befindet sich auf einem aufstrebenden Ast
Standard Overflow und prozentuale Höhe innerhalb eines 100% Divs

Hallo,

ich habe einen DIV, der 100% der Höhe einnimmt und vertikal zentriert ist:

Code:
.main_res
{
	display: block;
	width: 500px;
	background: #bab19b;
	border: 1px solid #a39c8a;
	text-align: center;
	margin: auto;

	position: absolute; 
	left: 50%;
	margin-left: -250px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}
Darin zeige ich einen kleinen Text und ein Logo und darunter einen Div, der als Box einen langen Text enthalten soll. Der Div soll nun den ganzen restlichen freien Bereich einnehmen und bei einem zu langem Text wie ein Iframe aussehen, also mit Scrollbalken.

Habe folgendes versucht:

Code:
#res
{
	overflow: auto;
	height: 100px;
	width: 300px;
	text-align: left;
}
Dabei werden die Scrollbalken gezeigt. Versuche ich aber, hier eine prozentuale Angabe wie z.B. 60% anzugeben, klappt das ganze nicht

Weiß jmd, wie man den Div auf die maximale Höhe bekommt?

Der HTML Code ist recht schlicht:

Code:
<div class="main_res">
	<div id="logo">
		<img src="page/logo.gif" alt="Blaa" />
	</div>
	
	<p>
		Ergebnis:
	</p>
	
	<div id="res">
		hier ganz viel text...
	</div>
</div>
Danke schonmal!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.04.2009, 15:45
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.11.2005
Beiträge: 175
insanic! befindet sich auf einem aufstrebenden Ast
Standard

Ok anscheinend funktioniert es nicht, einem DIV-Container eine prozentuale Höhe zu verpassen, wenn ich nun meine ganzen Google-Ergebnisse der letzten Stunde richtig verstanden habe ...

Ist es denn irgendwie möglich (ggf auch mittels Javascript), den zwischen Header und Footer (welche sich in einem 100%-hohen Div-Container befinden) zu bestimmen und somit dann den entsprechenden DIV auf diese Höhe (in px) zu setzten!?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.04.2009, 16:26
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

also erstmal: position:absolute brauchst du da nicht.
Positioniere es wie hier zu sehen ist. Steht auch unter Punkt 5 unserer CSS-FAQ.

Warum gibst du überhaupt eine Höhe für #res an? Das sollte doch auch ohne gehen.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #4 (permalink)  
Alt 03.04.2009, 17:38
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 03.11.2005
Beiträge: 175
insanic! befindet sich auf einem aufstrebenden Ast
Standard

Hey erstmal,
ok danke, aber was ist an dieser Methode besser? position:absolute brauche ich schon, wenn ich eben diese Methode nutzte, wie ich sie per Google gefunden habe

Hm, wenn ich kein height für #res angebe, woher soll der div dann seine Höhe erfahren? Das Logo soll ganz oben angezeigt werden und der Footer ganz unten bei einer Höhe von 100%, nur der Platz dazwischen soll ausgefüllt werden. Würde ich keine Höhe vergeben, so würde viel Text den Footer ggf. komplett untne rausschieben...

Edit: Habe es nun mit Hilfe von jQuery gelöst, da das bei mir sowieso eingesetzt wird: Mittels .height() kann man die Höhe des ganzen Containers (des 100% Containers) erhalten (in px), und davon ziehe ich dann die Höhe des Footers und Headers ab und habe somit den freien Platz in px Davon werden noch kleine Schönheitsabstände abgezogen und dann kann ich den Div auf diese Höhe setzten!!

Falls es natürlich eine css-only Lösung gibt, wäre es interessant, wie diese aussehen würde

Geändert von insanic! (03.04.2009 um 17:55 Uhr)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
drei divs innerhalb von einem div positionieren? muusser CSS 0 24.02.2009 14:04
IE div höhe und overflow tintifax CSS 1 06.08.2008 12:38
div hat keine Höhe, wenn innere divs gefloatet werden? Anotherone CSS 3 23.07.2006 01:25
divs aneinander in der höhe ausrichten - wie ? MS Master CSS 1 24.02.2005 16:49


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:34 Uhr.