Wie man responsive Layout mit scrollbaren div
erstellen Wie kann ich dieses CSS-Design erstellen? versuchen, keine Scroll-Seite mit weißen div auf einem Bild zu scrollen
Wenn ich Höhe 100% dann Sidebar wird angezeigt, OK, aber scrollbare Bereich wird unter dem Bildschirm gehen, so hellgraue Bereich ist eine Art von wraper Hintergrund und weißer Bereich ist Inhalt und ich mag auch darauf Margen mit CSS hinzufügen
Hinweis: möchte Medienabfrage für diesen
Hier ist eine Lösung:
position: absolute alles positionieren kann, und dann der rollbaren Bereich wird eine Größe auf der Fenstergröße je ändern.
* {
box-sizing: border-box;
}
.wrapper {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.navbar {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 100px;
background: #ddd;
}
.sidebar {
position: absolute;
top: 100px;
left: 0;
width: 200px;
bottom: 0;
background: #aaa;
}
.main {
position: absolute;
top: 100px;
left: 200px;
bottom: 0;
right: 0;
padding: 20px;
background: #f1f1f1;
}
.scrollable {
padding: 5px;
width: 100%;
height: 100%;
overflow: auto;
background: #fff;
}
.scrollable p {
margin: 0 0 1rem;
}<div class="wrapper">
<div class="navbar">
Navbar
</div>
<div class="sidebar">
Sidebar
</div>
<div class="main">
<div class="scrollable">
<p>
Scrollable with lots of content inside...Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod</p>
<p>tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
<p>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>ich weiß nicht, vermeiden, wenn es sieht wie das, was Sie wollen erreichen, aber hier ist ein kurzer Ausschnitt.
Ich habe Ihren scrollbaren Bereich innerhalb eines Containers platziert, und ich habe eine maximale Höhe zu diesem Container. Dann müssen Sie nur noch overflow-y: scroll hinzufügen, um es
body {
max-height: 100vh;
display: flex;
flex-flow: row nowrap;
}
.sidebar {
width: 20%;
background-color: #333;
}
.container {
width: 80%;
max-height: 100%;
overflow-y: scroll;
background-color: #eee;
}
.area{
margin: 20px;
background:#fff;
overflow: hidden;
padding: 10px;
}<body>
<div class="sidebar"></div>
<div class="container">
<div class="area">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id sagittis lectus, sit amet placerat nisl. Pellentesque blandit porttitor massa vel dignissim. Fusce id velit id libero lacinia tristique. Morbi pretium tempor sapien, id blandit arcu
congue sed. Mauris ultrices tincidunt ipsum, non rhoncus eros consequat vel. Etiam consequat efficitur nibh sed semper. Donec sit amet lobortis diam, et malesuada ligula. Ut a pretium velit, vel porta metus. Proin placerat sollicitudin imperdiet.
Pellentesque dolor nisi, sagittis a diam ut, varius aliquet turpis. Vestibulum pharetra elementum velit, id accumsan felis dignissim sed. Integer tristique faucibus tempor. Aenean varius est eu nisi suscipit interdum. Nam blandit ut nunc ac venenatis.
Donec diam justo, rhoncus in libero ac, tincidunt auctor dolor.
</p>
<p>
Aliquam id orci pharetra, aliquam diam quis, mattis nisi. Maecenas hendrerit eget ex sed consectetur. Praesent at dolor sit amet nisl gravida aliquam. Phasellus maximus fermentum est. Integer sodales tincidunt volutpat. Mauris sit amet lectus non ipsum
tincidunt posuere ut at diam. Nunc in ipsum tincidunt, tempus eros in, viverra diam. Vestibulum convallis odio in arcu consequat congue. Duis egestas ante a orci volutpat, ac commodo est molestie. Aliquam nisl ex, tincidunt in posuere vitae, pretium
rhoncus ligula. Aliquam vehicula turpis sed auctor hendrerit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec metus tellus, faucibus et libero in, luctus cursus tortor. Fusce vel magna lorem.
Aenean sodales sollicitudin eros, quis aliquet mi finibus sit amet.
</p>
<p>
Maecenas ut convallis arcu. Morbi sed fringilla libero. Fusce id posuere tellus. Sed imperdiet, justo vel sollicitudin fermentum, mauris ante lacinia ex, vel mollis nisi metus rhoncus ex. Nam et mauris euismod, vehicula tellus vel, aliquet mauris. Aliquam
finibus enim at maximus imperdiet. Suspendisse porta ipsum ac urna fermentum, at pharetra nisl vestibulum. Praesent sollicitudin tristique nibh id eleifend. Proin ut orci sit amet sapien fringilla consectetur sed id sem. Vestibulum et sollicitudin
libero. Curabitur enim neque, euismod vitae felis nec, sagittis cursus sem. Mauris id ornare felis.
</p>
<p>
Aliquam at accumsan magna. Cras eleifend purus quis consectetur posuere. Aliquam nec nunc at tortor sollicitudin interdum. Donec metus tellus, pretium nec ipsum id, sollicitudin pulvinar nisi. Etiam finibus, velit id rhoncus posuere, risus ex auctor nulla,
et placerat orci tellus non dolor. Fusce id sodales est. Aliquam fringilla nibh ut mi auctor eleifend. Phasellus placerat rhoncus ligula ut mollis. Sed a elementum eros, sodales suscipit ante. Sed vitae neque turpis.
</p>
<p>
Etiam sed pulvinar magna, non laoreet magna. Fusce ullamcorper mauris sit amet ligula ullamcorper tempor. Etiam convallis ante sed odio ultrices, id sagittis lorem pretium. Sed ligula odio, volutpat nec vestibulum a, dignissim a leo. Ut ultrices ligula
erat, sit amet cursus odio ornare ac. Etiam molestie ex nisi, et luctus ligula mollis sed. Nullam ac tempus sapien. Aenean varius lacus ac lacinia imperdiet. Sed arcu lorem, facilisis ut ipsum vel, tempor fermentum ex. In scelerisque laoreet arcu,
nec vestibulum turpis. Praesent dolor massa, imperdiet vitae efficitur in, laoreet quis urna. Morbi malesuada orci id ipsum aliquet bibendum. Maecenas commodo ultricies arcu quis venenatis. Nunc tellus quam, feugiat non urna posuere, ornare sollicitudin
nunc. In condimentum, tortor eget ultricies faucibus, ligula urna molestie sem, et suscipit arcu augue vitae magna. Ut pulvinar ipsum eu porttitor elementum.
</p>
<p>
Vivamus laoreet eros sed mollis tempor. Cras rhoncus placerat erat. Morbi vel est sed erat hendrerit hendrerit et ac odio. Aliquam tincidunt lacinia dui sollicitudin gravida. Pellentesque eget consequat mauris. Maecenas at erat nec mauris mollis faucibus.
Sed eget semper eros, vitae iaculis elit. Fusce et interdum elit. Morbi tincidunt felis sed enim congue porta. Proin eget feugiat purus. Praesent placerat convallis nulla, eu convallis risus faucibus molestie. Maecenas non interdum erat. Interdum
et malesuada fames ac ante ipsum primis in faucibus.
</p>
</div>
</div>
</body>Sie können so etwas tun machen bewegen, Flexbox Beispiel:
/* reset browser defaults */
* {margin:0;padding:0;box-sizing:border-box;overflow:auto}
html, body {width:100%;height:100%}
#container {
width: 100%;
height: 100%;
display: flex; /* displays children inline */
flex-wrap: wrap; /* enables wrapping */
}
#container > * {
border: 1px solid;
}
nav {
flex: 0 1 100%;
background: #777;
}
aside {
flex: 0 1 200px;
background: #777;
}
.scroll {
flex: 0 1 calc(100% - 250px); /* - 200px of the aside's width - 2 x 25px left & right margin */
margin: 25px;
overflow: auto; /* mandatory */
position: relative; /* mandatory */
}
.content {
width: 2000px;
height: 2000px;
background: #eee;
position: absolute; /* mandatory */
}<div id="container">
<nav>NAVBAR</nav>
<aside>SIDEBAR</aside>
<div class="scroll">
SCROLLABLE AREA
<p class="content">some pretty big content for testing...</p>
</div>
</div>Der Trick liegt in der Positionierung der Inhalt und es ist Elternteil, ohne die Positionierung, die overflow-y: scroll oder overflow-y: auto auf der Eltern gilt nicht.
nicht ganz, wenn der Gehalt zu groß ist, sollte unten Polsterung gleich sein, sondern Scrollen alles was ich brauche nur weißen Teil, Effekt mit Medienabfrage auf Klassenbereich wäre zu blättern - > Überlauf: Auto und Max-Höhe: 350px (zum Beispiel) – Night5talker