CSS: Specjalne problemy z układem płynów
Zobacz załączony obraz. Jak to się dokonało? Gosh, chodzę na CSS od 8 lat, ale jakoś nigdy nie musiałem tego robić!
Dzięki!
CSS: Specjalne problemy z układem płynów
Zobacz załączony obraz. Jak to się dokonało? Gosh, chodzę na CSS od 8 lat, ale jakoś nigdy nie musiałem tego robić!
Dzięki!
To jak to zrobić:
<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>
Mam to zaimplementowane na mojej stronie jakiś czas temu, ale zgubiłem kod. Oto krótki CSS makieta:
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>
A oto 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;
}
To powinno działać, a oto na żywo kopia: http://jsfiddle.net/dDZvR/12/.
Pamiętaj, że za każdym razem, gdy dodasz dopełnienie, brzegi, marginesy itp. Do lewego paska, musisz zwiększyć dopełnienie na ciele. Zaoszczędzi ci to mnóstwo debugowania;)
Powodzenia!
Jakieś opinie? Czy to działa? * westchnienie * – Blender
Tak, podoba mi się to rozwiązanie. –
To nowe podejście nie złamać układ jak na polu zawartości (po prawej) organicznie rośnie. Umożliwia również bezpieczne stosowanie tła i obramowań do kontenera.
.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>
Jest to najbardziej proste rozwiązanie do przodu mogę myśleć.
Zawiń obydwa elementy w zbiorze nadrzędnym ustawionym na pozycjonowanie względne, a następnie bezwzględnie ustaw statyczny pasek boczny i ustaw margines na reagującym dziale tak samo, jak stały pasek boczny.
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;
}
Używasz procenty spędzenia większej div? – DeaconDesperado