[css] div rekt niet mee in IE wel in FF* - Softwareontwikkeling

vrijdag 7 maart 2008 14:23

Acties:

Verwijderd

Topicstarter

Is er een makkelijke manier om dit in IE te laten werken zonder rare oplossingen ala hele grote borders te gebruiken? Wat doe ik hier verkeerd? Ik denk dat het iets is met het niet opgeven van een fixed height voor de DIV, maar het punt is, de DIV rekt mee in hoogte met het browser venster, ik wil dus geen fixed height. (uiteindelijk komen er DIV's boven die wel een fixed height hebben, dus hij moet precies een x-aantal pixels hoog beginnen)..

code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test</title>
<style>
html, body {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
overflow: hidden;
}

#content {
position: absolute;
margin: 0;
padding: 0 0 0 0;
width: 400px;
top: 40px;
bottom: 40px;
overflow: auto;
background-color: orange;
}

</style>
</head>
<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec mollis, est at rhoncus laoreet, dui turpis faucibus risus, pulvinar feugiat mauris augue vel lorem. Sed vestibulum. Proin facilisis luctus mauris. Vivamus viverra feugiat neque. Fusce leo odio, malesuada id, malesuada adipiscing, dignissim quis, quam. Proin nisi purus, molestie in, fringilla a, rhoncus in, metus. Cras euismod enim quis orci. Nullam gravida eleifend erat. Nunc feugiat enim eget velit. In hac habitasse platea dictumst. Suspendisse potenti. Sed nunc est, ullamcorper at, placerat sit amet, tincidunt a, mauris. Nam augue. Aliquam condimentum. Donec magna. Sed id risus. Phasellus libero. Morbi enim erat, ullamcorper eu, ultricies eu, vehicula nec, nisi. Fusce at est at risus imperdiet eleifend. Aliquam rhoncus nisl sed dolor. Phasellus adipiscing pharetra nulla. Mauris a tellus quis ante tincidunt auctor. Cras elementum. Curabitur massa nunc, posuere eget, tempus id, pharetra vel, nunc. Quisque rhoncus erat et magna. Curabitur et mi. Maecenas accumsan mauris nec lectus. Praesent vel diam. Aliquam erat volutpat. Praesent non justo non tellus consectetuer sollicitudin. Quisque et quam nec nibh pharetra mattis. Nam sollicitudin nulla sit amet arcu. Vivamus mauris. Nulla risus. Aliquam erat volutpat. Cras metus tortor, interdum eu, scelerisque non, molestie ut, augue. Nullam ullamcorper mi id purus. Praesent risus nulla, ultricies ut, sollicitudin sit amet, mattis non, urna. Etiam eu enim non diam fermentum molestie. Donec scelerisque, lacus sed feugiat placerat, velit augue auctor velit, vitae posuere mauris ipsum sit amet mi. Quisque nec magna at turpis ultrices condimentum. Phasellus ipsum massa, porta vel, vestibulum non, ultricies et, ligula. Vestibulum quis sapien. Suspendisse potenti. Integer dui. Donec adipiscing elit sed mi. Aenean varius. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc elementum sem eget ante. Vivamus odio. Maecenas turpis. Nullam cursus consequat mi. Etiam auctor eros vitae dui. Sed cursus. Integer suscipit auctor est. Vivamus iaculis ultrices leo. Duis suscipit felis ac quam. In hac habitasse platea dictumst. Sed id lacus nec nisl condimentum luctus. Vivamus blandit, turpis sit amet fermentum ultricies, ante ligula consequat ante, a tincidunt diam magna vitae nibh. Pellentesque ornare orci eu sem. Nulla facilisi. In metus. Phasellus nunc nibh, suscipit non, vehicula quis, tristique nec, dui. Ut vel tellus mattis risus convallis tempor. Nulla vehicula sem nec metus. Aliquam erat volutpat. Fusce quis nisi et eros hendrerit venenatis. Proin est lorem, tincidunt id, tristique non, dapibus in, elit. In rhoncus vestibulum lacus. Quisque dictum, urna a tempus venenatis, nibh purus molestie odio, eu blandit lectus diam vel sapien. Nullam quam lorem, dapibus non, ultrices eget, posuere vitae, augue. Aliquam malesuada felis nec ligula. Morbi ullamcorper, quam in sagittis iaculis, libero nunc tempor tellus, ultricies sodales nisl metus sed felis. Fusce velit magna, rutrum in, luctus eu, interdum ut, velit. Nulla vel nisi sit amet ligula malesuada dapibus. Quisque pulvinar. Mauris vehicula ornare orci. In hac habitasse platea dictumst.
</div>
</body>

vrijdag 7 maart 2008 17:05

Acties:

Verwijderd

Ik snap niet precies wat je bedoeld. Misschien zou je de vraagstelling anders kunnen formulieren. Als je wil dat de div meerekt naar gelang de grootte van de tekst zou je zoiets kunnen doen:

code:

<style>
html, body {
    height:100%; 
    max-height:100%; 
    padding:0;
    margin:0; 
    border:0; 
    background:#fff; 
}

#content {
    position: absolute;
    margin: 0;
    padding: 0 0 0 0;
    width: 400px;
    top: 40px;
    bottom: 40px;
    background-color: orange;
    height: 100%;
    min-height: 100%;
    height: auto !important;
}
    
</style>

Waarom overigens position:absolute? Ik zou dat proberen zoveel mogelijk te vermijden

[ Voor 7% gewijzigd door Verwijderd op 07-03-2008 17:07 ]

zaterdag 8 maart 2008 00:25

Acties:

Verwijderd

Topicstarter

Wat ik wil bereiken, is dat zodra de div de bodem van de browser raakt, de div een scroll-bar krijgt., en niet de hoofdscrollbar aan de zijkant van de browser zeg maar. Er moeten namelijk een 2 tal divs in de applicatie zitten waar je in kan scrollen onafhankelijk van elkaar (een lange lijst in 1 div, en een erg lang formulier in de andere div.. ). Het probleem is dat de web applicatie interface is ontworpen om mee te rekken met de resolutie, dus de div's waarin de lange, scrolling content komt, geen fixed height kan hebben, omdat ze dan ofwel op lage resolutie schermen buiten het beeld vallen, of er bij hoge resolutie users een hoop onbenutte ruimte overblijft.

Ik heb in principe wel iets werkends, maar het probleem met internet explorer is dat hij erg moeilijk doet met scrollbars in dingen die de hoogte aannemen van de browser (autoflow doet ie alleen op fixed height, tenzij je gaat klooien met enorme borders).... Om het nog ingewikkelder te maken wilt de ontwerper dat onder de 2 divs die standaard de hoogte van de browser aannemen en scrollbaar zijn, er een sleepbare balk onder komt, waarbij je een div met ook een lange inhoud naar boven kan rekken (en waardoor die divs met de lange lijst en formulier dus weer naar boven geduwd worden/verkleind worden in hoogte... een beetje lastig uit te leggen

zaterdag 8 maart 2008 10:06

Acties:

Sebazzz

3dp

Waarom overigens position:absolute? Ik zou dat proberen zoveel mogelijk te vermijden

Argumenteer dat dan, anders blaat je maar wat, blatend schaap

Met absolute positie is niet mis, zolang je je layout maar liquid houdt, en dat is prima mogelijk met een absolute posititie.

[Te koop: 3D printers] [Website] Agile tools: [Return: retrospectives] [Pokertime: planning poker]

zondag 9 maart 2008 18:19

Acties:

Verwijderd

Sebazzz schreef op zaterdag 08 maart 2008 @ 10:06:
[...]
Argumenteer dat dan, anders blaat je maar wat, blatend schaap
Met absolute positie is niet mis, zolang je je layout maar liquid houdt, en dat is prima mogelijk met een absolute posititie.

offtopic:
Omdat je met position:absolute het element uit de 'normale' flow weghaalt zodat er af en toe onverwachte dingen gebeuren waar je niet op gerekent hebt. Bijvoorbeeld een element dat een ander element overlapt. Daarom probeer ik persoonlijk het zoveel mogelijk te vermijden.