CSS: Spezial Fluid Layout-Probleme
angehängtes Bild anzeigen. Wie wird das erreicht? Meine Güte, ich gehe seit 8 Jahren CSS, aber irgendwie musste ich das nie tun!
Danke!
CSS: Spezial Fluid Layout-Probleme
angehängtes Bild anzeigen. Wie wird das erreicht? Meine Güte, ich gehe seit 8 Jahren CSS, aber irgendwie musste ich das nie tun!
Danke!
Dies ist, wie ich es tun:
<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>
Ich hatte dies vor einiger Zeit auf meiner Website implementiert, aber ich habe den Code verloren. Hier ist eine schnelle CSS Mockup:
Die 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>
Und hier ist der 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;
}
Dies sollte funktionieren, und hier ist eine Live-Kopie: http://jsfiddle.net/dDZvR/12/.
Beachten Sie, dass, wenn Sie Padding, Rahmen, Ränder, etc. auf der linken Leiste hinzufügen, müssen Sie die Polsterung auf dem Körper erhöhen. Es wird Ihnen eine Menge Debugging ersparen;)
Viel Glück!
Irgendein Feedback? Funktioniert es? * seufz * – Blender
Ja, ich mag diese Lösung. –
Dieser neue Ansatz (rechts) nicht das Layout wie die Content-Box brechen wächst organisch. Es erlaubt auch, Hintergründe und Grenzen sicher auf die Container-Box anzuwenden.
.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>
Dies ist die direkteste Lösung, die ich denken konnte.
Umschließen Sie beide Elemente in einem übergeordneten div-Set auf relative Positionierung, positionieren Sie dann die statische Seitenleiste absolut und legen Sie eine Marge für das responsive div so fest wie die statische Seitenleiste.
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;
}
Sind Sie Prozentsätze für Ihre größeren div verwenden? – DeaconDesperado