tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
1
ZUGRIFFE
489
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 26.11.10 16:19 #1
    socke999 socke999 ist offline Mitglied Gold
    Registriert seit
    Aug 2005
    Beiträge
    122
    Hallo, ich hab mal ein Problem beim erstellen meines Layouts:


    Ich will eine Menüleiste oben haben (#topBar), die 30px hoch ist und 100% breite hat.
    Darunter soll dann ein #container sein, der die restliche Seite auffüllt, also 100% breite hat und die restlichen 100% höhe auffüllt.

    Meine Seite soll nicht "scrollbar" sein, also immer nur die Seite sozusagen genau so hoch sein, wie das Browserfenster ist. Nur eben soll die Menüleiste, immer fix 30px hoch sein, und der #container dann den rest ausfüllen.

    Ich hab mal mit einer Tabelle begonnen, aber irgendwie komm ich nicht mehr weiter:

    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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
body
{
	margin:0;
	padding:0;
	max-height:100%;
	overflow:hidden;
	width:100%;
}

#topBar
{
	width:100%;
	height:30px;
	background:#F00;
	margin:0;
}

#container
{
	width: 100%;
	height:inherit;
	overflow:hidden;
	background-color:#0F3;
	margin:0;
}

#uiTable
{
	width:100%;
	height:100%;
	empty-cells:show;
}

</style>

</head>

<body>

<table id="uiTable" cellpadding="0" cellspacing="0">
    <tr>
        <td id="topBar"> </td>
    </tr>
    <tr>
        <td id="container"></td>
    </tr>
</table>



</body>
</html>
    Kann mir da jemand weiterhelfen? Es muss auch nicht unbedingt mit <table> sein, es kann auch mit <div> aufgebaut werden. In #container werde ich dann DIV's oder so etwas hineingeben...
     
    Zitieren Zitieren
  2. 26.11.10 16:41 #2
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    Diese Problematik hast du in diesem Sommer '10 hier schon zweimal vorgestellt, und die beiden möglichen Lösungswege aufgezeigt bekommen, die du jederzeit in deinem Thema Div mit 100% width und height hättest nachlesen können.

    Entweder behilfst du dir mit einem umschliessenden Parent-DIV (= #uiTable), das die 100%-Höhe incl. dem Hintergrund des Seiteninhalts (= #content) besitzt, und die DIV-Blöcke #topBar u. #content in sich beheimatet, um den optischen Eindruck zu erwecken, dass sich der Inhaltsbereich unterhalb der Navigation bis zum unteren Fensterrand erstreckt:

    Code xhtml:
    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

    <!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>Test</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
html,body
{
    height:100%;
}
#uiTable
{   
    min-height:100%;
    background-color:#0F3;
}
#topBar
{
    height:30px;
    background:#F00;
}
#container
{
 
}
</style>
 
</head>
 
<body>
 
<div id="uiTable">   
        <div id="topBar"> </div>
        <div id="container"></div>
</div>
 
</body>
</html>

    Oder du greifst auf die absolute Positionierung der beiden DIV-Blöcke zurück, so wie in Post #17 des o.g. Threads vorgestellt, und von dir seinerzeit dankend angenommen.

    An diesen beiden möglichen Lösungsansätzen hat sich bis heute auch nix geändert.

    Wozu also den kalten Kaffee nun zum dritten Mal aufwärmen?

    Zitat Zitat von Netiquette #12
    Bitte erstelle keine Doppel-/Mehrfach-/Pushpostings. Dazu zählen insbesondere das Erstellen identischer Themen in mehreren unterschiedlichen Unterforen, das mehrfache oder erneute Einstellen eines bereits vorhandenen Themas [...]
    Geändert von spicelab (27.11.10 um 09:35 Uhr) Grund: Tipp-Ex
     
    Zitieren Zitieren
« Div richtig Positionieren - Wie? | Css Menü mit eigener ID für jeden Menü Punkt »

Ähnliche Themen

  1. Div-Layout - Problem mit height: 100%
    Von benninet im Forum CSS
    Antworten: 6
    Letzter Beitrag: 02.09.08, 21:10
  2. Layout mit 100% height und width
    Von alex130 im Forum CSS
    Antworten: 39
    Letzter Beitrag: 28.02.07, 17:15
  3. Mehrspaltiges Layout: Probleme mit min-height:100% bzw height:100%
    Von gunwald im Forum CSS
    Antworten: 0
    Letzter Beitrag: 22.01.07, 20:00
  4. height-Angabe macht Probleme mit Layout
    Von Chandini im Forum CSS
    Antworten: 6
    Letzter Beitrag: 14.03.06, 11:40
  5. Frame Layout oder Table Layout?
    Von steff aka sId im Forum HTML & XHTML
    Antworten: 2
    Letzter Beitrag: 09.03.04, 15:01