Avatar billede zekedk Novice
03. maj 2017 - 09:42 Der er 3 kommentarer

højde på <div> #container

Hejsa

Sidder med en lille side hvor jeg har en header. topimg, menu og footer med fast højde og en container der skal fylde resten, men det kan jeg simpelthen ikke få den til :(

CSS:
body{
    font-family:'Tahoma', sans-serif;
    background-color:#d5d5d5
    }

#header{
    height:70px;
    background-color:#3a3a3a;
    width:100%;
    text-align:center;
    line-height:70px;
    color:#fff;
    }
   
#topimg{
    width:100%;
    height:220px;
    background-image:url(../img/88.jpg);
    background-size:cover;
    }
   
#menu{
    height:60px;
    background-color:#3a3a3a;
    width:100%;
    color:#fff;
    line-height:60px;
    }

#container{
    margin:0 auto;
    width:950px;
    background-color:#fff
    }

#footer{
    position:bottom;
    bottom:0;
    height:40px;
    line-height:40px;
    background-color:#3a3a3a;
    width:100%;
    color:#fff;
    }

HTML:

<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="header">Top</div>
<div id="topimg">Top Image</div>
<div id="menu">Menu</div>
<div id="container">Container</div>
<div id="footer">Footer</div>
</body>
</html>

Jeg fandt et andet spørgsmål angående det, hvor man skulle bruge
#container{min-height:calc(100%-fast højde, i mit tilfælde 390); men den kan jeg ikke få til og virke. Nogen der har nogen forslag? :)
Avatar billede Rune1983 Ekspert
03. maj 2017 - 10:19 #1
Prøv
#container{
    margin:0 auto;
    width:950px;
    height: calc(100% - 110px);
    background-color:#fff
    }
Avatar billede Rune1983 Ekspert
03. maj 2017 - 10:20 #2
Måske du skal trække menu og img height fra også
Avatar billede Rune1983 Ekspert
03. maj 2017 - 10:22 #3
height: calc(100% - 390px);
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester