div CSS stretching

d'abord voici ce que je suis en train de réaliser:div CSS stretching

http://img801.imageshack.us/img801/1516/sitelayout.png

Je viens ne peux pas obtenir la div contenu de travail que je le voudrais, quand vous obtenez aussi la page de la div devrait étirer aussi le fond s'il n'y a pas assez de contenu aussi le remplir, s'il y a trop de contenu il devrait pousser le pied de page. Voici ce que j'ai jusqu'à présent:

HTML

<!DOCTYPE HTML> 
<html> 
<head> 
<title>site</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 

<body> 
<div id="container"> 
<div id="headerBG"></div> 
<div id="header"></div> 
<div id="content"> 
<div id="contentTop"></div> 
<div id="contentCenter"></div> 
</div> 
<div id="footerBG"></div> 
</div> 
</body> 
</html>

CSS

html,body{ height: 100%; margin: 0; padding: 0; } 

body{ 
background-image:url('images/bg.png'); 
background-repeat:repeat; 
} 

#container{ 
position: absolute; 
background-color: green; 
height: 100%; 
width: 100%; 
} 

#headerBG{ 
position: absolute; 
background-image:url('images/header_bg.png'); 
background-repeat:repeat-x; 
height: 297px; 
width: 100%; 
} 

#header{ 
position: relative; 
margin-left: auto; 
margin-right: auto; 
background-color: black; 
width: 780px; 
height: 200px; 
} 

#content{ 
position:relative; 
margin-left: auto; 
margin-right: auto; 
width:780px; 
height:70%; 
} 

#contentTop{ 
width:780px; 
height:30px; 
background-image:url('images/content_top.png'); 
background-repeat: no-repeat; 
} 

#contentCenter{ 
width:780px; 
height:100%; 
background-image:url('images/content_bg.png'); 
background-repeat: repeat-y; 
} 

#footerBG{ 
position: absolute; 
bottom:0px; 
background-image:url('images/footer_bg.png'); 
background-repeat:repeat-x; 
width: 100%; 
height: 144px; 
}

Désolé si son pas très clair, je l'ai été bricoler avec elle beaucoup si ce code est peut-être un peu désorganisé. Je l'ai regardé à la mort et il commence à devenir flou dans ma tête> _ De toute façon, j'apprécierais vraiment toutes les idées que vous pourriez avoir.

yay Revenant au format html + css après un an ou deux yay

Source

2010-10-20 xStoryTeller

pour la facilité que je venais de regarder dans Faux Columns

régler le #content d'avoir une image d'arrière-plan qui ressemble à l'effet que vous voulez.

vous aurez également probablement envie de regarder dans un sticky footer

Source

2010-10-20 20:22:03 Ross

Je les ai déjà regardés, en fait, j'ai implanté le pied collant à un moment donné, mais je l'ai ressorti, je suppose que je pouvais le remettre en place. Le problème est le div #content cependant. Je n'arrivais pas à faire fonctionner les colonnes Faux parce que la div devenait trop grande. Il n'a pas pris en compte la taille de l'en-tête ou quelque chose et a donné à la page une barre de défilement sans aucun contenu dans la div. – xStoryTeller

Voir si cela fonctionne pour vous: http://jsfiddle.net/brianflanagan/jhvBt/ kilométrage IE peut varier (avec la propriété min-height). Si vous avez absolument besoin que le pied de page soit positionné exactement au bas de la fenêtre du navigateur et que la div de contenu soit étirée, je vous recommande d'utiliser une solution JS pour calculer des hauteurs variées si nécessaire.

Source

2010-10-21 00:04:13

J'ai vraiment besoin du pied de page pour étirer aussi le fond, tout lien vers une solution JS? Je ne pensais pas que ce serait compliqué = o – xStoryTeller

Bien sûr. http://jsfiddle.net/brianflanagan/jhvBt/1/ J'ai ajouté beaucoup de notes dans le js pour expliquer mon processus de pensée, mais vraiment, c'est juste quelques lignes de jQuery/JS –

Merci! Cela fonctionne à merveille! J'avais l'intention d'utiliser jQuery de toute façon donc ce n'est pas un problème, j'ai aussi ajouté une petite animation;) Merci beaucoup! – xStoryTeller

div CSS stretching

Répondre

Questions connexes