Erstellen einer Bildlaufleiste in einer Seitenleiste

Question

Ich versuche, eine Bildlaufleiste innerhalb der #main div zu erstellen, so dass ich das Bild ohne Bildlauf der Seite oder des Titels scrollen kann, aber es funktioniert nicht. Was vermisse ich?

Mein Code ist wie folgt:

CSS

#topbar { 
    height: 40px; 
    background-color: blue; 
} 

#sidebar { 
    position: absolute; 
    top: 40px; 
    bottom: 0px; 
    width: 80px; 
    overflow: hidden; 
} 

#title { 
    height:30px; 
    background-color: red; 
} 

#main { 
    height: auto; 
    overflow: scroll; 
} 

HTML

<div id="topbar"> 
    hello 
</div> 
<div id="sidebar"> 
    <div id="title"> 
     title 
    </div> 
    <div id="main"> 
     <!-- lots and lots of text--> 
    </div> 
</div> 

Sie ein Beispiel JSFiddle finden Sie hier: http://jsfiddle.net/PTRCr/

Dank

Answer 1

Das Element Sie wollen scrollbaren sein, sollte

• Haben Höhe und Breite definiert
• Attribut haben overflow:auto

Beispiel:

.scrollArea { 
width: 275px; 
height: 100px; 
padding-left: 5px; 
padding-right: 5px; 
border-color: #6699CC; 
border-width: 1px; 
border-style: solid; 
float: left; 
overflow: auto; 
} 

Answer 2

In Ihrem Fall CSS ändern:

#sidebar { 
position: absolute; 
top: 40px; 
bottom: 40px; 
width: 80px; 
overflow: scroll; 
} 

Answer 3

Sie sollten die height der <div id="main" definieren, um die Bildlaufleiste darauf anzuzeigen. ob Sie es mit Javascript oder jquery berechnen.

#topbar { 
    height: 40px; 
    background-color: blue; 
} 

#sidebar { 
    position:absolute; 
    top: 40px; 
    bottom: 40px; 
    width: auto; 
    height:200px; 
    overflow: hidden; 
} 

#title { 
    height:30px; 
    background-color: red; 
} 

#main { 
    height: 100px; 
    width: 100%; 
    overflow:auto; 
} 

Überprüfen Sie diese aktualisierte jsFiddle.

Answer 4

CSS sind Stylesheets, deren einziger Zweck es ist, Dokumente zu formatieren. Sie können keine bereits vorhandenen Elemente untersuchen.

Die einzigen Möglichkeiten sind, ob die Größe des Divs korrigiert werden muss oder Sie ein wenig JavaScript verwenden müssen, um die genaue Höhe herauszufinden. Die Möglichkeiten, dies mit CSS zu erreichen, wurden bereits von anderen Anwendern vorgestellt.

So, hier ist eine Möglichkeit, Sie mit jQuery tun können

$("#main").height($(document).innerHeight()-$("#title").outerHeight() - $("#topBar").outerHeight()); 

Demo

Answer 5

Sie müssen sich für #main Höhe einzustellen.Es arbeitet bei http://jsfiddle.net/PTRCr/7/

#main { 
    height: 100px; 
    overflow-y: scroll; 
} 

Answer 6

Es ist nur möglich, wenn Sie die Höhe Ihres #title wissen, in beiden px oder als Prozentsatz des übergeordneten Containers

#title in px gesetzt jsFiddle

#main { 
    position:absolute; 
    top:30px; /* set this to whatever you have set the height of #title to*/ 
    bottom:0px; 
    overflow-y: scroll; 
} 

#title als% jsFiddle eingestellt - getestet im IE/FF/Chrome

Answer 7

Sie sind sti Ich sehe auf dieses Projekt. Es gibt auch viele Antworten, aber ich sehe, dass niemand ein funktionierendes Beispiel dafür gemacht hat, wonach ich glaube.

Here's a working Beispiel, dass (ich hoffe) tut, was ich denke, dass Sie fragen.

Ich habe Content Shifting Wrapper hinzugefügt, so dass die Höhe immer noch 100% betragen kann. Sie können mehr über diese Technik von this answer lesen. Ich habe auch diese absolute Positionierung entfernt, ich sehe keinen Grund, warum du das tun solltest.

Jeder Wrapper passt den vorherigen Inhalt an, zuerst den oberen Balken mit der Höhe 40px und dann den Titel mit 30px.

Dieses Beispiel sollte auch Ihren vorherigen Spezifikationen entsprechen, wobei die Bildlaufleisten bei der Größenanpassung auf derselben Grundlinie bleiben.

Wie Sie durch den Code unten sehen können, ist es möglich, eine CSS einzige Lösung trotz was andere führen Sie zu glauben, zu tun haben. Es braucht nur ein paar Tricks aus der Tasche von CSS Holding.

Mann, ich bin so ein Depp.

---

Example |

Code

HTML

<div id='container'> 
    <div id="top-bar">hello</div> 
    <div class="wrapper"> 
     <div class="side-bar"> 
      <div class="title">title</div> 
      <div class="content_wrapper"> 
       <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div> 
      </div> 
     </div><div class="side-bar"> 
      <div class="title">title</div> 
      <div class="content_wrapper"> 
       <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div> 
      </div> 
     </div><div class="side-bar"> 
      <div class="title">title</div> 
      <div class="content_wrapper"> 
       <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div> 
      </div> 
     </div><div class="side-bar"> 
      <div class="title">title</div> 
      <div class="content_wrapper"> 
       <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur gravida interdum dignissim. Aenean quis neque diam, ac vehicula turpis. Vestibulum lacinia libero sed massa fringilla tempor. Donec dictum metus ac justo congue lacinia sit amet quis nisi. Nam sed dolor vitae nisi venenatis imperdiet ut ullamcorper sem. Maecenas ut enim in massa ultricies lacinia quis nec lorem. Etiam vel lacus purus, a placerat lectus. Ut sed justo eros. Curabitur consequat nisi ut diam lacinia at posuere purus tristique. Quisque eu dapibus nunc.</div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

body, html{ 
    height:100%; 
    width: 100%; 
    line-height: 100%; 
    margin: 0;   /* Normalization */ 
    padding: 0;   /* Normalization */ 
} 

div{ 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

#container{ 
    height:100%; 
    width: 100%; 
    text-align: center; 
    overflow: auto; 
} 

#top-bar{ 
    height: 40px; 
    line-height: 40px; 
    border: 1px solid lightblue; 
    background: blue; 
    color: white; 
    text-align: center; 
} 

.side-bar { 
    width: 120px; 
    height: 100%; 
    text-align: center; 
    color: white; 
    border: 1px solid DarkOrchid; 
    display: inline-block; 
    vertical-align: top; 
} 

.title { 
    height:30px; 
    line-height: 30px; 
    border: 1px solid salmon; 
    background: red; 
} 

.wrapper{ 
    margin-top: -40px; 
    padding-top: 40px; 
    height: 100%; 
    width: 100%; 

    white-space: nowrap; 
} 

.wrapper > div{ 
    white-space: normal; 
} 

.content_wrapper{ 
    margin-top: -30px; 
    padding-top: 30px; 
    height: 100%; 
} 

.content{ 
    color: black; 
    height: 100%; 
    overflow: auto; 
}