Javascript til å finne en bestemt høyde for CSS

[Eirikant]

Heisann.

 

Jeg sitter for øyblikket og jobber med en webside hvor jeg har kommet over et problem som jeg ønsker å løse, men jeg er faktisk ikke sikker på om det er mulig å gjøre det som jeg vil.

Jeg har noen backupløsninger, men tenkte jeg skulle spør her før jeg gir opp.

 

Scenario:

jeg har en DIV tag som skal ha en dynamisk høyde på websiden.

Hvor høy divtagen skal være avhenger av oppløsningen på browservinduet til besøkende,

da websiden er en side som sålangt tilpasser seg oppløsningen.

Vanligvis ville Height: x%; gjort seg, men jeg har en DIV tag under som er oppgitt i PX, og kompliserer det hele. Men jeg har kommet frem til at for å finne den korrekte høyden for DIV'en blir det: A=X-((18X)/100)-100 (Hvor X er høyden på browservinduet)

 

Men her kommer det faktiske spørsmålet mitt.

Er det noe mulighet for å bruke javascript for å finne ut av X, så løse mattestykke og printe det statiske tallet til Height variabelen på den aktuelle DIV taggen?

Eller er dette en jobb for tyngre språk?

Jeg har ganske god peiling på HTML og CSS, men akkurat på javascript er jeg ganske ny..

[agm]

Har klippet ut en kodebit fra et prosjekt. Her brukes bare CSS, men jeg tror den dekker ditt behov. Kort sagt er trikset å sette box-sizing:border-box. Det endrer box-modellen, og setter padding på innsiden av angitt høyde/bredde. Da kan du kombinere % og px ved å sette f.eks. en høyde i prosent og en padding i piksler.

 

Ta en titt:

http://jsfiddle.net/NkW6u/

Endret 24. april 2012 av agm

[Eirikant]

Har klippet ut en kodebit fra et prosjekt. Her brukes bare CSS, men jeg tror den dekker ditt behov. Kort sagt er trikset å sette box-sizing:border-box. Det endrer box-modellen, og setter padding på innsiden av angitt høyde/bredde. Da kan du kombinere % og px ved å sette f.eks. en høyde i prosent og en padding i piksler.

 

Ta en titt:

http://jsfiddle.net/NkW6u/

 

Fikk det ikke til å fungere akkurat slikt som jeg hadde tenkt, men det fungerte uansett mye bedre enn reserve løsningen jeg hadde implementert!

Siden jeg ikke har med tid en ikveld på denne siden så får jeg bare gå med det sånn.

Takk skal du ha

[MikkelRev]

Du kan jo sjekke ut SASS. Det er et rammeverk for CSS hvor du kan bruke variabler og aritmetikk i stilsettet ditt.

http://sass-lang.com/