Mam następujące znaczniki:
<div class="FixedHeightContainer">
<h2>Title</h2>
<div class="Content">
..blah blah blah...
</div>
</div>
CSS wygląda następująco:
.FixedHeightContainer
{
float:right;
height: 250px;
width:250px;
}
.Content
{
???
}
Ze względu na swoją zawartość wysokość div.Content
jest zwykle większa niż powierzchnia zapewniana przez div.FixedHeightContainer
. W tej chwili div.Content
wesoło wystaje z dna div.FixedHeightContainer
- wcale tego nie chcę.
Jak określić, że mają być wyświetlane div.Content
paski przewijania (najlepiej tylko pionowe, ale nie jestem wybredny), gdy ich wysokość jest zbyt duża, aby je dopasować?
overflow:auto
i overflow:scroll
nie robią nic z jakiegoś dziwnego powodu.
Content
stałą wysokość, nie powinieneś podawaćFixedHeightContainer
stałej wysokości, ponieważ nie możesz wiedzieć, jak wysoki będzie twój tytuł, więcContent
może zostać wypchnięty. Zobacz: jsfiddle.net/ftkbL/2 Stałą wysokość należy ustawić tylko dla elementu zoverflow: scroll
. Zobacz jsfiddle.net/ftkbL/3 lub jsfiddle.net/ftkbL/4FWIW, oto moje podejście = proste, które działa dla mnie:
<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; }
źródło
Kod z powyższej odpowiedzi autorstwa Dutchie432
.FixedHeightContainer { float:right; height: 250px; width:250px; padding:3px; background:#f00; } .Content { height:224px; overflow:auto; background:#fff; }
źródło
używać
overflow
właściwościoverflow: hidden; overflow: auto; overflow: scroll;
źródło