[CSS] height 100% minus 30px - Softwareontwikkeling

donderdag 14 augustus 2008 15:45

Acties:

Topicstarter

Zie de volgende tekening:

#boven [100% min 30px]	s c r o l l
#beneden [30px]

Hoe krijg ik dit voor elkaar in CSS met divs? Beneden moet altijd beneden blijven, en boven mag niet onder of boven beneden komen. Position: fixed gaat er overheen, en mijn oplossingenboekje is uit.

Iemand suggesties?

[ Voor 8% gewijzigd door WeeJeWel op 14-08-2008 16:37 ]

Homey — Critics are those without skills to create.

donderdag 14 augustus 2008 15:56

Acties:

moozzuzz

100% height met negatieve margin. Gewoon es zoeken op 100% height in dit forum en je vindt massa's antwoorden :^p

donderdag 14 augustus 2008 16:07

Acties:

WeeJeWel

Topicstarter

Maar ik wil niet dat de bovenste 30px eraf vallen, en als ik die weer pad heeft het helemaal geen zin

Overigens moet aan de rechterkant van het rode vak een scrollbar komen, tot het groene vlak, en dat wil me dus niet lukken. Het groene vlak moet daar dus altijd blijven staan, hoe lang de tekst ook is.

[ Voor 15% gewijzigd door WeeJeWel op 14-08-2008 16:09 ]

Homey — Critics are those without skills to create.

donderdag 14 augustus 2008 16:38

Acties:

Verwijderd

Iets met position:fixed zou misschien soelaas kunnen bieden?

donderdag 14 augustus 2008 16:39

Acties:

DEiE

Je kan proberen de body een padding-bottom te geven van 30px, en daaronder een absolute gepositioneerde div zetten. In het rode vak dan ook een div zetten, waar je tekst en scrollbalken dan inkomen. Veel succes!

donderdag 14 augustus 2008 16:39

Acties:

WeeJeWel

Topicstarter

Dat dacht ik ook, maar het probleem is dat de content er dan onder komt, en dat wil ik juist niet

Homey — Critics are those without skills to create.

donderdag 14 augustus 2008 16:40

Acties:

WeeJeWel

Topicstarter

DEiE schreef op donderdag 14 augustus 2008 @ 16:39:
Je kan proberen de body een padding-bottom te geven van 30px, en daaronder een absolute gepositioneerde div zetten. In het rode vak dan ook een div zetten, waar je tekst en scrollbalken dan inkomen. Veel succes!

Dit ga ik even proberen, thanks!

EDIT: Helaas werkt het niet, de tekst komt er alsnog onder

[ Voor 8% gewijzigd door WeeJeWel op 14-08-2008 16:43 ]

Homey — Critics are those without skills to create.

donderdag 14 augustus 2008 16:48

Acties:

WeeJeWel

Topicstarter

Opgelost!

Minder netjes weliswaar, maar het werkt

Cascading Stylesheet:

1
2
3

body { margin:0; padding-bottom: 30px; } 
#content { height: 100%; background: #0099FF; } 
#footer { position: fixed; width: 100%; height: 30px; bottom: 0; background:#00CCFF; }

Homey — Critics are those without skills to create.

donderdag 14 augustus 2008 16:55

Acties:

davhor

www.fon.com

Ik had de volgende code voor je (lijkt op jou code). Werkt in IE en in Firefox volgens mij.

code:

<style type="text/css">
        html, body
        {
            margin:0px;
            padding:0px;
            min-height:100%
        }
        
        #content
        {
            position:absolute;
            background-color:#eee;
            min-height:100%;
            height:100%;
            width:100%;
            overflow:auto;
        }
        
        #bottom
        {
            position:absolute;
            bottom:0px;
            height:30px;
            background-color:#000;
            width:100%;
        }
    </style>

FON - WiFi for Everyone | Flickr

donderdag 14 augustus 2008 16:57

Acties:

Verwijderd

Zoiets als dit misschien.

position: fixed; zou ik niet gebruiken, wordt niet ondersteund door IE5/6

HTML:

<html>

<style>

#container
{
  height: 100%;
  position: relative;
}
#boven
{
  background: red;
  height: 100%;
  margin-bottom: 30px;
  overflow: auto;
}
#beneden
{
  background: green;
  height: 30px;
  position: absolute;
  bottom: 0;
  width: 100%;
}
</style>
<body>
  <div id="container">
    <div id="boven">100% min 30px</div>
    <div id="beneden">30px</div>
  </div>
</body>

</html>

donderdag 14 augustus 2008 16:58

Acties:

orange.x

Moet #boven dan niet gewoon een iframe worden?

donderdag 14 augustus 2008 17:10

Acties:

Verwijderd

iframe is enkel om een ander bestand te tonen binnen je pagina.
Dat zou hier de boel onnodig ingewikkeld maken denk ik...

donderdag 14 augustus 2008 17:19

Acties:

Blaise

Ik gebruik de techniek die hier staat beschreven: http://www.themaninblue.com/experiment/footerStickAlt/

Die is heel solide in alle moderne browsers (incl. IE6).

donderdag 14 augustus 2008 17:21

Acties:

WeeJeWel

Topicstarter

Bedankt voor beide suggesties. Alleen valt de laatste 30px tekst er nog af, en dat mag dus niet gebeuren.

Het werkt nu overigens, dus hulp is niet meer echt nodig. Discussies daarentegen zijn altijd wel interessant.

@orange.x, wel het idee van een iframe, maar mijn applicatie maakt gebruik van veel AJAX en de content moet daar dan weer dynamisch ingezet worden. Daar ga ik maar niet aan beginnen

@blaise, als de content langer is dan de pagina wordt de footer naar beneden geduwd, en dat willen we niet

[ Voor 12% gewijzigd door WeeJeWel op 14-08-2008 17:22 ]

Homey — Critics are those without skills to create.

donderdag 14 augustus 2008 17:21

Acties:

Da Weef

Dit werkt volgens mij wel prima in alle browsers:

code:

<html>

<style>

body{
    margin:0;
    padding-bottom: 30px;
    overflow:hidden;}

#boven
{
  background: red;
  height: 100%;
  overflow: auto;
}
#beneden
{
  background: green;
  height: 30px;
  position: absolute;
  bottom: 0;
  width: 100%;
} 

</style>
<body>

    <div id="boven">100% min 30px <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />r /><br /><br /><br /><br /><br /><br /><br /><br /><br />r /><br /><br /><br /><br /><br /><br /><br /><br /><br />r /><br /><br /><br /><br /><br /><br /><br /><br /><br />r /><br /><br /><br /><br /><br /><br /><br /><br /><br />r /><br /><br /><br /><br /><br /><br /><br /><br /><br />r /><br /><br /><br /><br /><br /><br /><br /><br /><br /> enzo</div>

<div id="beneden">30px</div>
  </body>

</html>

donderdag 14 augustus 2008 17:23

Acties: