CSS: So erhalten Sie Bildlaufleisten für div innerhalb eines Containers mit fester Höhe

90

Ich habe das folgende Markup:

<div class="FixedHeightContainer">
  <h2>Title</h2>
  <div class="Content">
    ..blah blah blah...
  </div>
</div>

Das CSS sieht folgendermaßen aus:

.FixedHeightContainer
{
  float:right;
  height: 250px;
  width:250px;  
}
.Content
{
  ???
}

Aufgrund seines Inhalts ist die Höhe von div.Contenttypischerweise größer als der von bereitgestellte Raum div.FixedHeightContainer. Im Moment div.Contenterstreckt sich fröhlich aus dem Boden heraus div.FixedHeightContainer- überhaupt nicht das, was ich will.

Wie gebe ich an, dass div.ContentBildlaufleisten angezeigt werden (vorzugsweise nur vertikal, aber ich bin nicht pingelig), wenn die Höhe zu groß ist, um zu passen?

overflow:autound overflow:scrolltun aus irgendeinem bizarren Grund nichts.

css scrollbar overflow David
quelle

Antworten:

151

Das Einstellen von overflowsollte sich darum kümmern, aber Sie müssen auch die Höhe von einstellen Content. Wenn das Höhenattribut nicht festgelegt ist, wird das div vertikal so hoch wie nötig, und Bildlaufleisten werden nicht benötigt.

Siehe Beispiel: http://jsfiddle.net/ftkbL/1/

Dutchie432
quelle
Okay danke. Also muss ich eine Höhe für div.Content angeben? Ich nahm an, dass es aus dem Container heraus funktionieren würde, dass es nicht passen würde, und wende auf dieser Basis Bildlaufleisten an.
David
6
Wenn Sie Contenteine feste Höhe angeben, sollten Sie keine FixedHeightContainerfeste Höhe angeben, da Sie nicht wissen können, wie hoch Ihr Titel sein wird, und daher Contentmöglicherweise herausgeschoben werden. Siehe: jsfiddle.net/ftkbL/2 Sie sollten die feste Höhe nur für das Element mit einstellen overflow: scroll. Siehe jsfiddle.net/ftkbL/3 oder jsfiddle.net/ftkbL/4
RoToRa
Ich sehe Ihren Standpunkt (vom ersten Link), aber der Titeltext ist bekannt und zu kurz, um eine Zeile zu überschreiten, es sei denn, der Benutzer hat den Text auf eine unpraktische Größe aufgeblasen.
David
Gibt es eine Möglichkeit, eine kurze Höhe zu haben und gleichzeitig die Bildlaufleiste auszublenden? Auf diese Weise sehen Benutzer, wenn sie auf Mobilgeräten nach unten ziehen, dass sie nach unten scrollen, aber ohne die umständliche Anzeige von 2 Bildlaufleisten in ihrem Browser?
Klewis
@blackhawk - Nicht das ich wüsste. Möglicherweise müssen Sie dafür Javascript verwenden. Insbesondere denke ich an die jQuery Draggable-Bibliothek: jqueryui.com/draggable - eine Sache, die berücksichtigt werden muss, ist ... woher wissen Desktop-Benutzer, dass sie scrollen müssen?
Dutchie432
2

FWIW, hier ist mein Ansatz = ein einfacher, der für mich funktioniert:

<div id="outerDivWrapper">
   <div id="outerDiv">
      <div id="scrollableContent">
blah blah blah
      </div>
   </div>
</div>

html, body {
   height: 100%;
   margin: 0em;
}

#outerDivWrapper, #outerDiv {
   height: 100%;
   margin: 0em;
}

#scrollableContent {
   height: 100%;
   margin: 0em;
   overflow-y: auto;
}
John Love
quelle
1

Code aus der obigen Antwort von Dutchie432 

.FixedHeightContainer {
    float:right;
    height: 250px;
    width:250px; 
    padding:3px; 
    background:#f00;
}

.Content {
    height:224px;
    overflow:auto;
    background:#fff;
}
Charitha Goonewardena
quelle
-2

Verwendung overflowEigenschaft

overflow: hidden; 

overflow: auto;

overflow: scroll;
Bisma
quelle