Schwebendes wachsendes Fenster mit Scroller

[Gast] Foren Web allgemein HTML und CSS / Stylesheets Schwebendes wachsendes Fenster mit Scroller

Web allgemein

Themen

Beiträge

Moderatoren

Letzter Beitrag

HTML und CSS / Stylesheets

1193

6413

FSt

19. Dez 2022, 21:28

Vitus

flobaer

Beiträge gesamt: 317

30. Nov 2010, 13:44
Beitrag # 1 von 4
Bewertung:
(3463 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo zusammen,

ich verzweifle an folgendem Problem: Ich möchte ein schwebendes Fenster auf der Seite platzieren, das nicht höher als nötig ist, aber immer komplett zu sehen ist. Innerhalb dieses Fensters soll es eine Titelzeile geben, sowie einen Schließer. Wenn der Text zu lang ist, soll nur der Inhalt scrollen, die Titelzeile aber stehen bleiben. Ich kriege es einfach nicht hin. Mit folgendem Code bin ich bisher am nächsten herangekommen, allerdings erscheint kein Scrollbalken, was im Ergebnis unbrauchbar ist.

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=UTF-8" /> 
<title>Fenstertest</title> 
<style type="text/css"> 
	body { 
		margin:0; 
		padding:0; 
		position:absolute; 
		top:0; 
		left:0; 
		width:100%; 
		height:100%; 
		overflow:hidden; 
	} 
	div#wrapper { 
		background-color:#000; 
		color:#FFF; 
		margin:0 auto; 
		overflow:hidden; 
		width:1000px; 
		height:100%; 
	} 
	div#fenster { 
		position:relative; 
		border: 2px solid #00F; 
		width:700px; 
		margin:50px auto 0; 
		max-height:80%; 
		overflow:hidden; 
	} 
	div#fenstertitel { 
		position:absolute; 
		top:0; 
		left:0; 
		height:20px; 
		width:700px; 
		background-color:#999; 
		cursor:default; 
	} 
	div#schliesser { 
		position:absolute; 
		top:0; 
		right:0; 
		height:20px; 
		width:20px; 
		text-align:center; 
		background:#CCC; 
		cursor:pointer; 
	} 
	div#fensterinhalt { 
		background:#9CF; 
		width:700px; 
		overflow:auto; 
	} 
</style> 
 
</head> 
 
<body> 
    <div id="wrapper"> 
        <div id="fenster"> 
            <div id="fenstertitel"> 
                Titel 
            </div> 
            <div id="schliesser"> 
                X 
            </div> 
            <div id="fensterinhalt">    
                <?php 
                for($i=1; $i <= 30; $i++) { 
                    echo("Zeile ".$i."<br />"); 
                } 
                ?> 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Hat jemand eine Idee, wie man das lösen kann?

Viele Grüße
Florian

Schwebendes wachsendes Fenster mit Scroller

SabineP

Beiträge gesamt: 7586

30. Nov 2010, 14:48
Beitrag # 2 von 4
Beitrag ID: #458363
Bewertung:
(3450 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo flohbaer

Wenn das div fensterinhalt Scrollbalken bekommen soll,
dann muß noch eine Höhe für das div angeben werden.

Probier´s mal so:

div#fensterinhalt {
background:#9CF;
width:700px;
height:100px;
overflow:auto;
}

Die Scrollbalken erscheinen erst dann,
wenn der Inhalt des divs größer wird
als 700 x 100 Pixel.

http://de.selfhtml.org/...nierung.htm#overflow

als Antwort auf: [#458354]
(Dieser Beitrag wurde von SabineP am 30. Nov 2010, 14:54 geändert)

Schwebendes wachsendes Fenster mit Scroller

flobaer

Beiträge gesamt: 317

30. Nov 2010, 14:59
Beitrag # 3 von 4
Beitrag ID: #458365
Bewertung:
(3441 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo Sabine,

genau das ist ja das Problem. Ich will die Höhe nicht vorher definieren, weil sonst das Fenster zu groß ist, wenn nicht genügend Inhalt da ist. Dass es mit einer festen Höhe funktioniert, weiß ich. Danke aber trotzdem.

Viele Grüße
Florian

als Antwort auf: [#458363]

Schwebendes wachsendes Fenster mit Scroller

Neil77

Beiträge gesamt: 287

30. Nov 2010, 16:05
Beitrag # 4 von 4
Beitrag ID: #458371
Bewertung:
(3418 mal gelesen)
URL zum Beitrag
Beitrag als Lesezeichen

Hallo,

vielleicht ist max-height die CSS-Eigenschaft, die du suchst? Damit begrenzt du die Höhe auf einen Maximalwert.

Von IE <7 wird die Angabe allerdings ignoriert.

Grüße, Martin

als Antwort auf: [#458365]

Aktuell

PDF / Print

Wie lassen sich PDF-Dateien optimal für den variablen Datendruck vorbereiten?

| 04.01.2023

Weitere Events

Neuste Foreneinträge

Pfade mit weiï¿½en Hintergrund hinterlegen

Adobe Acrobat DC Pro 23.006.20320 (Mac) / Sonderbares

OSX 14 SONOMA

Leistungseinschrï¿½nkung?

Markierten Text in eine neue Tabellenzelle verschieben (INDD18.5 WIN10)

Indesign-Umstellung fï¿½r arabisch

Fotos: Ordner mit mehreren Alben verï¿½ffentlichen

Lightroom: Katalog mit mehreren Alben verï¿½ffentlichen

In PDF Formular das eingetragene Datum um 6 oder 12 Monate spï¿½ter berechnen

Indesign 2022 Versionen der Abteilung sukzessive nicht mehr startbar.

Weitere Stellenangebote