CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede spacemorten Nybegynder
19. januar 2005 - 13:10 Der er 13 kommentarer og
1 løsning

Css box der snapper til bunden

Jeg har opstillet et eksempel der viser min problemstilling. Det er ret enkelt. Jeg vil gerne have bunden på min blå boks (den hvor der står blah blah) til at snappe til bunden af browservinduet. Sådan så den altid går i bund på browseren uden at der kommer scroll hvis vinduet gøres mindre eller der er brugere med lav opløsning. Hvordan kan det lade sig gøre?

Eksemplet er her:
http://mortensskrammel.1go.dk/slet.htm
Avatar billede yellow Nybegynder
19. januar 2005 - 13:32 #1
position:absolute;
bottom:0;

kun testet i IE.
Avatar billede spacemorten Nybegynder
19. januar 2005 - 13:38 #2
Du misforstår. Jeg vil gerne have en boks hvis top er i 300 px (som i eksemplet) og bunden svarer til browserens bund. Altså en aflang boks. Hvis det aktive browservindue er f.eks. 1000 px høj, vil jeg gerne have en kasse der er 1000-300=700 px høj. Hvis brugeren kører en anden opløsning, hvor vindet f.eks. er 500 px høj, skal boksen så kun være 200 px høj. Ved ikke om det er til at forstå?
Avatar billede yellow Nybegynder
19. januar 2005 - 13:46 #3
Nåhhh :-)
Tilføj:
height:100%;
til BÅDE body og .test classes
Avatar billede plazm Nybegynder
19. januar 2005 - 13:46 #4
tror jeg desværre du skal bruge noget javascript til.
Avatar billede plazm Nybegynder
19. januar 2005 - 13:47 #5
yellow, duer ikke på en firefox, i hvert fald ikke min.
Avatar billede di8leva Nybegynder
19. januar 2005 - 13:55 #6
Jeg kan ikke komme på en direkt måde at gøre det på, men her en en lille snyde-genvej:
----------------------------------------------------------------
<html>
<head>
<style type="text/css">
.first
{
    background-color: #003399;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 100%;
}
.second
{
    background-color: #FFFFFF;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 300px;
    height: 300px;
}
.test
{
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFFFF;
    position: absolute;
    top: 300px;
    left: 0px;
    width: 300px;
}
body
{
    margin: 0px;
}
-->
</style>
</head>

<body>
<div class="first"></div>
<div class="second"></div>
<div class="test">blah blah</div>
</body>
</html>
Avatar billede spacemorten Nybegynder
19. januar 2005 - 14:19 #7
yellow's forslag dur hverken til IE eller FF, mens di8leva's kun dur ikke i IE, men fint i FF se evt. http://mortensskrammel.1go.dk/slet2.htm

Jeg kan ikke finde ud af java-script, mens hvis der er nogen der vil hjælpe ville jeg blive glad for det..
Avatar billede spacemorten Nybegynder
19. januar 2005 - 14:20 #8
Undskyld ordbavlet. Der skulle stå at di8leva's forslag virker perfekt i FF, men slet ikke vises i IE.
Avatar billede di8leva Nybegynder
19. januar 2005 - 14:24 #9
spacemorten -> Det var underligt. Den virker perfekt både i IE og FF hos meg.
Avatar billede di8leva Nybegynder
19. januar 2005 - 14:26 #10
spacemorten -> Hvis du fjerner:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

så virker den i både IE og FF. Men hvis du tar med det så virker den ikke i IE. Men hvorfor det er så det ved jeg ikke ??
Avatar billede spacemorten Nybegynder
19. januar 2005 - 14:28 #11
Aarrhh ja. Mange tak. Det er perfekt. Smider du et svar?
Avatar billede di8leva Nybegynder
19. januar 2005 - 14:31 #12
Svar kan du få. Men er det godt nok hvis du ikke har med "<DOCTYPE..." ?

Jeg syns det er meget underligt at den gør på den måde.
Avatar billede plazm Nybegynder
19. januar 2005 - 15:03 #13
IE følger ikke noget standarder, kun deres egne. det er såmæn det :)
Avatar billede di8leva Nybegynder
19. januar 2005 - 15:16 #14
plazm -> Jeg husker det nu nær du siger det :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Bredde på div elementer Af dane022 i HTML 2 16/02/202408:29 20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML 2 21/12/202322:51 22/12/202308:03
validering <input tlfnr. Af slein55 i HTML 5 15/10/202311:43 15/10/202314:51
Link fra form input Af jnrmgs i HTML 9 19/09/202319:10 23/09/202313:11
includere i HTML Af slein55 i HTML 3 15/09/202313:47 16/09/202309:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester



Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 18:09 Kan ikke fildele fra PC til PC Af gertLundberg i LAN/WAN
I går 17:33 Facebook kopier en tråd Af clausito i Sociale medier
I går 09:49 Indtogs sejlads : OL i Paris : Hvornår kom Danmark ? Af Ikke-ekspert i Fri debat
I går 03:28 Inkasso som privat? Af lekor adams i Fri debat
26/0723:51 Frossen cursor Af goglov i PC
White papers
Flere white papers »


Premium
Teaser billede
Nordjyske MapsPeople ruster op til opkøb af konkurrenter: "Vi vil vinde det her kapløb"
Læs mere »
Microsoft tager til genmæle: Vores licenspraksis skaber ikke unfair konkurrence
Færre unge studerende på landets it-uddannelser: "Vi afviser dem der, hvor de har lyst til at læse"
Overblik: Sådan forløb årets største databrud - mindst 165 organisationer ramt
Se alle »
Computerworld
Teaser billede
Elon Musk dropper CrowdStrike efter kæmpe nedbrud
Læs mere »
Apples spritnye app til kodeord kommer til iOS 18: Sådan virker den
Med SearchGPT har verden fået en spritny søgemaskine: Kan den true Googles dominans?
Apples folde-iPhone tager form: Her er planerne
Se alle »
CIO
Teaser billede
Så mange Microsoft-enheder blev ramt af gigantisk Crowdstrike-koks
Læs mere »
Telenor skrotter ældre it-system: Nyt system er en hyldevare
Derfor står Danske Bank foran en kæmpe AWS-transformation: Ellers skulle vi bygge en ny infrastruktur for at følge med
Microsoft kaster milliardbeløb efter nye tiltag til partnerprogrammet: Partnerne kan nu tjene endnu flere penge
Se alle »
Job & Karriere
Teaser billede
Efter 12 år er NNIT's hovedkvarter i Søborg nu ryddet og tomt - alle arbejder hjemme: "Det er med et vist vemod"
Læs mere »
Dansk top-profil trækker sig fra Microsoft: Skal være direktør i TDC Erhverv
KMD-direktør forlader selskabet: Det skal hun nu
IBM Danmark skifter ud i sin øverste ledelse - her er den nye direktion
Se alle »
White paper
Teaser billede
Sådan høster du forretningsfordelene ved Internet of Things
Læs mere »
Sådan får du overblik og beskytter dine cloudapplikationer
Nemmere overblik, styring og omkostningskontrol i dit multicloud-miljø
MDR: Transparent sikkerhed og overvågning i realtid
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »