---
title: "Problem med content höjd"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/189115-problem-med-content-höjd"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "saw"
published: "2012-02-09T13:24:12.000Z"
updated: "2012-02-10T21:52:25.000Z"
replies: 21
views: 1156
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/189115-problem-med-content-höjd"
---
# Problem med content höjd
_Sida 1 av 2._
## #1 — saw, 2012-02-09T13:24Z
Jag har lite problem med min css. Jag har lyckats med att få breden "flytande" dvs den följer med om jag gör webbläsaren bredare och smalare till en viss punkt, perfekt. Nu ville jag göra det med höjden men det skiter sig ...
```
#content
{
//i css
position:relative;
margin:auto auto auto auto;
top:70px;
bottom:10px;
width:90%;
min-width:950px;
height:90%;
min-height:580px;
overflow:hidden;
background-color: White;
border-left:3px solid #2E5881;
border-right:3px solid #ADC2D6;
border-top:3px solid #2E5881;
border-bottom:3px solid #ADC2D6;
}
```
Det jag inte tycker om är att jag inte kan få höjden "dynamiskt" :(
Permalänk: https://www.webforum.nu/p/189115
## #2 — Danne V, 2012-02-09T13:33Z
Inte helt 100 men...
Det beror ofta på att det element som omger "ditt" element, dvs föräldern, inte har höjden definerad. Eftersom du vara visar stilmallen för #content och inte all kod (både html och css) så kan man alltså inte svara exakt.
Börja med att ge html och body 100% höjd.
Permalänk: https://www.webforum.nu/p/2292285
## #3 — saw, 2012-02-09T13:47Z
Tack för snabbt svar, det element som emger är body
```
body
{
background-image:url('../Bild/Footer.png');
background-repeat:repeat-x;
background-color:#6E92B3;
font: 11px/1.4em Comic Sans MS,Verdana, Geneva, Arial, Helvetica, sans-serif;
padding:0;
margin:10px 10px 10px 10px
position:absolute;
top:0;
left:0;
width:97%;
height:98%;
overflow:hidden;
}
```
Det som omger är
```
//och under
```
HJälper det?
Permalänk: https://www.webforum.nu/p/2292286
## #4 — voigtann1, 2012-02-09T13:56Z
och det vigtigaste är... din doctype är?
(glöm inte sätt en höjd på html-elementet också).
Permalänk: https://www.webforum.nu/p/2292287
## #5 — saw, 2012-02-09T14:03Z
Ursäkta jag glömde:
```
```
Vilket html-element menar du, räcker det inte att sätta höjden i css?
Permalänk: https://www.webforum.nu/p/2292288
## #6 — voigtann1, 2012-02-09T14:56Z
> **[saw skrev:](https://www.webforum.nu/p/1547215)**
>
> Ursäkta jag glömde:
>
>
> ```
>
> ```
>
>
> Vilket html-element menar du, räcker det inte att sätta höjden i css?
```
html { height: 100%;}
```
det html-element ;)
Permalänk: https://www.webforum.nu/p/2292289
## #7 — saw, 2012-02-09T15:06Z
Och den skall liga i css också?
När jag la den där så var det ingen skillnad...
Permalänk: https://www.webforum.nu/p/2292290
## #8 — voigtann1, 2012-02-09T15:09Z
kan du postar hela HTML dokumentet och inte bara delar? eller lägg upp det på jsbin/jsfiddle eller någon annan liknande tjänst så man kan se?
Permalänk: https://www.webforum.nu/p/2292291
## #9 — saw, 2012-02-09T15:17Z
Det går tydligen inte att ladda upp de filerna...
Permalänk: https://www.webforum.nu/p/2292292
## #10 — voigtann1, 2012-02-09T15:20Z
lägg upp det på dropbox om du måste lägga upp filer(?)?
Permalänk: https://www.webforum.nu/p/2292293
## #11 — Danne V, 2012-02-09T15:33Z
Du har ju lagt #container inuti .header i html-koden.
Om du bara flyttar ner den, så funkar det:
```
Untitled Document
[B][/B]
```
PS: När man ber dig om ALL kod (html och css) så menar man alltså ALL kod, inte de delar som du tror är releventa, utan, alltså, ALL kod. ;)
Permalänk: https://www.webforum.nu/p/2292295
## #12 — saw, 2012-02-09T16:59Z
Tack för svaren men jag kan inte se att det är som du säger Danne V.
Att jag inte skickade med all koden är för att den är väldigt lång men jag prövar med en bild.
Som jag ser det så har jag stängt alla divar utan att blanda ihop dem.
Bilagor:
- [kod.gif](https://www.webforum.nu/a/23196.gif)
Permalänk: https://www.webforum.nu/p/2292298
## #13 — Danne V, 2012-02-09T17:24Z
> **[saw skrev:](https://www.webforum.nu/p/1547226)**
>
> Tack för svaren men jag kan inte se att det är som du säger Danne V.
> Att jag inte skickade med all koden är för att den är väldigt lång men jag prövar med en bild.
> Som jag ser det så har jag stängt alla divar utan att blanda ihop dem.
OK, jag kanske såg fel i den lilla kodsnutten du visat, men jag är i alla fall övertygad om att det är fel någon annan stans i html-koden (den del som du inte visar).
Koden jag klistrade in i mitt förra inlägg och som bygger på det du visat fungerar alldeles utmärkt. Du får väl ta den och försöka applicera på det du har. Och kolla din html igen. Skärmdumpar säger tyvärr ingenting.
Permalänk: https://www.webforum.nu/p/2292299
## #14 — saw, 2012-02-09T17:32Z
Jag skall göra som så att jag skall börja om ifrån 0 och utgår vad du gjorde, och sedan
lägga på div efter div.
Jag tänkte göra likadant när det gäller css, bara ta det viktigaste först. Jag misstänker
som du, att jag har fått med någonting som stör.
Hur som helst tack för era svar, jag återkommer om jag stöter på patrul eller hittar felet.
Permalänk: https://www.webforum.nu/p/2292300
## #15 — saw, 2012-02-09T18:36Z
Jag har nu gjort en ny i visual studio och enbart tagit med det viktigaste.
```
//css
html {height:100%}
body
{
background-image:url('../Bild/Footer.png');
background-repeat:repeat-x;
background-color:#6E92B3;
font: 11px/1.4em Comic Sans MS,Verdana, Geneva, Arial, Helvetica, sans-serif;
padding:0;
margin:10px 10px 10px 10px
position:absolute;
top:0;
left:0;
width:97%;
height:98%;
overflow:hidden;
}
#content
{
position:relative;
margin:auto auto auto auto;
top:70px;
bottom:10px;
width:90%;
min-width:950px;
height:90%;
min-height:580px;
overflow:hidden;
background-color: White;
border-left:3px solid #2E5881;
border-right:3px solid #ADC2D6;
border-top:3px solid #2E5881;
border-bottom:3px solid #ADC2D6;
}
.header
{
height:70px;
position:absolute;
top:0px;
left:15%;
width:100%;
background-image:url('../Bild/Logga.png');
background-repeat: no-repeat;
z-index:110;
}
.footer
{
position:relative; bottom:0px;
background-image:url('../Bild/Footer_small.png');
background-repeat:repeat-x;
background-position:bottom;
z-index:170;
height:40px;
}
//html-koden
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
Tillsammans
```
Det som jag är ute efer är fortfarande fel. Det är inehållet i "content" som
jag skulle vilja ha mera flytande, så att den blå underkanten alltid syns med
ca: 5mm. Är detta möjligt? :q
Permalänk: https://www.webforum.nu/p/2292301
## #16 — Danne V, 2012-02-09T19:54Z
> **[saw skrev:](https://www.webforum.nu/p/1547230)**
>
> Jag har nu gjort en ny i visual studio och enbart tagit med det viktigaste.
>
>
> ```
> //css
> html {height:100%}
> body
> {
> background-image:url('../Bild/Footer.png');
> background-repeat:repeat-x;
> background-color:#6E92B3;
> font: 11px/1.4em Comic Sans MS,Verdana, Geneva, Arial, Helvetica, sans-serif;
> padding:0;
> margin:10px 10px 10px 10px
> position:absolute;
> top:0;
> left:0;
> width:97%;
> height:98%;
> overflow:hidden;
> }
> #content
> {
> position:relative;
> margin:auto auto auto auto;
> top:70px;
> bottom:10px;
> width:90%;
> min-width:950px;
> height:90%;
> min-height:580px;
> overflow:hidden;
> background-color: White;
> border-left:3px solid #2E5881;
> border-right:3px solid #ADC2D6;
> border-top:3px solid #2E5881;
> border-bottom:3px solid #ADC2D6;
> }
> .header
> {
> height:70px;
> position:absolute;
> top:0px;
> left:15%;
> width:100%;
> background-image:url('../Bild/Logga.png');
> background-repeat: no-repeat;
> z-index:110;
> }
> .footer
> {
> position:relative; bottom:0px;
> background-image:url('../Bild/Footer_small.png');
> background-repeat:repeat-x;
> background-position:bottom;
> z-index:170;
> height:40px;
> }
> //html-koden
> <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
>
>
>
>
> Tillsammans
>
>
>
>
>
>
>
> ```
>
>
> Det som jag är ute efer är fortfarande fel. Det är inehållet i "content" som
> jag skulle vilja ha mera flytande, så att den blå underkanten alltid syns med
> ca: 5mm. Är detta möjligt? :q
Ledsen att säga det, men det där är ganska kaotiskt med en mängder av konstig css. Bl.a. en massa "position:absolute" där det inte behövs (t.o.m. för body-taggen!!!???) osv och andra ganska bakvända lösningar. Och så omsluter du all kod med form-taggar, vilket ju är ganska märkligt.
Ska man jobba om det där så tar det nån timme och det har jag tyvärr inte tid med.
Permalänk: https://www.webforum.nu/p/2292303
## #17 — voigtann1, 2012-02-09T20:01Z
> **[Danne V skrev:](https://www.webforum.nu/p/1547233)**
>
> Och så omsluter du all kod med form-taggar, vilket ju är ganska märkligt.
ASP.NET webforms gör detta Danne V.
Permalänk: https://www.webforum.nu/p/2292304
## #18 — saw, 2012-02-09T20:10Z
Jo jag såg nu att jag hade position i body och i footer som jag nu har tagit bort.
Fungerar lika bra utan dem, men resultatet är detsamma.
Permalänk: https://www.webforum.nu/p/2292305
## #19 — voigtann1, 2012-02-09T20:20Z
Mitt tips är: Gör om CSS:en känns som du har gjort det extremt mycket krångligare än vad det behöver vara.
Kan du ladda upp bilderna du har i CSS:en? Så man vet vad man har att jobba med.
Permalänk: https://www.webforum.nu/p/2292306
## #20 — saw, 2012-02-09T22:18Z
Ok här kommer bilderna
Bilagor:
- [Footer.png](https://www.webforum.nu/a/23197.png)
- [iogt_logga1.png](https://www.webforum.nu/a/23198.png)
- [Logga.png](https://www.webforum.nu/a/23199.png)
Permalänk: https://www.webforum.nu/p/2292308
---
Tråden på webben: https://www.webforum.nu/amne/html-css/189115-problem-med-content-höjd
Nästa sida: https://www.webforum.nu/amne/html-css/189115-problem-med-content-höjd/page2.md
