tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
3
ZUGRIFFE
1148
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 01.06.10 14:25 #1
    Avatar von ronaldo84
    ronaldo84 ronaldo84 ist offline Mitglied Brokat
    Registriert seit
    Dec 2004
    Ort
    Berlin / Rudow
    Beiträge
    453
    Hallo Leute,

    folgendes Problem:
    Ich habe eine Seite mit dem HTML-Gerüst:
    HTML-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>
<title>
    
</title>
<link rel="stylesheet" type="text/css" href="../css/layout.css" />
   
</head>
<body>
     <div id="wrapper" class="clearfix">
      <div id="header">Header</div>
      <div id="menu">Menu</div>
      <div id="content">
    'Inhalt
      </div>
      <div id="footer">footer</div>
    </div>
</body>
</html>
    Dazu die CSS-Datei nach dem Tutorial von Maik CSS-Layout mit 100%-Höhe.
    Ich habe aber nur einen Div-Container, der die komplette Breite des Fenster einnehmen soll.
    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

    * 
{ /* Mit Universalselektor die Polsterungseigenschaften aller (Block-)Elemente auf null setzen */
  margin: 0;
  padding: 0;
  font-family:Verdana;
    font-size:10pt;
}
 
body 
{
  text-align: center; /* Für IE 5.01 & 5.5, um die Box #wrapper horizontal zu zentrieren */
}
 
div 
{
  text-align: left; /* text-align:center wieder aufheben, damit DIV-Inhalte linksbündig ausgerichtet sind */
}
 
html, body 
{
  height: 100%; /* Anzeigebereich in der Vertikalen auf 100% strecken */
  width:100%;
}
 
/* DIV-Boxen */
div#wrapper 
{
  position: relative;
  margin: 0 auto;
  min-width: 100%; /* Mindesthöhe in modernen Browsern */
  width: auto !important; /* !important-Regel für moderne Browser */
  width: 100%; /* Mindesthöhe in IE (<7) */
  min-height: 100%; /* Mindesthöhe in modernen Browsern */
  height: auto !important; /* !important-Regel für moderne Browser */
  height: 100%; /* Mindesthöhe in IE (<7) */
}
 
div#header 
{
  height: 80px;
  background-color: #C6C6DF;
}
 
div#menu 
{
  height:20px;
  background-color: #efefef;
}
 
div#content 
{
  margin: 20px;
  padding-bottom: 25px;
  bottom:20px;
  overflow:auto;
}
 
div#footer 
{
  clear: both;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
  background: #fff;
}
 
/* clearfix zum Aufheben der Floatumgebung */
.clearfix:after
{
  content: ".";
  display: block;
  height: 0;
  font-size: 0;
  clear: both;
  visibility: hidden;
}
 
.clearfix 
{
  display: inline-block;
}
 
/* Hides from IE-mac \*/
* html .clearfix 
{
  height: 1%;
}
.clearfix 
{
  display: block;
}
/* End hide from IE-mac */
    Nun zu meinem Problem: Ich setze das den oben gepostete Code als Template ein. Bei einigen Seiteninhalt ist der Text sehr lang, sodass der Content-Div scrollbar sein muss (was er auch ist). Bei einer Suchseite möchte ich allerdings, dass der Content-Div auf die Größe des Browserfenster maximiert wird und dann das Div zum anzeigen der Suchergebnisse gescrollt werden muss. Leider kriege ich das nicht hin. Er vergrößert immer den kompletten Content-Div.
    Habe zur verdeutlichung mal zwei Abbildung mit angehangen. Abb1 zeigt wie es sein sollte und Abb2 wie es momentan ist.
    Vielleicht weiß ja jemand von euch weiter.
    Habe nur den HTML-Code etwas gekürzt. CSS ist komplett. Den Container für die Suchergebnisse habe ich aus der CSS-Datei entfernt.
    Vielen Dank

    Ronald
    Miniaturansicht angehängter Grafiken Miniaturansicht angehängter Grafiken Div Elterncontainer 100% aber nicht Scrollbar.-abb1.jpg   Div Elterncontainer 100% aber nicht Scrollbar.-abb2.jpg  

     
    Bitte alle erledigten Themen abschliessen.
    Zitieren Zitieren
  2. 01.06.10 14:29 #2
    Maik Tutorials.de Gastzugang
    Hi,

    overflow:auto, respektive das Scrollen, funktioniert nur entweder mit einer absoluten Höhenangabe, oder durch die absolute Positionierung des Blocks mittels top und bottom.

    Zur letzt genannten Technik siehe z.B. http://www.cssplay.co.uk/layouts/fixit.html.

    mfg Maik
     
    Zitieren Zitieren
  3. 01.06.10 15:00 #3
    Avatar von ronaldo84
    ronaldo84 ronaldo84 ist offline Mitglied Brokat
    Registriert seit
    Dec 2004
    Ort
    Berlin / Rudow
    Beiträge
    453
    Hallo Maik,

    vielen Dank für deine Antwort. Ich weiß jetzt nicht ob ich was überlesen habe, aber in dem von dir geposteten Link finde ich nichts zu meiner Problemstellung. Wie ich den Content-Container zum Scrollen bringe ist mir schon klar. Aber auf Suchseite soll nicht der Contentcontainer die Scrolleisten haben, sondern das Div zum darstellen der Suchergebnisse. Der Content-Container soll auf 100% Höhe des Browserfenster vergrößert werden aber keine Scrollfunktionalität besitzen.
    Gruß
    Ronald
     
    Bitte alle erledigten Themen abschliessen.
    Zitieren Zitieren
  4. 01.06.10 15:04 #4
    Maik Tutorials.de Gastzugang
    Dann mußt du wohl für die Suchseite ein anderes Stylesheet für das gewünschte Seitenkonzept nutzen, wenn dir dort mit einer festen Höhenangabe für den DIV-Block nicht geholfen ist.

    Mein Link soll dir lediglich die zweitgenannte Technik (absolute Positionierung des Blocks) näherbringen, die du aber auch in dem Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken nachlesen kannst.

    mfg Maik
     
    Zitieren Zitieren
« Tabelle mit Mousover Effekt hinterlegen | <input type= "file"> formatieren (ohne textzeile darstellen) »

Ähnliche Themen

  1. TextArray Scrollbar gehen nicht und finde den Fehler nicht
    Von Eklaf im Forum Java
    Antworten: 4
    Letzter Beitrag: 31.01.11, 12:00
  2. Div scrollen, aber ohne scrollbar!
    Von mille im Forum CSS
    Antworten: 1
    Letzter Beitrag: 31.08.06, 12:34
  3. Horizontale Scrollbar im Frameset, aber nur der IE macht Zicken
    Von oppa im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 01.08.05, 18:01
  4. Scrollbar erzwingen, Firefox macht noch eine vertikale Scrollbar dazu...
    Von aTa im Forum HTML & XHTML
    Antworten: 16
    Letzter Beitrag: 23.12.04, 15:37
  5. scrollbar ausblenden, aber dennoch scrollen können
    Von Loctus im Forum Javascript & Ajax
    Antworten: 1
    Letzter Beitrag: 20.12.04, 23:09

Stichworte