• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

height: Welcher Wert für unteres Seitenende?!!

Status
Für weitere Antworten geschlossen.
O

OldSchool

Neues Mitglied
Hi @ all!

Ich hab ein Problem bez. der relativen Längenangaben in CSS.

Ich habe meine Seite mit div und float gestaltet und möchte ein div so groß machen, dass es bis zum Seitenende des Browsers geht.

Beim Googlen bin ich auf die %-Angabe gestoßen. Also z.B. height: 100%.
Jedoch hat das bei mir überhaupt keine Auswirkung. Wenn ich einen Rahmen um mein div machen, bleibt der Rahmen immer gleich groß. Nur mit einer absoluten Angabe, wie px, geht es bis zum Seitenende. Hier habe ich jedoch das Problem, dass die Größe des div's bei einer Änderung der Auflösung nicht mehr stimmt.

Hat jemand einen Rat, wie man das am besten angeht? :roll:
 
Gib mal den genauen Code. Sollte eigentlich problemlos funktionieren.
Hast dus ungefähr so?

HTML: 
<div style="height: 100%; width: 50%; border: 1px solid;">
</div>

MfG Icy
 
Icy schrieb:
Gib mal den genauen Code. Sollte eigentlich problemlos funktionieren.
Hast dus ungefähr so?

HTML: 
<div style="height: 100%; width: 50%; border: 1px solid;">
</div>
MfG Icy
Zum Vergrößern anklicken....

Das geht nur, wenn position: absolute; und display: block; mit angegeben wird.
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
   <title>Irgendwas</title>
   <style type="text/css">
     .rand {
      position: absolute;
      display: block;
      height: 100%;
      width: 50%;
      border: solid 1px #0000FF;
     }
   </style>
  </head>

  <body>
    <div class="rand">
     Dies ist ein Text
    </div>
  </body>
</html>

Edit: Der IE (zumindest bis IE6) hat damit allerdings schwierigkeiten. Mit dem FF gehts.
 
Also ich wollte ein 3-Spalten-Layout mit CSS machen.
  • Oben den header
  • links unter dem header das Menü
  • und rechts vom Menü den Content-Bereich
Anbei ein gekürzter Code: die css-Anweisungen sind in format.css, die ich im index.php eingebunden habe


Code: 
/*************** format.css *******************/

div#header
{
        height: 10%;
}

div#menu {
        float: left;
        width: 20%;
        height: 90%;
        
        margin-top: 50px;
        margin-left: 20px;
}

div#content {
        float: left;
        height: 90%;

        margin-top: 20px;
        margin-left: 10px;

        border-top: 12px solid blue;
        border-left: 12px solid blue;
}




/*************** index.php *******************/

<html>
<head>
        <link rel="stylesheet" type="text/css" href="format.css" />
</head>


<body>
        <div id="header">
<?              include "header.php";   ?>
        </div>

        <div id="menu">
<?              include "menu.php";     ?>
        </div>

        <div id="content">
<?              include "contentdispatch.php";  ?>
        </div>

        <br style="clear:both;" />

</body>

</html>
Stimmen die Prozentangaben überhaupt? 10% + 90% = 100% ja, aber ändert sich das nicht mit den margins drin? Nicht oder? Die sind ja laut Box-Modell Teil des div's, dass alles zusammen 90% sein soll.


@nichtsgeht:
Hab deine Variante versucht, jedoch ignoriert der Browser bei position: absolute sämtliche float-Anweisungen und das Layout ist hinüber. Den Border im content-Bereich macht er, jedoch über das untere Ende hinaus.
 
Ja, so geht es natürlich nicht. Auch deine Angaben sind ja mehr als 100% höhe. Du hast 10% im header + 90 % im content + margin-top 50px + border 12px. Du bist also 62 Pixel über den Bildschirmrand.
 
nichtsgeht schrieb:
Ja, so geht es natürlich nicht. Auch deine Angaben sind ja mehr als 100% höhe. Du hast 10% im header + 90 % im content + margin-top 50px + border 12px. Du bist also 62 Pixel über den Bildschirmrand.
Zum Vergrößern anklicken....

Ok gut zu wissen. Rechnest du für gewöhnlich dann die Pixel in Prozent um und ziehst sie von den 90% ab?

Wenn ich jedoch anstelle der 90% zB 70% nehme, ändert sich an der Größe auch nichts. Das div bleibt so groß, wie der Inhalt. Nur bei einem fixen px-Wert wird das div größer.
 
Pixel kann man nicht in Prozent umrechnen. Das ändert sich ja je nach Bildschirm- bzw. Browserauflösung.

Code: 
div#header
{
        height: 10%;
        width: 100%;
        display: block;
}

div#menu {
        float: left;
        width: 20%;
        height: 90%;
        display: block;
        margin-top: 0px;
        margin-left: 20px;
}

div#content {
        float: left;
        height: 90%;
        display: block;
        overflow: auto;
        margin-top: 0px;
        margin-left: 10px;
        width: 70%;
        border-top: 12px solid blue;
        border-left: 12px solid blue;
}

Edit: evtl. solltest du den border-top auch noch auf 0 setzen. Das könnte den Browser auch veranlassen, über den Bildschirmrand drüberwegzugehen. Musst du mal ausprobieren.
 
Zuletzt bearbeitet:
nichtsgeht schrieb:
Pixel kann man nicht in Prozent umrechnen. Das ändert sich ja je nach Bildschirm- bzw. Browserauflösung.

Code: 
div#header
{
        height: 10%;
        width: 100%;
        display: block;
}

div#menu {
        float: left;
        width: 20%;
        height: 90%;
        display: block;
        margin-top: 0px;
        margin-left: 20px;
}

div#content {
        float: left;
        height: 90%;
        display: block;
        overflow: auto;
        margin-top: 0px;
        margin-left: 10px;
        width: 70%;
        border-top: 12px solid blue;
        border-left: 12px solid blue;
}
Edit: evtl. solltest du den border-top auch noch auf 0 setzen. Das könnte den Browser auch veranlassen, über den Bildschirmrand drüberwegzugehen. Musst du mal ausprobieren.
Zum Vergrößern anklicken....


Hab's probiert! Sogar alle anderen CSS und HTML-Anweisungen rausgetan und nur die notwendigen für das Layout behalten.

Jedoch leider keine Änderung. Das div wird maximal so groß wie der Inhalt.
 
Man muss auch html und body auf 100% setzen. Das erste div im body ebenfalls mit html versehen - das reicht dann von oben bis unten auf der seite und wird erweitert wenn mehr Inhalte drinne ist.
 
threadi schrieb:
Man muss auch html und body auf 100% setzen. Das erste div im body ebenfalls mit html versehen - das reicht dann von oben bis unten auf der seite und wird erweitert wenn mehr Inhalte drinne ist.
Zum Vergrößern anklicken....

Bei mir hat es Funktioniert ? Habe ich mal hochgeladen:
http://home.arcor.de/gancosch/tools/format.html
und hier die CSS dazu:
http://home.arcor.de/gancosch/tools/format.css

Habe eigendlich nur noch ein Background-color dazu gesetzt, um es etwas anschaulicher zu machen.
 
@threadi:
Danke, jetzt funktionierts bei mir!

@nichtsgeht:
Interessant, mein Browser zeigts richtig an, wenn ich deinen link aufrufe.
Hab deinen code 1:1 in meinen übernommen. Immer noch das gleiche. Muss ich noch mal drüberschauen.

Ok, danke mal für die Hilfe.
 
@threadi:
Danke jetzt funktioniert's bei mir.

@nichtsgeht:
Interessant, mein Browser zeigts richtig an, wenn ich auf deinen Link gehe.
Hab deinen Code 1:1 in meinen übernommen, jedoch immer noch dasselbe. Muss ich noch mal drüberschauen.

Ok, danke mal für eure Hilfe
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben