zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden horiz. und vert. Skalierung der Seite bei DIV-Scrollbalken ?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 10.06.2003, 10:59
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard horiz. und vert. Skalierung der Seite bei DIV-Scrollbalken ?

Hallo,
DIV-Container soll automatisch Scrollbalken bei zu großem Inhalt erhalten. Dazu habe ich overflow:auto eingebaut.

overfow:auto klappt aber nur mit absoluter Höhenangabe, wenn die Weite schon prozentual angegeben ist.
wie zum Beispiel:
height:450px;
width:99%;

Leider funktioniert damit die vertikale Skalierung der Seite für verschiedene Bildschirmauflösungen nicht mehr.
Gibt es eine Lösung, sowohl Scrollbalken verwenden als auch Skalierung erreichen ?
Danke für Hinweise
Wolfgang
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 11.06.2003, 12:38
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

Kann ich nicht bestätigen, bei mir funktioniert
widthy%; height:yx%; overflow:auto;

ohne Probleme.
MfG
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.06.2003, 11:08
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

Hier noch mal etwas genauer:
Ich habe 3 Container nebeneinader, die alle gleich hoch sein sollen.
(Darüber liegen noch zwei Container mit je 15% Höhe über die ganze Breite des Bildschirms.)

Nur wenn ich bei den 3 nebeneinander liegneden Containern die Höhe in 450px angebe, erreiche ich, dass diese gleich hoch sind.
Bei Angaben für die Höhe 70%, hängt die Höhe einfach nur von der Inhaltsmenge in diesem Container ab. Scrollbar erscheinen nur bei dem mittleren Container. Die Bildschirmhöhe wird übrigens auch nicht ausgenutzt, obwohl 15+15+70=100% ergeben. Oder worauf bezieht sich die %-Angabe ?

Als Beispiel hier der rechter Container:
#divcontteaser
{
/*white-space:nowrap; */ /* kein Zeilenumbruch bei Leerzeichen */
font-size:12px;
background-color:white;

background-color:white;

height:70%;
width:13%;
float:left;

margin: 1px;
padding:1px;

border-top: 1px solid #cc1f2f;
border-right: 1px solid #aa1f1f;
border-bottom: 1px solid #aa1f1f;
border-left: 1px solid #cc1f2f;
}

#divteaserkopf
{
background-color : #D9D9D9;

height:5%;
width:99%;
float:left;

margin: 1px;
padding:1px;

border-top: 1px solid #cc1f2f;
border-right: 1px solid #aa1f1f;
border-bottom: 1px solid #aa1f1f;
border-left: 1px solid #cc1f2f;
}

#divteaserstart
{
/*
font-size:0.8em;
line-height:1.0em;
*/
background-color:white;

height:90%;
/*height:450px;*/
width:99%;
float:left;

overflow: auto;

margin: 1px;
padding:1px;

border-top: 1px solid #cc1f2f;
border-right: 1px solid #aa1f1f;
border-bottom: 1px solid #aa1f1f;
border-left: 1px solid #cc1f2f;
}

#divteaserfuss
{
background-color : #D9D9D9;

height:5%;
width:99%;
float:left;

margin: 1px;
padding:1px;

border-top: 1px solid #cc1f2f;
border-right: 1px solid #aa1f1f;
border-bottom: 1px solid #aa1f1f;
border-left: 1px solid #cc1f2f;
}


/* Navigation Teaser */
/* ----------------- */
.teaser {
background-color : #D9D9D9;

margin: 1px;
padding:1px;

border-top: 1px solid #cc1f2f;
border-right: 1px solid #aa1f1f;
border-bottom: 1px solid #aa1f1f;
border-left: 1px solid #cc1f2f;
}
Mit Zitat antworten
  #4 (permalink)  
Alt 12.06.2003, 14:43
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

So wird was draus :

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>five divs</title>


<style type="text/css">
.div1 {position:absolute; left:0%; width:100%; top:0%; height:15%; background-color:green; overflow:auto;}
.div2 {position:absolute; left:0%; width:100%; top:15%; height:15%; background-color:blue; overflow:auto;}
.div3 {position:absolute; left:0%; width:20%; top:30%; height:70%; background-color:red; overflow:auto;}
.div4 {position:absolute; left:20%; width:30%; top:30%; height:70%; background-color:yellow; overflow:auto;}
.div5 {position:absolute; left:50%; width:50%; top:30%; height:70%; background-color:gray; overflow:auto;}
</style>

</head>
<body>
<div class="div1">
div1
div1
div1
div1
div1
div1
div1
div1
div1
div1

</div>

<div class="div2">
div2
div2
div2
div2
div2
div2
div2
div2
div2
div2

</div>

<div class="div3">
div3
div3
div3
div3
div3
div3
div3
div3
div3
div3

div3
div3
div3
div3
div3
div3
div3
div3
div3
div3

</div>

<div class="div4">
div4
div4
div4
div4
div4
div4
div4
div4
div4
div4

div4
div4
div4
div4
div4
div4
div4
div4
div4
div4

</div>

<div class="div5">
div5
div5
div5
div5
div5
div5
div5
div5
div5
div5

div5
div5
div5
div5
div5
div5
div5
div5
div5
div5

</div>

</body>
</html>
Mit Zitat antworten
  #5 (permalink)  
Alt 12.06.2003, 15:34
Anonymous
Gast
Thread-Ersteller
 
Beiträge: n/a
Standard

Super.
Vieeeeeeeelen Dank auch !!!

Gruß
Wolfgang
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
DIV - Scrollbalken springt beim Refresh supercop89 Javascript & Ajax 8 25.05.2010 12:01
div höhe - 2 scrollbalken vermeiden grubentaucher CSS 4 07.04.2010 11:16
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 10:59
benötige waagerechten Scrollbalken im DIV Sven4972 CSS 0 18.12.2005 14:24
csss seite in frame horiz. scrollbar Holger (HMR) CSS 0 15.09.2005 15:05


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