• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Div-Größe anpassen

T

Tiefflieger

New member
Angenommen, ich habe ein div, wo padding-left und padding-bottom auf 50px gesetzt sind. Zwei Fragen dazu:

1) Kann ich es irgendwie so hinbekommen, daß das Div exakt die Größe des gesamten Bildschirms annimmt? Bei mir wird es immer zu groß, da das Padding stört...
Code dazu:
PHP: 
div {
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	padding-bottom:50px;
	padding-left:50px;
	white-space:nowrap;
	overflow:scroll;
	/*Damit man die Grenzen schön erkennt:*/
	background-color:#0000FF;
}
Und die html-Seite:
HTML: 
<html>
<head>
</head>
<body>
<div>blibb</div>
</body>
</html>


2) Wie kann ich es erreichen, dass das Div automatisch so groß wird, daß es genau seinen Inhalt aufnehmen kann (und dieser nicht einfach über den Rand des Divs hinausgeht)? Das kann doch nicht so schwer sein, aber ich bin schon ewig am rumtüfteln und komme partout nicht drauf...
 
Das erste Problem liegt wohl daran, das in einem Element absolute und relative Angaben gemacht werden.
Ist klar, das dass Div überlang wird.
Statt dem 50px besser 5% nehmen und dann die Gesamtlänge auf 95% setzen.
Wenn das nicht in Dein Layout passt,
besser auf das padding verzichten und das Problem anders versuchen zu lösen.
Z.B. ein 2. Div reinschreiben.

Zu 2.:
Das Problem ist mir noch nicht begegnet.
Wie ist es, wenn Du bei width:auto; schreibst?
 
ich meine 2 passiert wenn man absolut positionierte Elemente ineinander verschachtelt. Mach das div mal relative, da es sowieso ganz oben sitzt sollte das keinen Unterschied machen, wenn du den inhalt dann auch noch relative und nicht absolut reinsetzt, sollte das eigentlich kein Problem machen
 
dkdenz schrieb:
Wenn das nicht in Dein Layout passt,
besser auf das padding verzichten und das Problem anders versuchen zu lösen.
Z.B. ein 2. Div reinschreiben.
Zum Vergrößern anklicken....
Hm ok danke, an das Workaround hatte ich auch schon gedacht, ich hatte aber gehofft, daß man das eleganter lösen könnte - trotzdem danke ;-)


Zu 2): Das Problem tritt dann auf, wenn das div größer als das aktuelle Fenster werden müßte, wenn es sich automatisch an den Inhalt anpaßt - manuell per css läßt es sich natürlich schon auf jede beliebige Breite einstellen, aber ich weiß ja eben nicht, wie breit das genau werden müßte. Ob ich position:relative oder position:absolute verwende, ist dabei ziemlich wurscht...
Ich habe mal eine Beispielseite onlinegestellt: http://www.uni-mainz.de/~jensbuth/jswelt/index.htm
 
Code: 
overflow:auto;
...beim oberen div.

Aber ehrlich gesagt, verstehe ich nicht was Du meinst...
(oder anders gesagt: was Du eigentlich bezwecken, erreichen willst...)
 
Zuletzt bearbeitet:
Hier nimmt das Blaue (body) immer 100% des Bildschirms ein und
das Innere hat immer die Länge des Inhalts (allerdings mit padding:20px; und der Inhalt geht auch nicht über den Rand hinaus. Sollte das so sein?

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/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" />
<style type="text/css">
html, body { width:100%; height:100%; margin:0px; padding:0px;  background-color:#0000FF;  }

#aussen { margin:50px 0px 50px 0px; background-color:#FF007F; }
#innen {  padding:20px; background-color:#FF007F; }
</style>
</head>
<body>
<div id="aussen">
    	<div id="innen">
     
	Quisque sed turpis a quam fringilla tincidunt. Donec ipsum. Proin neque sapien, feugiat eget, tempor a, fringilla eget, metus. Suspendisse potenti. Quisque eget justo. Suspendisse justo elit, posuere nec, vulputate eu, congue ac, felis. Vestibulum sed magna vitae enim facilisis adipiscing. Cras ac ipsum eu neque mollis gravida. Donec quis nunc quis ante molestie tempus. Maecenas blandit sollicitudin lacus. Quisque purus enim, interdum ac, scelerisque nec, venenatis vitae, neque. Aenean molestie erat sed ipsum. Aenean blandit.

	    </div>
</div>
</body>
</html>
 
dkdenz schrieb:
Aber ehrlich gesagt, verstehe ich nicht was Du meinst...
Zum Vergrößern anklicken....
Normalerweise paßt sich ja das Div seine Größe an die Größe des Inhaltes an, sofern es dazu keine CSS-Angaben gibt. Die Größe wird aber nur solange angepaßt, wie das Div nicht größer als das Browserfenster werden müßte.
-> Ich möchte ein Div, was sich automatisch an die Größe des Inhaltes anpaßt, auch wenns größer werden müßte als das Browserfenster.

@Bine das wars leider nicht, trotzdem danke für die Mühe ;-)
 
Code: 
body{
width:3000px;
[B]margin:0px;[/B]
}
div {
	position:[B]relative;[/B]
	height:100%;
        white-space:nowrap;
	overflow:[B]visible[/B];
	/*Damit man die Grenzen sch�n erkennt:*/
	background-color:#0000FF;
}
Ich habe jetzt mal das Fett-markierte gemacht und es scheint zu gehen...
 
Hm ne, nicht ganz...
Ich würde es gerne hinbekommen, dass es so aussieht: http://www.uni-mainz.de/~jensbuth/jswelt/index4.htm allerdings ohne, dass ich in der CSS-Datei explizit die genaue Breite angeben muß:
PHP: 
body{
	margin:0px;
	/*Diese Angaben will ich weglassen können - ich weiß ja nie genau, wie groß die Seite genau wird...*/
	width:1930px;
	height:1450px;
}
div {
	position:relative;
	height:100%;
        white-space:nowrap;
	overflow:visible;
	/*Damit man die Grenzen schön erkennt:*/
	background-color:#0000FF;
}
 
Wen es noch interessiert: Nach langem Herumprobieren habe ich es geschafft, das div ist zwar nicht mehr positionierbar, aber darauf bin ich bereit zu verzichten:
http://www.uni-mainz.de/~jensbuth/jswelt/index5.htm

CSS-Datei:
PHP: 
div {
	white-space:nowrap;
	/* Das ist der Trick, damit man das Div in seiner ganzen Breite sehen ('erscrollen') kann: */
	float: left;
	/*Damit man die Grenzen schön erkennt:*/
	background-color:#0000FF;
}
HTML-Datei:
HTML: 
<html>
<head>
<link rel="stylesheet" href="style5.css" type="text/css">
</head>
<body>
<div>Eine ganz ganz lange Zeile Eine ganz ganz lange Zeile Eine ganz ganz lange Zeile Eine ganz ganz lange Zeile Eine ganz ganz lange Zeile Eine ganz ganz lange Zeile Eine ganz ganz lange Zeile Eine ganz ganz lange Zeile Eine ganz ganz lange Zeile Eine ganz ganz lange Zeile Eine ganz ganz lange Zeile Eine ganz ganz lange Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
Eine sinnlose Zeile<br>
</div>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben