Container mit festen Margin oben und unten

moritzmoritzz

moritzmoritzz

Mitglied
Guten Abend,

seit gestern versuche ich vergeblich ein "container"-Div 100% groß zu machen (von html, body 100% ausgehend). Oben und unten soll jeweils ein 30px hoher Rand bleiben (transparent) sodass die Seite nicht direkt unten endet, sondern eben immer diese 30px Abstand hat. (Das gleiche auch oben)

habe folgenden Code für den Container:
Code: 
display: block;
    position:absolute;
    height: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0px;
    margin-top:30px;
    margin-bottom:30px;
    margin-right:0px;
    margin-left:0px;

Wenn jetzt der Content höher wird als der Container, dann schiebt er diesen, aber der Abstand nach unten wird aufgehoben und es klebt unten am Rand.

Hat jemand von euch eine Idee, wie ich das Problem lösen kann?


Moritz
 
Zuletzt bearbeitet:
Hallo,

wenn du in einem absolut positioniertem Blockelement alle 4 Eckpositionen angibst, dann brauchst du (ausgenommen IE6) keine Breiten- und Höhenangabe. Außerdem kannst du mit der "overflow"-Eigenschaft "auto" oder "hidden" das Standardverhalten unterbinden, dass die Blockhöhe durch den Blockinhalt vergrößert wird.

Beispielsweise so:
HTML: 
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Test</title>

    <style type="text/css">
      html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #fff;
        color: #000;
      }
      p {
        position: absolute;
        top: 30px;
        right: 0;
        bottom: 30px;
        left: 0;
        overflow: auto;
        background-color: #cfc;
      } 
    </style>

  </head>
  <body>
    <p>
      Lorem ipsum dolor sit amet, usw. usf.
    </p>
  </body>
</html>
 
Danke für deine Antwort! :)

Das kommt dem schon ziemlich nahe, aber wie schaffe ich es jetzt, dass ein Div der diesen Abstand hat mit dem Content wächst? Es soll nicht scrollbar sein, sondern mitwachsen.

Verstehst du was ich meine? Also es soll eben eine "dynamisch lange seite mit Abstand nach oben und unten" werden.

Gruß,

Moritz
 
moritzmoritzz hat gesagt.:
Verstehst du was ich meine? Also es soll eben eine "dynamisch lange seite mit Abstand nach oben und unten" werden.
Zum Vergrößern anklicken....
Nein, nicht wirklich. Wenn der Block 100% Breite und Höhe vom Viewport haben soll, dann muss er bei übergroßem Inhalt scrollbar sein oder der Inhalt wird abgeschnitten. Anderenfalls wären es keine 100%.
 
Ich vermute mal, dass er einfach nur margin:30px 0; sucht. Allerdings ist bei wenig Inhalt die Seite kleiner und reicht dann nicht bis nach "fast" unten. Andere Lösungen kann man vielleicht mit JS realisieren.
 
djheke hat gesagt.:
Ich vermute mal, dass er einfach nur margin:30px 0; sucht. Allerdings ist bei wenig Inhalt die Seite kleiner und reicht dann nicht bis nach "fast" unten. Andere Lösungen kann man vielleicht mit JS realisieren.
Zum Vergrößern anklicken....

Genau :) gibt's da keine CSS-Lösung ? Finde bei Desingssachen JS-Lösungen "unschön" aber wenn es keine andere Lösung gibt muss ich es so machen.

Moritz
 
Was "Genau". Zeig einfach mal was du schon hast. Am Besten e wär ein Link zur Seite. So kommen wir nicht weiter.
 
So :)
Habe das mal hier hochgeladen:
https://work.moritzmoritz.de/css/test.php

Habe den Vorschlag von hela übernommen und umgesetzt, wie zu sehen ist, ist der Content länger als das Fenster hoch ist.

Nun möchte ich, dass der rote "container" mit dem Content wächst, mindestens 100% hoch ist und oben und unten 30px Abstand hat.

Moritz
 
Hi..

ich würde dazu das ganze mit 3 divs darstellen.

1. div, header, 30px höhe
2. div, content min-height xxx pix
3. div, footer, 30pix höhe

grüsse

xloouch
 
xloouch hat gesagt.:
Hi..

ich würde dazu das ganze mit 3 divs darstellen.

1. div, header, 30px höhe
2. div, content min-height xxx pix
3. div, footer, 30pix höhe

...
Zum Vergrößern anklicken....
Das Problem ist der Wert "xxx px" des content-DIV. Der header- und footer-DIV-Block können als Platzhalter dienen, allerdings müsste dann die Mindesthöhe des content-Blockes (100% - 60px) betragen.
Das könnte man zwar mit der calc-Funktion (wie im benachbarten Beitrag versucht) lösen, aber dann müsste man für ein paar Browser (z.B. IE7 und 8) doch auf Javascript zurückgreifen.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück