webForumDet fria alternativet

CSS, scrolllist och olika skärminställningar

HTML & CSS

1 svar · 316 visningar · startad av Frazze

Medlem sedan jan. 200614 inlägg
Frågan#1

Hej!

Har en liten fundering som förmodligen är jättesimpel att svara på. Som den amatör jag är vet jag inte själv, har letat runt och inte hittat något så nu provar jag att fråga. Antingen går det eller så går det inte alls, min gissning är att det inte går alls.

Ska försöka att beskriva problemet så enkelt som möjligt. Anta att jag i en CSS-mall har definerat en vanlig enkel box som så här:

.box {
width: 500px;
height: 800px;
overflow: auto;
border-style: solid;
border-width: 1px;
border-color: red;
background: green}
}

En enkel låda alltså som jag sen fyller med text. Skulle texten i min box fylla hela lådan och mer därtill så skapas en scroll-lista så att jag kan rulla upp och ner för att se. Så långt allt bra. MEN, någon nu har en skärminställning som gör att min låda faktist inte syns på skärmen utan den nedre delen helt enkelt hamnar utanför, kan jag då på samma sätt få en scroll-lista att visa sig i BARA min box?

Okej, jag är inte riktigt klar än, håll ut :r

Min sida består av två frames, topp och botten, där alltså min "box" visas i bottendelen. Med vissa skärminställningar hamnar den alltså utanför. Om jag i "framesetet" slår på scrolling="Yes" för att ordna till det i de fall lådan hamnar nedanför så blir det liksom inte riktigt bra ändå eftersom scrolllistan gör att lådan flyttas inåt i sidled. Då min "box" sitter ihop med en annan lika bred "box" i topprutan ser ju detta knas ut, dom sitter inte ihop längre isåfall. Båda boxarna är centrerade. Nån som vet hur jag kan ordna till detta?

Lång fråga som säkert har ett enkelt svar, hoppas ni orkade läsa igenom.

Medlem sedan nov. 20041 189 inlägg
#2

Hej!

Välkommen.

  1. Framesets är av ondo. Försök klara dig utan - det är inte svårt.
  2. Låt mig gissa att din top-frame är din header.
    Om du låter din .box (som egentligen borde vara #box) ha egenskapen:
body { margin: 0; padding: 0; }
#box { min-height: 100%;
overflow:auto;
width: 500px;
boder: 1px solid red;
margin: 0 auto; /* centrera */
background: green;
}
* html #box { height: 100%; } /* för IE */

Så får du väl någon medelväg?

Annars kan du sätta (på din top-frame)

body { overflow:scroll;}

Fast då måste du även ha

body,html { min-height: 100%; }

om du kör enligt standarderna

382 ms totalt · 4 externa anrop · v20260731065814-full.e96017d9
126 ms — deklarationer (db)
121 ms — hämta statistik (db)
133 ms — hämta tråd, inlägg och bilagor (db)
126 ms — ändringar (db)