html/css - div höjd beroende av annan div - Programmering och digitalt skapande

2009-09-09 13:00

Medlem

Registrerad: Mar 2005

●

html/css - div höjd beroende av annan div

Har ett problem. När texten i "div content" blir så pass mycket att det blir mer än 500px i höjd, dvs när height:auto börjar gälla så stannar givetvis "div sidebar" kvar i höjden 500px. Hur ska jag göra för att få "div sidebar" att följa efter "div content" i höjd allt eftersom "div content" expanderar?

HTML:

</head>
<body>
<div id="wrapper">

<div id="sidebar">
Länkar
</div>

</div>
</body>
</html>
__________

CSS:

#wrapper {
margin:auto;
width:836px;
height:auto;
padding-top:30px;
}

#content {
float:left;
width:526px;
height:auto;
min-height:500px;
padding-left:56px;
padding-right:28px;
text-align:justify;
background-image:url(img/content.gif);
background-repeat:repeat-y;
}

#sidebar {
float:right;
width:170px;
height:auto;
min-height:500px;
padding-left:14px;
padding-right:42px;
background-image:url(img/sidebar.gif);
background-repeat:repeat-y;
}

Rapportera Redigera

Citera flera Citera

2009-09-09 13:21

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

testa height: 100% i #sidebar

PS. auto är default-värde på height så du kan ta bort de raderna

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2009-09-09 13:27

Permalänk

muhihihaha

Medlem

Registrerad: Mar 2005

●

Citat:

Ursprungligen inskrivet av Teknocide
testa height: 100% i #sidebar

PS. auto är default-värde på height så du kan ta bort de raderna

Det vill inte fungera. Den står stilla vid 500px.

Rapportera Redigera

Citera flera Citera

2009-09-09 13:28

Permalänk

Leedow

Medlem ★

Plats: Falun
Registrerad: Dec 2003

●

Precis som Teknocide säger så är det height: 100% som fungerar.
Tänk på att padding och marginal kan skapa lite problem med överlappande div:ar och att resultatet kan variera mellan olika webbläsare. Det gäller att ha tungan rätt i munnen där.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Rapportera Redigera

Citera flera Citera

2009-09-09 13:34

Permalänk

muhihihaha

Medlem

Registrerad: Mar 2005

●

Knasigt. Har tagit bort alla height:auto och lagt till height:100% i sidebar men det hjälper ej. Kanske är något annat som ställer till det. Kan länka sidan så att ni som är duktiga kan ta er en koll på det hela (om ni har lust). http://fpcs.host-ed.net/index.php - index fungerar men i andra länken syns felet.

Senast redigerat 2009-09-09 14:53

Rapportera Redigera

Citera flera Citera

2009-09-09 13:44

Permalänk

Leedow

Medlem ★

Plats: Falun
Registrerad: Dec 2003

●

Citat:

Ursprungligen inskrivet av muhihihaha
Knasigt. Har tagit bort alla height:auto och lagt till height:100% i sidebar men det hjälper ej. Kanske är något annat som ställer till det. Kan länka sidan så att ni som är duktiga kan ta er en koll på det hela (om ni har lust). http://fpcs.host-ed.net/index.php - index fungerar men i andra länken syns felet.

Det är din wrapper som tar slut där. content blir större för att texten fyller ut, sidebar blir inte större för att blankt utrymme inte räcker som utfyllnad.

Problemet är att vissa element float:ar och andra inte.

height:100% fungerar endast om parent-objektet har en fast höjd.

Om du gör html, body och wrapper till height:100% så fungerar det. Designen/layouten borde inte förstöras, eftersom det är innehållet i content och sidebar som bestämmer utseendet.

Jag testade själv och det fungerade. Problemet är bara att sidebarens högra border vill sticka iväg.

Det går att lösa detta på ett annat vis tror jag...

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Rapportera Redigera

Citera flera Citera

2009-09-09 14:03

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Ett alternativ till floats som jag tycker är bättre och mer kompatibelt om #content garanterat har högre innehåll än #sidebar är att ha #sidebar inuti #content, position: relative på #content, position: absolute på #sidebar. Då kan du även placera sidebar till höger eller vänster om content precis hur du vill utan hänsyn till var i HTML-koden elementet förekommer.

exempel:

<style>
	#content {
		background: #afa;
		height: 737px; /* faux height, ta bort när elementet får annat innehåll */
		position: relative;
		width: 500px;
	}
	#sidebar {
		background: #ffa; /* bakgrundsfärger för att visa våra element */
		height: 100%; /* 100% i förhållande till #content */
		left: 100%; /* flytta in #sidebar 100% av #content:s bredd från vänster */
		margin-left: 10px; /* 10 pixlar från kanten */
		position: absolute;
		top: 0;
		width: 200px;
	}
</style>

<div id="content">
	<div id="sidebar">
	</div>
</div>

Du kan även använda en wrapper med position: relative på liknande sätt. Då blir dock koordinaterna för att placera #sidebar i övre högra hörnet top: 0; right: 0;
Observera att #sidebar kommer att begränsas till #content:s höjd. Blir #sidebar högre försvinner innehållet "ut över kanten". Float-clears fungerar inte.

Senast redigerat 2009-09-09 14:27

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2009-09-09 14:18

Permalänk

muhihihaha

Medlem

Registrerad: Mar 2005

●

Tack Teknocide! Har försökt något liknande innan utan att använda mig utav position. Det verkar som att detta kommer att fungera! Ska testa mig fram.

Rapportera Redigera

Citera flera Citera

2009-09-09 14:28

Permalänk

Teknocide

Medlem ★

Registrerad: Sep 2007

●

Ingen orsak, lycka till

Visa signatur

Kom-pa-TI-bilitet

Rapportera Redigera

Citera flera Citera

2009-09-09 14:39

Permalänk

muhihihaha

Medlem

Registrerad: Mar 2005

●

Har fått det att fungera nu! Kanon!

Kanske aningen off-topic men går det att fixa så att sidan inte hoppar åt vänster när scrollbar'en kommer upp på sida två? Eftersom sidan ligger centrerad och den totala bredden blir mindre när scrollfunktionen tittar fram så flyttar sig allt åt vänster. Finns det något man kan göra för att få sidan att ignorera det? Inte för att det är världens största problem men det ser ändå halvknasigt ut om man navigerar och läser samtidigt

Edit:
Kom på det själv
html
{oferflow:scroll;}

Senast redigerat 2009-09-09 14:44

Rapportera Redigera

Citera flera Citera

2009-09-09 14:45

Permalänk

Teknocide

Medlem ★