tutorials.de Buch-Aktion 05/2012
ERLEDIGT
JA
ANTWORTEN
4
ZUGRIFFE
659
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
DIESES THEMA IST
GESCHLOSSEN
  1. 02.12.05 13:19 #1
    Avatar von Steffen Giers
    Steffen Giers Steffen Giers ist offline Mitglied Gold
    Registriert seit
    May 2004
    Beiträge
    170
    Servus,

    ich benötige mal etwas hilfe.

    Ich habe 3 Spalten die mit float:left nebeneinander angeordnet sind. Das funktioniert auch wunderbar. Das eigentliche Problem liegt darin, dass diese Spalten trotz height:100%; um die Höhe des <div id="head"> über den sichtbaren Bereich hinausragen. Ich kapier aber nicht warum das so ist.

    Zum besseren Verständnis hier der Link:
    http://www.touchedwork.de/test/index1.html

    CSS-File
    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

         /* 
     *
     * @author   Steffen Giers <steffengiers@yahoo.de>
     * @copyright  2005 touchedwork.de
     * @version 1.0
     * @since     File available since Release 1.0
     */
    
    * {margin:0;padding:0}
    img {border:0}
    li,ul {list-style:none}
    
    html, body {
    height:100%;
    background:#585756;
    color:#fff;
    font-family:"Lucida Grande",Tahoma, Arial, sans-serif;
    font-size:11px;
    line-height:1.4em;
    }
    
    #primarycontent {
    height:100%;
    width:800px;
    }
    
    .content {
    float:left;
    height:100%;
    width:260px;
    }
    
    #col_1 {
    border-right: 1px solid;
    }
    
    #col_2 {
    border-right: 1px solid;
    }
    
    #col_3 {}
    
    #bottom {
    clear:left;
    }

    HTML-File
    HTML-Code:
         <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    	"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    	<head>
    		<title>Touchedwork</title>
 		<link rel="stylesheet" href="css/style1.css" type="text/css" media="all" />
    	</head>
    	
    	<body>
    		<div id="primarycontent">
    			<div id="head">
    				<ul id="nav">
 					<li>Home</li>
 					<li>About</li>
 					<li>Portfolio</li>
 					<li>Contact</li>
    				</ul>
    			</div>
    			
    			<div class="content" id="col_1">
 				<h2>Recent News</h2>
    			</div>
    			
    			<div class="content" id="col_2">
 				<h2>Latest Work</h2>
    			</div>
    			
    			<div class="content" id="col_3">
    				<h2>Archiv</h2>
    			</div>
    			<div id="bottom"></div> 
    		</div>
    	</body>
    </html>
    Danke für eure Hilfe!
    Geändert von Steffen Giers (02.12.05 um 13:23 Uhr)
     
  2. 02.12.05 17:18 #2
    Maik Tutorials.de Gastzugang

    Ich kapier aber nicht warum das so ist.
    Der Abstand / die Höhe zwischen der unteren Elementgrenze DIV#head und dem unteren Browserfensterrand bzw. der unteren Elementgrenze DIV#primarycontent beträgt nicht 100%, sondern das vertikale Restmaß des Viewports, also 100% - Elementhöhe (DIV#head).
     
  3. 03.12.05 00:30 #3
    Avatar von Steffen Giers
    Steffen Giers Steffen Giers ist offline Mitglied Gold
    Registriert seit
    May 2004
    Beiträge
    170
    Hm, klingt auch igendwie logisch. Danke Dir...

    Hast du eine Idee wie ich es lösen könnte das die Ränder bis zum Ende des Viewports reichen? Die Ränder sollen bis zum Ende reichen wenn der Inhalt in den Viewport passt. Falls der Inhalt über den Viewport hinaus ragt soll natürlich der Scrollbar zu nutzen sein.


    Bye
     
  4. 03.12.05 06:14 #4
    Maik Tutorials.de Gastzugang
    Probier doch mal folgendes:

    Code :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

    #primarycontent {
height: 100%;
width: 800px;
}
 
div#head
{
height: 10%;
}
 
.content {
float: left;
height: 90%;
width: 260px;
}
     
  5. 03.12.05 08:59 #5
    Avatar von Steffen Giers
    Steffen Giers Steffen Giers ist offline Mitglied Gold
    Registriert seit
    May 2004
    Beiträge
    170
    Danke, das war eine gute Idee. Ich habe um die 3 spalten einen weiteren Container gemacht der Height 100% bekommen hat. Den Header habe ich auf eine feste Höhe von 300px gesetzt. Der zugefügte Container streckt sich nun vom unteren Rand des Head bis zum Ende des Viewports (ich liebe dieses Wort ) Die Linien die eine optische Trennung hervorrufen sollen habe ich durch ein Background image anstelle eines Borders gemacht.

    Danke Dir nochmal...
     
« Probleme mit Höhe bei background-image bzw. background-repeat | 2 unterschidliche Listen »

Ähnliche Themen

  1. Floating Problem
    Von DeniseLechner im Forum CSS
    Antworten: 4
    Letzter Beitrag: 14.12.09, 08:00
  2. Problem mit Links in floating div im IE
    Von FreakyPenguin im Forum CSS
    Antworten: 2
    Letzter Beitrag: 24.04.08, 21:36
  3. Floating Menü
    Von Wugli im Forum Javascript & Ajax
    Antworten: 0
    Letzter Beitrag: 06.03.08, 10:15
  4. AE 7 floating point
    Von cycovery im Forum Videoschnitt, Videotechnik & -produktion
    Antworten: 0
    Letzter Beitrag: 16.11.07, 06:48
  5. Der IE und das Floating...
    Von Layna im Forum CSS
    Antworten: 6
    Letzter Beitrag: 04.07.07, 15:03