Bordure latérale et aide au contenu dynamique

J'ai deux bordures latérales sur mon site web, côté gauche et côté droit ... petite image d'environ 15x15 qui se répète sur le site web ... Lorsque vous réglez 100% comme ci-dessous, la bordure ne passe que " un écran "vers le bas" (qui est 100%). Mais mon site web est dynamique et le contenu change ... Je veux que la bordure change avec la hauteur totale de la page ... Comment est-ce que je peux faire ceci?Bordure latérale et aide au contenu dynamique

Voici le css:

.bgr_right { 
background-image: url(../Graphics/bgr_right.jpg); 
background-repeat: repeat-y; 
background-position: right; 
position: absolute; 
top: 0px; 
height: 100%; 
width: 30px; 
right: 0px; 
background-color: #E7F5F0; 
    }

Voici le DIV HTML:

<div class="bgr_right"></div>

Aussi, est-position: absolute la bonne chose à avoir?

MISE À JOUR: Après avoir lu les réponses, je pensais qu'il doit y avoir une meilleure façon ... Que diriez-vous à l'aide ... javascipt Est-ce que quelqu'un sait s'il y a un moyen de, avec javascript, obtenir le hauteur du corps? puis:

 <div height="javascript_function()" or something...

???

Merci encore

Source

2009-10-25 Anonymous

Au risque de commentaires en colère et perte de réputation - utiliser une table pour contenir votre mise en page. Vous obtenez les bordures pleine hauteur libres - elles s'ajusteront automatiquement à la même hauteur que votre contenu.

<table> 
    <tr> 
    <td class="bgr_left"></td> 
    <td class="content"></td> 
    <td class="bgr_right"></td> 
    </tr> 
</table>

Source

2009-10-25 18:58:57 Ray

Theres vraiment pas besoin d'avoir des éléments vides dans votre balisage juste pour obtenir un arrière-plan; table, div ou tout autre élément. Il y a toujours des exceptions bien sûr, mais c'est une mise en page assez simple ... – jeroen

@Jeroen, après avoir voté votre commentaire, j'ai * pensé * à ce sujet. Je ne pense pas qu'il suggérait d'avoir des éléments * vides *, il faisait juste la démonstration de la structure de balisage sans mettre dans les cellules du tableau le remplissage de type '. ... Cela dit, je ne suis pas d'accord avec l'utilisation de tableaux pour la mise en page, aussi facile soit-il. –

@ricebowl, les noms de classes des colonnes suggèrent qu'elles ne sont là que pour l'arrière-plan. Je suis d'accord avec la partie des tables qui n'utilisent pas, dans mon expérience, tout est fait plus facilement et de manière flexible en utilisant div/css, mais mon commentaire n'était pas seulement destiné aux tables, les utilisations supplémentaires sont également redondantes. – jeroen

Si vous avez une conception de largeur fixe, vous pouvez simplement utiliser une image d'arrière-plan, que ce soit sur le corps ou sur votre conteneur de contenu, en fonction de l'effet souhaité. Cette image serait quelque chose comme:

(left bar)-> | ([x]px space here) | <-(right bar)

Avec repeat-y, cela vous donne:

|    | 
|    | 
|    | 
| content here | 
|    | 
|    | 
|    |

Ensuite, les barres seront aussi élevés que votre contenu. Si vous appliquez cela à <body>, alors il aura la hauteur du corps.

Espérons que cela aide.

Source

2009-10-25 18:59:12 stephenhay

Il ne semble pas y avoir de raison d'utiliser une div distincte pour l'arrière-plan car elle est vide, mais cela dépend si la largeur de la colonne est fixe.

Vous devez appliquer l'image d'arrière-plan à la div dont vous voulez avoir un arrière-plan, de cette façon vous pouvez être certain qu'elle continuera plus bas lorsque la div se développera.

Si la largeur des colonnes est fixe, vous pouvez simplement combiner gauche et à droite l'image dans une image très large qui va seulement répéter verticalement.
Si votre largeur de colonne est variable, vous pouvez par exemple l'arrière-plan gauche dans la div croissance et la droite sur un div wrapper qui contient la div de plus en plus.

En utilisant le bon rembourrage, vous obtiendrez l'effet souhaité.

Source

2009-10-25 19:22:16 jeroen

Alternativement, je suggère d'envelopper deux autres divs autour du conteneur de contenu et de répéter l'arrière-plan en l'alignant dans un div à gauche et dans l'autre à droite. À savoir:

<div id="left_wrapper" style="background: url(my_leftimage.png) y-repeat top left;"> 
<div id="right_wrapper" style="background: url(my_rightimage.png) y-repeat top right;"> 

    <div id="content">hello world</div> 

</div> 
</div>

Ensuite, si vous voulez aller hauteur de 100% fixé le code html, le corps et les conteneurs de contenu à hauteur de 100% comme celui-ci dans le CSS:

html, body, #content {hauteur : 100%; }

Hope this helps :)

Source

2009-10-26 02:16:57 jnpWebDeveloper

Bordure latérale et aide au contenu dynamique

Répondre

Questions connexes