CSS: problemi speciali di layout del fluido
Vedere l'immagine allegata. Come è stato realizzato? Accidenti, ho frequentato i CSS per 8 anni ma in qualche modo non ho mai dovuto farlo!
Grazie!
CSS: problemi speciali di layout del fluido
Vedere l'immagine allegata. Come è stato realizzato? Accidenti, ho frequentato i CSS per 8 anni ma in qualche modo non ho mai dovuto farlo!
Grazie!
Questo è come lo faccio:
<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>
L'ho implementato sul mio sito qualche tempo fa, ma ho perso il codice. Ecco un mockup CSS rapida:
Il codice 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>
Ed ecco il 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;
}
Questo dovrebbe funzionare, e qui è una copia dal vivo: http://jsfiddle.net/dDZvR/12/.
Si noti che ogni volta che si aggiunge padding, bordi, margini, ecc. Alla barra sinistra, è necessario aumentare il riempimento sul corpo. Ti farà risparmiare un sacco di debugging;)
Buona fortuna!
Qualche feedback? Funziona? * sigh * – Blender
Sì, mi piace questa soluzione. –
Questo nuovo approccio non rompe il layout come la scatola contenuto (a destra) cresce in modo organico. Inoltre, consente di applicare in modo sicuro sfondi e bordi alla scatola del contenitore.
.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%;
}
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>
Questa è la soluzione più avanti dritto mi veniva in mente.
Avvolgere entrambi gli elementi in un gruppo principale impostato su posizionamento relativo, quindi posizionare assolutamente la barra laterale statica e impostare un margine sul div responsive della stessa larghezza della barra laterale statica.
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;
}
Si sta utilizzando le percentuali per la vostra div più grande? – DeaconDesperado