* {
margin: 0;
padding: 0;
}
.container {
margin: 0 auto;
width: 400px;
border: 1px solid red;
}
.fixeddiv {
position: fixed;
top: 0;
bottom: 0;
width: 100px;
background: blue;
overflow-y: scroll;
}
.contentdiv {
margin: 0 0 0 120px;
border:2px solid green;
}
<div class="container">
<div class="fixeddiv">
<h1>fixed div</h1>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
</div>
<div class="contentdiv">
<h1>width auto content</h1>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
<p>Sed mollis, eros et ultrices tempus, mauris ipsum aliquam libero, non adipiscing dolor urna a orci. Nullam tincidunt adipiscing enim. Nunc interdum lacus sit amet orci. In ac felis quis tortor malesuada pretium.</p>
</div>
</div>
당신은 달성 할 수 있지만, 특허 DIV가 –
가 고정 사업부 꽤 얇은 움직일 때마다 여전히 이동합니다, 그래서 사용되지 않는 많은이있다 컨테이너의 공간. 당신은 적절한 값으로 고정 된 div에 대해 margin-left를 얻을 필요가 있습니다. 예를 들어 두 div 사이에 10 픽셀을 사용하려면 (1300-180-10) = 110 margin-left : 110px; –