tutorials.de Buch-Aktion 05/2012
Seite 2 von 2 ErsteErste 12
ERLEDIGT
JA
ANTWORTEN
17
ZUGRIFFE
796
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. #16
    owned139 owned139 ist offline Mitglied Bronze
    Registriert seit
    Jun 2009
    Beiträge
    26
    Post1:
    Hallo liebe Community,
    ich habe mal wieder ein Problem. Wie bekommt man bei einem 3 zeiligen Design die mittleren DIV`s so groß, das sich das Design auf 100% des sichbaren Bereichs erstreckt?

    Post 8:
    Ok es funktioniert jetzt, allerdings sind die DIV`s #navigation und #content nur so hoch/groß wie der Inhalt und erstrecken sich nicht über die freie fläche zwischen header und footer.

    Sorry, aber die Zitierfunktion will gerade nicht
     

  2. #17
    Avatar von spicelab
    spicelab spicelab ist offline ZENmechanic
    Registriert seit
    Feb 2010
    Beiträge
    1.744
    http://www.cssplay.co.uk/layouts/body4.html

    Wenn es das nicht ist, was dir vorschwebt, wovon ich bislang ausgegangen bin, weil die Layouthöhe variabel, mit zunehmenden Inhalt wachsen, und nicht der überlange Inhalt darin gescrollt werden soll, mußt du dich mit dem Fake anfreunden.
    Geändert von spicelab (10.11.10 um 20:23 Uhr)
    owned139 bedankt sich. 

  3. #18
    owned139 owned139 ist offline Mitglied Bronze
    Registriert seit
    Jun 2009
    Beiträge
    26
    Hab es dann jetzt so gelöst:
    HTML-Code:
    <!-- Put IE into quirks mode -->
    <!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>Unbenanntes Dokument</title>
            <link rel="stylesheet" type="text/css" href="ff.css" />
            <!--[if IE]>
    	        <link rel="stylesheet" type="text/css" href="ie.css" />
            <![endif]-->
        </head>
        <body>
    		<div id="header"></div>
            <div id="navigation">sadasad</div>
            <div id="content">#</div>
            <div id="footer"></div>
        </body>
    </html>
    CSS:
    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
    
    head,body{
        margin:0;
        padding:0;
        width:100%;
        height:100%;
    }
    #header{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100px;
        background:#4e4e4e url(img/black_border.gif) bottom repeat-x;
    }
    #navigation{
        position:absolute;
        left:0;
        top:100px;
        bottom:40px;
        width:260px;
        background:url(naviBg.jpg) repeat-y;
    }
    #footer{
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        height:40px;
        background:#4e4e4e url(img/black_border.gif) repeat-x;
        margin:0;
    }
    #content{
        position:absolute;
        left:240px;
        top:100px;
        bottom:40px;
        right:0;
        background:#393939;
        overflow:auto;
    }
    IE:
    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
    
    html,body {
    height:100%; 
    max-height:100%; 
    padding:0;
    margin:0; 
    border:0; 
    overflow:auto;
    }
    #navigation{
        position:absolute;
        width:240px;
        height:100%;
        border-top:100px solid #fff;
        border-bottom:40px solid #fff;
        top:0;
        bottom:0;
        z-index:-1;
    }
    #content{
        top:0;
        left:0;
        right:0;
        bottom:0;
        height:100%;
        max-height:100%;
        width:100%;
        overflow:auto;
        position:absolute;
        z-index:-2;
        border-top:100px solid #fff;
        border-bottom:50px solid #fff;
        border-left:240px solid #fff;
    }
    #footer{
        position:absolute;
        margin:0;
        bottom:0;
        left:0;
        width:100%;
        height:50px;
        background:#4e4e4e url(img/black_border.gif) repeat-x;
    }
    Danke für deine Hilfe.
     

Ähnliche Themen

  1. Auf Größenänderung des Bildschirms reagieren
    Von PositivDenker im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 0
    Letzter Beitrag: 22.06.10, 09:18
  2. Antworten: 2
    Letzter Beitrag: 01.12.08, 12:56
  3. Popup in der Mitte des Bildschirms?
    Von housewaerts im Forum Javascript & Ajax
    Antworten: 4
    Letzter Beitrag: 08.10.05, 20:17

Stichworte