5
CSS: Problèmes de disposition de fluide spéciaux
Voir l'image ci-jointe. Comment cela est-il accompli? Gosh, je vais CSS depuis 8 ans mais d'une manière ou d'une autre n'a jamais eu à faire ça!
Merci!
A
Répondre
5
Voici comment je le fais:
<style>
#container { margin-left: 250px; }
#sidebar {
display: inline; /* Fixes IE double-margin bug. */
float: left;
margin-left: -250px;
width: 250px;
}
/* Definitions for example only: */
#sidebar { background: #FF0000; }
#content { background: #EEEEEE; }
#sidebar, #content { height: 300px; }
</style>
<div id="container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
3
J'ai déjà implémenté ceci sur mon site, mais j'ai perdu le code. Voici un mockup CSS rapide:
Le code HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
</head>
<body>
<div id="left">
Mr. Fixed-width left
</div>
<div id="right">
Mr. Dynamic right. Scroll me!
</div>
</body>
</html>
Et voici le CSS:
body
{
padding-left: 230px;
}
#left
{
position: fixed;
height: 100%;
left: 0px;
top: 0px;
width: 200px;
background-color: rgb(150, 150, 150);
border-right: 5px solid rgb(50, 50, 50);
padding: 10px;
}
#right
{
width: 100%;
height: 10000px;
}
Cela devrait fonctionner, et voici une copie en direct: http://jsfiddle.net/dDZvR/12/.
Notez que chaque fois que vous ajoutez un remplissage, des bordures, des marges, etc. à la barre de gauche, vous devez augmenter le remplissage sur le corps. Cela vous fera économiser une tonne de débogage;)
Bonne chance!
+0
Une rétroaction? Est-ce que ça marche? * soupir * – Blender
+0
Oui c'est le cas, j'aime cette solution. –
1
Cette nouvelle approche ne rompt pas la mise en page que la zone de contenu (à droite) se développe organiquement. En outre, il permet d'appliquer en toute sécurité des arrière-plans et des bordures à la boîte de conteneur.
.container {
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
}
.left {
position: absolute;
width: 80px;
height: 100%;
}
.right {
position: relative;
left: 80px;
top: 0;
margin-right: 100px;
height: 100%;
}
0
You can always use table display layouts (sigh).
.container {
width: 100%;
display: table;
}
.container div {
display: table-cell;
}
.sidebar {
width: 200px;
background: gray;
}<div class="container">
<div class="sidebar">fixed width sidebar</div>
<div>dynamic content</div>
</div>
0
Ceci est la solution la plus directe que je pouvais penser.
Enveloppez les deux éléments d'un ensemble div parent au positionnement relatif, puis positionnez absolument la barre latérale statique et définissez une marge sur la div responsive de la même largeur que la barre latérale statique.
HTML:
<div class="wrapper">
<div class="fixed"></div>
<div class="responsive">xx</div>
</div>
CSS:
.wrapper {
width: 100%;
}
.fixed {
position: absolute;
bottom: 0;
left: 0;
top: 0;
}
.responsive {
margin-left: 250px;
}
Utilisez-vous des pourcentages pour votre plus grand div? – DeaconDesperado