Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > HTML & CSS

Problemen met de combinatie van het uitvullen van een DIV over de pagina en een div met scrollbar (Opgelost)

Metalhead - 28/12/2013 23:10 (laatste wijziging 28/12/2013 23:11)

HTML gevorderde

Ik ben bezig om 1 van mijn websites aan te passen, maar ik krijg nu de globale structuur van de website niet voor elkaar.

Ik wil ongeveer zoiets;

html4strict code - Bekijk de code zonder highlighting - Klap code in

                // ________________
// | header       |
// +--------------+
// |m| content   ^|
// |e|           ||
// |n|           ||
// |u|           ||
// |_|___________v|

            
// ________________
// | header       |
// +--------------+
// |m| content   ^|
// |e|           ||
// |n|           ||
// |u|           ||
// |_|___________v|
 

Maar hoe ik de positions van de divs ook instel, ik krijg de height van het menu- en content-div niet goed.
Ze zijn altijd te klein (afhankelijk van de inhoud van zichzelf) of te groot (afhankelijk van het hele scherm, en dus 75 pixels buiten beeld) waardoor de pagina twee scrollbars krijgt...

Ik heb voor mezelf een hele simpele testpagina geschreven om de structuur te kunnen uitwerken, maar dit lukt me nog niet.

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            body {
                background-color: rgb(250, 250, 250);
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #container {
                width: 100%;
                height: 100%;
                background-color: rgb(250, 250, 200);
            }
            #header {
                width: 100%;
                height: 75px;
                background-color: rgb(200, 250, 200);
            }
            #menu {
                float: left;
                width: 180px;
                height: 100%;
                min-height: 100%;
                background-color: rgb(200, 200, 200);
            }
            #content {
                overflow-y: scroll;
                height: 100%;
                min-height: 100%;
                background-color: rgb(200, 150, 200);
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">Header</div>
            <div id="menu">Menu</div>
            <div id="content">
                <?php for ($i=0;$i<99;$i++) { echo "Regel".$i."<br>"; } ?>
            </div>
        </div>
    </body>
</html>

<html>
    <head>
        <title>Test</title>
        <style type="text/css">
            body {
                background-color: rgb(250, 250, 250);
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #container {
                width: 100%;
                height: 100%;
                background-color: rgb(250, 250, 200);
            }
            #header {
                width: 100%;
                height: 75px;
                background-color: rgb(200, 250, 200);
            }
            #menu {
                float: left;
                width: 180px;
                height: 100%;
                min-height: 100%;
                background-color: rgb(200, 200, 200);
            }
            #content {
                overflow-y: scroll;
                height: 100%;
                min-height: 100%;
                background-color: rgb(200, 150, 200);
            }
        </style>
    </head>
    <body>
        <div id="container">
            <div id="header">Header</div>
            <div id="menu">Menu</div>
            <div id="content">
                <?php for ($i=0;$i<99;$i++) { echo "Regel".$i."<br>"; } ?>
            </div>
        </div>
    </body>
</html>

5 antwoorden

Gesponsorde links

UpLink - 28/12/2013 23:56
...		Ik kom er eerlijk gezegd ook niet uit. Wat ik ook probeer met positionings, hij blijft die 2de scrollbalk geven. Ik kan natuurlijk wel en de hoogtes aanpassen zodat die balk verdwijnt, maar dat is niet echt de bedoeling denk ik. Er is iets met die header in ieder geval, want als ik die weg doe is die scrollbalk ook weg. Hoe heb je dit voor elkaar gespeeld?

Thomas - 29/12/2013 00:00 (laatste wijziging 29/12/2013 00:01)

Moderator

Dit is een bekend probleem, ik had het ook (heel lang geleden). En ik had nog de moeilijkheid dat ik ook een footer wilde onderaan de pagina.

Anyway, de oplossing die mij te binnen schoot stond volgens mij bekend als "faux columns". Wat je in feite doet is het gebruik maken van een achtergrondplaatje die je doortrekt.

Maak een <breedte menu> x 1 pixel plaatje met je achtergrondkleur (metalhead.gif) voor je menu en gebruik de volgende HTML (ben ook zo vrij geweest om wat cleanup te doen):

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
<head>
<title>Test</title>
<style type="text/css">
body {
    background: rgb(200, 150, 200) url(metalhead.gif) repeat-y;
    margin: 0;
}

#container {
}

#header {
    width: 100%;
    height: 75px;
    background-color: rgb(200, 250, 200);
}

#menu {
    display: block;
    float: left;
    width: 180px;
}

#content {
    display: block;
    float: left;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">Header</div>
    <div>
        <div id="menu"><?php for ($i=0;$i<2;$i++) { echo "Menu<br />"; } ?></div>
        <div id="content"><?php for ($i=0;$i<2;$i++) { echo "Content<br />"; } ?></div>
    </div>
</div>
</body>
</html>

<html>
<head>
<title>Test</title>
<style type="text/css">
body {
    background: rgb(200, 150, 200) url(metalhead.gif) repeat-y;
    margin: 0;
}
 
#container {
}
 
#header {
    width: 100%;
    height: 75px;
    background-color: rgb(200, 250, 200);
}
 
#menu {
    display: block;
    float: left;
    width: 180px;
}
 
#content {
    display: block;
    float: left;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">Header</div>
    <div>
        <div id="menu"><?php for ($i=0;$i<2;$i++) { echo "Menu<br />"; } ?></div>
        <div id="content"><?php for ($i=0;$i<2;$i++) { echo "Content<br />"; } ?></div>
    </div>
</div>
</body>
</html>

NB: Die divs bestrijken dus niet de hele pagina (worden niet uitgevuld), maar de achtergrondkleuren wel. Weet niet of dat een probleem is?

Algemeen: hoogtes zuigen, vooral in dynamische pagina's, dus bij voorkeur niet gebruiken. Tenzij je precies weet wat de hoogtes moeten zijn ofzo

.

EDIT: Getest in IE, FF, Chrome. Ziet er allemaal OK uit ook als je de waarden in de loopjes aanpast.

Bedankt door: Metalhead, UpLink

UpLink - 29/12/2013 00:03
...		Ik wist niet dat dit een bekend probleem was. Dan weten we dat ook weeral natuurlijk he... Thx voor de info FangorN

Metalhead - 29/12/2013 00:09

HTML gevorderde

De originele pagina heeft geen kleuren, alles is met images (patronen)...

Maar ik heb toevallig het probleem ook net zelf opgelost (denk ik)...

Door de header absolute te maken, en de body een margin-top mee te geven ter grootte van de header, lukt het wel.

html4strict code - Bekijk de code zonder highlighting - Klap code in

<html>
<head>
<title>Test</title>
<style type="text/css">
body {
    background-color: rgb(250, 250, 250);
    margin: 0;
    margin-top: 75px;
}

#container {
    width: 100%;
    height: 100%;
    background-color: rgb(250, 250, 200);
}

#header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 75px;
    background-color: rgb(200, 250, 200);
}

#menu {
    float: left;
    width: 180px;
    height: 100%;
    min-height: 100%;
    background-color: rgb(200, 200, 200);
}

#content {
    overflow-y: scroll;
    height: 100%;
    min-height: 100%;
    background-color: rgb(200, 150, 200);
}
</style>
</head>
<body>
    <div id="header">Header</div>
    <div id="container">
        <div id="menu">Menu</div>
        <div id="content">
        <?php for ($i=0;$i<99;$i++) { echo "Regel".$i."<br>"; } ?>
        </div>
    </div>
</body>
</html>

<html>
<head>
<title>Test</title>
<style type="text/css">
body {
    background-color: rgb(250, 250, 250);
    margin: 0;
    margin-top: 75px;
}
 
#container {
    width: 100%;
    height: 100%;
    background-color: rgb(250, 250, 200);
}
 
#header {
    position: absolute;
    top: 0;
    width: 100%;
    height: 75px;
    background-color: rgb(200, 250, 200);
}
 
#menu {
    float: left;
    width: 180px;
    height: 100%;
    min-height: 100%;
    background-color: rgb(200, 200, 200);
}
 
#content {
    overflow-y: scroll;
    height: 100%;
    min-height: 100%;
    background-color: rgb(200, 150, 200);
}
</style>
</head>
<body>
    <div id="header">Header</div>
    <div id="container">
        <div id="menu">Menu</div>
        <div id="content">
        <?php for ($i=0;$i<99;$i++) { echo "Regel".$i."<br>"; } ?>
        </div>
    </div>
</body>
</html>

Ik kan me herinneren dat Internet Explorer anders omgaat met heights en dergelijke, maar aangezien ik geen Windows heb kan ik dat niet zelf testen.

Dat zou dus nog een probleem kunnen zijn.

Maar bedankt voor het meedenken!!

UpLink - 29/12/2013 00:47
...		Je code net getest in IE11 en daar doet hij het ook zoals in Chrome en Firefox. Probleem opgelost dus...
Bedankt door: Metalhead

Gesponsorde links

Je moet ingelogd zijn om een reactie te kunnen posten.

Actiefste leden van de maand

Actieve forumberichten