Forum Mjukvara Programmering och digitalt skapande Tråd

Skulle behöva hjälp med lite div-placering

1
Skriv svar
Permalänk
Medlem ★
●

Skulle behöva hjälp med lite div-placering

Är det något jag inte har lärt mig fullt ut ännu är det Div height.

Kan någon vänliga person återskapa detta till kod?

Mitten behöver inte vara min 350px, vill att den ska anpassa sig och fylla ut det som mellan blå och svart.

Redigera
Citera flera Citera
Permalänk
Medlem
●

.red {
height: 300px;
width: auto;
}

.blue {
height: 150px;
width: auto;
}

.gray {
height: auto;
width: auto;
}

.black {
height: 400px;
width: auto;
}

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Och här är en demo av ovanstående CSS.
Gjorde även så att den gråa ytan alltid är minst 350 pixlar: http://jsfiddle.net/ypueex9d/.

Visa signatur

Citera eller nämn gärna mig (@ToJa92) om du svarar på något jag skrivit.
Uppskattar du eller blir hjälpt av ett inlägg jag skrivit är jag tacksam om du gillar det.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av SimonZes:

.red {
height: 300px;
width: auto;
}

.blue {
height: 150px;
width: auto;
}

.gray {
height: auto;
width: auto;
}

.black {
height: 400px;
width: auto;
}

Gå till inlägget

Värt att notera är att width: auto är standard och inte behöver anges under normala omständigheter.
Också värt att notera är att width: 100% inte ger samma resultat som width: auto om elementet har border, margin eller padding.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Här är ett exempel med footer som alltid ligger längst ner oavsett hur stort fönstret är.
Genom att sätta contents (den gråa) bakgrundsfärg på body så kan vi ge illusionen att content fyller ut hela.

http://jsbin.com/giciragaqa/1/
http://jsbin.com/giciragaqa/1/edit

Visa signatur

Mina poster är en illusion. Det som står skrivet här över står i själva verket inte där så inget av det som du läser är sant. Inte ens den här texten. Jag har själv ingen kunskap om det jag skriver och ingen bör således läsa eller ta in den information som står skrivet.

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av rumpnisse:

Här är ett exempel med footer som alltid ligger längst ner oavsett hur stort fönstret är.
Genom att sätta contents (den gråa) bakgrundsfärg på body så kan vi ge illusionen att content fyller ut hela.

http://jsbin.com/giciragaqa/1/
http://jsbin.com/giciragaqa/1/edit

Gå till inlägget

Du den var kanon! Tack så hemskt mycket

Redigera
Citera flera Citera
Permalänk
Medlem
●

Slänger in en fråga, Varför div width:auto; och inte width:100%; ?

Redigera
Citera flera Citera
Permalänk
Medlem
●

Håller med ovanstående, width: auto kommer ändras beroende på innehållet i diven, medans width: 100% kommer vara 100% oavsett innehåll.
Förändras nedskalnings förmågan vid 100%?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Svehck:

Slänger in en fråga, Varför div width:auto; och inte width:100%; ?

Gå till inlägget
Skrivet av FailiP:

Håller med ovanstående, width: auto kommer ändras beroende på innehållet i diven, medans width: 100% kommer vara 100% oavsett innehåll.
Förändras nedskalnings förmågan vid 100%?

Gå till inlägget

width: auto påverkas inte av innehållet i elementet (viktigt, har ingenting med divar att göra). Med width 100% säger man att elementet ska ta upp all tillgänglig bredd före margin, padding och border läggs på, vilket leder till att ett element kan "sticka iväg genom kanten".

Se här för exempel: http://liveweave.com/8aUzkA

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara