Hej
Jag vill ha scrollar på en div. Tyvärr måste jag (?) ha position:absolute eftersom den ska sitta fast längst ner i en annan div (mvh bottom:0). Kan man inte scrolla en sådan div med hjälp av overflow:auto?
overflow och position:absolute
16 svar · 1 208 visningar · startad av Type
Nu har jag lyckats lösa det i FF. Använder max-height och sätter den till ett visst värde. Då funkar det prima i Firefox. Finns det någon motsvarighet för IE?
Jag kollade http://www.doxdesk.com/software/js/minmax.html men lyckades inte få till det med den.
Lite exempelkod som beskriver problemet:
<html>
<head>
<title>TEST</title>
</head>
<body>
<div style="height:700px;border:1px #000 solid;position:relative;">
<div style="max-height:150px;width:500px;overflow:auto;position:absolute;bottom:0px;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent mollis imperdiet massa.Donec faucibus nibh quis urna. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia placerat. Suspendisse sed eros. luctus. Mauris in turpis. Aenean vehicula massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent mollis imperdiet massa.Donec faucibus nibh quis urna. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia placerat. Suspendisse sed eros. luctus. Mauris in turpis. Aenean vehicula massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent mollis imperdiet massa. Donec faucibus nibh quis urna. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia placerat. Suspendisse sed eros. luctus. Mauris in turpis. Aenean vehicula massa.
Maecenas tempus, urna hendrerit tristique eleifend, est urna auctor metus, feugiat rhoncus enim lectus at augue. Proin gravida feugiat orci. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia placerat. Suspendisse sed eros. luctus. Mauris in turpis.
Aenean vehicula massa. Maecenas tempus, urna hendrerit tristique eleifend, est urna auctor metus, feugiat rhoncus enim lectus at augue. Proin gravida feugiat orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent mollis imperdiet massa.Donec faucibus nibh quis urna. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia placerat. Suspendisse sed eros. luctus. Mauris in turpis. Aenean vehicula massa. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Praesent mollis imperdiet massa.Donec faucibus nibh quis urna. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia placerat. Suspendisse sed eros. luctus. Mauris in turpis. Aenean vehicula massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent mollis imperdiet massa. Donec faucibus nibh quis urna. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia placerat. Suspendisse sed eros. luctus. Mauris in turpis. Aenean vehicula massa.
Maecenas tempus, urna hendrerit tristique eleifend, est urna auctor metus, feugiat rhoncus enim lectus at augue. Proin gravida feugiat orci. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia placerat. Suspendisse sed eros. luctus. Mauris in turpis.
Aenean vehicula massa. Maecenas tempus, urna hendrerit tristique eleifend, est urna auctor metus, feugiat rhoncus enim lectus at augue. Proin gravida feugiat orci.
Maecenas tempus, urna hendrerit tristique eleifend, est urna auctor metus, feugiat rhoncus enim lectus at augue. Proin gravida feugiat orci. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia placerat. Suspendisse sed eros. luctus. Mauris in turpis.
Aenean vehicula massa. Maecenas tempus, urna hendrerit tristique eleifend, est urna auctor metus, feugiat rhoncus enim lectus at augue. Proin gravida feugiat orci.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent mollis imperdiet massa.Donec faucibus nibh quis urna. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia placerat. Suspendisse sed eros. luctus. Mauris in turpis. Aenean vehicula massa. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent mollis imperdiet massa.Donec faucibus nibh quis urna. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia placerat. Suspendisse sed eros. luctus. Mauris in turpis. Aenean vehicula massa.Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent mollis imperdiet massa. Donec faucibus nibh quis urna. Nam id elit in risus porta elementum. Maecenas tincidunt, velit eu ornare fringilla, nisl lorem fermentum massa, eget convallis urna felis vel turpis. Vivamus nec dui sed ante lacinia
</div>
</div>
</body>
</html>
Jag måste lägga ner det här spammandet.
Detta kirrade biffen. (http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/)
height: expression( this.scrollHeight > 600 ? "600px" : "auto" ); /* sets max-height for IE */
IE har inte max-height eller min-height så du får använda dig av Height i IE. Antingen så kör du alltid på height:150px; eller så gör du ett IE hack för height i IE läsare.
voigtann1 skrev:
IE har inte max-height eller min-height så du får använda dig av Height i IE. Antingen så kör du alltid på height:150px; eller så gör du ett IE hack för height i IE läsare.
Problemet är att höjden inte alltid ska vara en viss storlek. Jag vill helst ha en min-height och en max-height, annars ska höjden variera med innehållet.
Men du har nog rätt i att man får köra på specialhack för IE. Hur reagerar andra webbläsare? Känns lite risky att fulkoda hela tiden :D
<!--[if lte IE 6]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->
lägg all IE specifik CSS i den filen så är det absolut inga problem med specifika IE fixar.
voigtann1 skrev:
<!--[if lte IE 6]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->lägg all IE specifik CSS i den filen så är det absolut inga problem med specifika IE fixar.
Om jag lägger den under min vanliga css kommer den skriva över de andra då? Eller måste jag köra någon if-else-variant?
Den kommer skriva över på de saker du har ändrat på.
kod:
<link rel="stylesheet" href="design.css" type="text/css" />
<!--[if lte IE 6]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->
Exemeplvis:
I din vanliga css(design.css) så har du en klass som heter .box:
.box {
color:#f00;
height:100px;
width: 100px;
}
och i din ie.css:
.box {
color: #0f0;
width: 200px;
}
I IE kommer boxen ha:
- En grön text
- En bredd på 200px
- En höjd på 100px
mmedans i de andra läsarna har du:
- En röd text
- En bredd på 100px
- En höjd på 100px
tack Voigtann1!
Det där var tokpedagogiskt.
Nu ska IE få smisk! :birp
Hur funkar det egentligen i IE7? Jag ser ingen skillnad alls när jag försöker ändra.
IE7 har lite andra "fel" än ie6... men du kan skriva:
<!--[if IE 7.0]><link rel="stylesheet" href="ie7.css" type="text/css" /><![endif]-->
<!--[if lte IE 6]><link rel="stylesheet" href="ie.css" type="text/css" /><![endif]-->
http://www.quirksmode.org/css/condcom.html beskriver hur du kan använda dig för olika versioner av IE.
Finns det någon liknande kod för Safari? Tydligen visar inte Safari punktlistor som de ska heller. Inte bara IE som krånglar... Eller ska o ska förresten, jag vet inte om FF och Opera visar rätt men jag skulle tro det ;)
vad är fel i Safari?
Safari visar inte listpunkter när man använder float:left (dvs vill ha en horisontell lista)
<html>
<head>
<style type="text/css">
li{
list-style-type:disc;
float:left;
position:relative;
padding:10px;
margin-left:15px;
margin-right:10px;
}
</style>
</head>
<body>
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</body>
</html>
list-style-type:disc; skall vara på ul
Nu är det brådis. Jag har ett jätteproblem jag verkligen måste lösa. Det gäller IE som vanligt.
Jag är med på att max-height inte funkar i IE. Därför måste jag använda height. Men om jag gör det blir höjden alltid det jag sätter den till. Jag vill ha samma funktion som max-height. Jag tycker inte koden jag skrev ovan funkar särskillt bra. Finns det något enkelt sätt?
Det verkar som
height: expression( this.scrollHeight > 600 ? "600px" : "auto" ); /* sets max-height for IE */
funkar i alla fall...