I have this problem: I have an image and rgba in background of body, and want to make my scrollbar's background transparent. For some reason it doesn't want to be transparent and in stead it's white. I don't know what's wrong:(
HTML:
<body>
<p><!--- TEXT ---></p>
</body>
CSS:
body
{
background: linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)), url("http://picalls.com/wp-content/uploads/2015/03/Amazing-night-sky.jpg") center top no-repeat fixed;
}
::-webkit-scrollbar
{
background: transparent;
width: 10px;
}
Jsfiddle:
https://jsfiddle.net/bc9Lc5rj/
Based on the example found here, it should be possible:
html {
overflow: auto;
}
body {
position: absolute;
top: 0;
bottom: 0;
overflow-y: auto;
background: #FF0000;
}
::-webkit-scrollbar,
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece {
background: transparent;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
background: #FFF;
}
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at pharetra massa, vel molestie lectus. Vivamus vehicula tempor arcu ac fringilla. Mauris varius vel nibh quis vehicula. Duis scelerisque suscipit feugiat. Cras ornare dolor nibh, vel suscipit
eros volutpat eget. Phasellus id nisl mi. Donec laoreet ipsum ac tortor dapibus lobortis. Morbi dictum, arcu egestas dictum porta, eros ex rutrum ex, a rhoncus dui sapien vel orci. Morbi id ornare justo. Proin a blandit tortor. Praesent et ultricies
diam, et lacinia odio. Morbi metus risus, auctor sit amet semper vel, interdum ut elit. Donec consequat interdum purus. Donec iaculis pellentesque lorem vitae malesuada. Aliquam sed ullamcorper elit. In mattis neque eu leo ullamcorper sodales. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse id urna nec orci rhoncus cursus. Pellentesque pulvinar orci eget metus aliquam, vel rutrum erat maximus. Nullam pharetra mi dui, sed ullamcorper orci
tristique vel. Curabitur ut eleifend orci. Pellentesque nec ipsum ut ipsum cursus consectetur. Nunc eu mattis ante, ac scelerisque lacus. Sed in venenatis mauris. Integer sodales libero et ante pellentesque lacinia. Duis iaculis feugiat nunc, in malesuada
turpis faucibus vel. Cras congue ornare nulla non tincidunt. Donec sed commodo felis. Proin dignissim blandit tellus, id sagittis turpis fermentum quis. Integer lacus quam, finibus nec posuere et, sagittis eget purus. Sed et dolor venenatis, pulvinar
ante sed, suscipit magna. Morbi nec auctor magna, id elementum ipsum. Morbi quis ligula libero. Suspendisse in mi eget enim finibus blandit. Praesent lobortis massa nec est tristique pharetra. Praesent pellentesque, metus non congue varius, diam enim
gravida nisi, ut ultrices eros nulla et nisi. Maecenas molestie sit amet ex sit amet feugiat. Maecenas sodales augue eget est scelerisque, id tincidunt velit rhoncus. Quisque ut fermentum risus, eget posuere nulla. Morbi accumsan orci quis pretium
dictum. Fusce ornare lectus dui, et laoreet nulla mattis posuere. Aliquam maximus gravida finibus. Duis posuere metus eros, ultrices euismod odio posuere sed. Quisque tempus tortor nec facilisis facilisis. Sed arcu elit, bibendum vitae tincidunt id,
auctor quis justo. Nam auctor quam a pretium accumsan. Sed ornare, nisl a posuere lacinia, erat eros pulvinar orci, vitae congue lorem ligula sed justo. Vestibulum pulvinar velit ut molestie tristique. Quisque feugiat purus nisl. Sed pharetra nec
metus vel sollicitudin. Vestibulum tempor ipsum et mauris interdum, quis imperdiet nisl semper.
</p>
</body>
I personally would recommend using a jQuery or javascript plugin for this sort of thing. My reason being... browser support! Why should webkit browsers get all the fun stuff?
I've used this plugin a few times http://jscrollpane.kelvinluck.com. It works pretty well. There are a ton out there.
All you need to do is install the plugin and initialize it.
$('.container').jScrollPane();
Hope this helps!
Related
This question already has answers here:
Fill remaining vertical space with CSS using display:flex
(6 answers)
Closed 1 year ago.
Say we have a div with two children divs:
<div id="parent" style=height:"100%">
<div id="mainbody"></div>
<div id="footer"></div>
</div>
I want the footer div to be pinned at the bottom of the screen, and mainbody top be on top. There may be a lot of vertical content in mainbody, so I want the scroll bar to only show in the mainbody div. Here is a crudely drawn example:
https://imgur.com/a/lNyOZme
How can I achieve this?
You can achieve this layout pretty easily with flexbox and a bit of height calculations.
body {
margin: 0;
}
main {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}
section {
background: ivory;
padding: 2rem;
overflow-y: scroll;
height: calc(100% - 50px);
}
footer {
height: 50px;
background: royalblue;
color: white;
padding: 1rem;
}
footer p {
text-align: center;
}
<main>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae mauris commodo velit cursus maximus. Vivamus congue, massa sit amet egestas tempus, nisl arcu vestibulum diam, auctor porta ligula ligula aliquam dolor. Aliquam tincidunt ligula id arcu eleifend, ut viverra neque faucibus. Sed a augue arcu. Sed mattis neque sit amet elit maximus, eget suscipit felis tristique. Sed in tincidunt ipsum. Nulla lectus magna, eleifend eget risus vel, blandit euismod leo. Vivamus egestas, libero sit amet vulputate volutpat, justo massa venenatis libero, quis consectetur ante erat vitae magna. Nullam dictum luctus purus non porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<p>
Nullam vehicula ullamcorper convallis. Nunc non metus scelerisque, fringilla nisl nec, vulputate libero. Fusce mattis, enim in laoreet pretium, sapien nisi pellentesque felis, non pellentesque felis justo non est. Duis mollis euismod diam, vitae suscipit orci laoreet eu. Ut pulvinar iaculis massa ut mollis. Nunc a elementum velit. Nam porttitor turpis sit amet enim tempor cursus. Duis tempus lectus nibh, quis luctus neque euismod vel. Vivamus porta sem sed ante ultricies, a pretium mi fringilla. Sed interdum elit mi, a scelerisque quam accumsan eu. Phasellus non nulla fringilla, ultrices magna ut, accumsan orci. Curabitur bibendum nisi quis felis eleifend, ut feugiat mauris elementum. Pellentesque tempor eu sem vestibulum laoreet. Etiam ut vestibulum est, eu placerat tellus. Vivamus ac feugiat metus. In hac habitasse platea dictumst.
</p>
<p>
Suspendisse in urna ac erat vestibulum porttitor eget et massa. Integer faucibus ligula sem, eu consectetur leo pellentesque in. Phasellus faucibus turpis non turpis rhoncus ornare. Maecenas nec feugiat erat. Maecenas nec velit tempus, blandit tellus ac, ullamcorper nisi. Etiam ullamcorper nisi id hendrerit tristique. Nullam neque tellus, tincidunt sed congue quis, finibus non nunc. Aliquam vel mauris ante. Aliquam erat volutpat. Integer condimentum, odio in tincidunt sagittis, felis nulla auctor dolor, a malesuada magna nibh quis lectus.
</p>
<p>
Phasellus condimentum augue sit amet erat scelerisque cursus. Sed eget egestas leo, eu placerat eros. Suspendisse potenti. Maecenas varius vestibulum libero, a ullamcorper nisl convallis vel. Donec a ligula id nibh porttitor consequat. Quisque sodales, diam eget finibus dignissim, dui libero fermentum arcu, eget finibus felis orci eu erat. Nullam eleifend sem vitae nulla convallis varius. Suspendisse posuere neque pulvinar consequat faucibus. Mauris quis mauris eu turpis feugiat vestibulum. Etiam laoreet quam ipsum, mollis iaculis neque laoreet et. Quisque volutpat nisl ut sapien tempus, sed vestibulum mauris pharetra. Cras lacinia in arcu eget vestibulum. Maecenas non suscipit velit.
<p>
Praesent convallis fringilla mauris ut tincidunt. Vivamus aliquet ac magna at vehicula. Proin sapien lacus, malesuada id risus vitae, faucibus eleifend sem. Vestibulum nibh elit, dignissim nec augue a, finibus tempus mauris. Donec sed pharetra elit, a imperdiet ipsum. Nullam et est sed risus rutrum finibus. Suspendisse sit amet sem ut quam dignissim rutrum in in odio. Aliquam a lorem orci. Pellentesque varius faucibus ultricies. Cras et pulvinar diam. Praesent id pretium tellus. Donec nec turpis massa. Vivamus ac diam pharetra, accumsan elit vel, efficitur dui. Duis sollicitudin orci nisl, sed gravida urna sagittis vitae.</p>
</section>
<footer>
<p>
footer content
</p>
</footer>
</main>
Assigning a height to the bottom div won't always guarantee you that it'll be placed at the bottom. I'd recommend to simply make use of position property in css. The code below will work with any height you'll assign to your parent container -
#footer{
position: absolute;
bottom: 0px;
}
P.S. - In case the main body is not that big that it doesn't occupy the whole screen and you still want your footer to be at bottom, assign this height: 100vh to your parent container and use the same above code. It should look like this:
#parent{
height: 100vh;
}
#footer{
position: absolute;
bottom: 0px;
}
I took this image from another post on here: https://i.imgur.com/cx3jXPu.jpg
I want the sidebar to have 100% height even when the sidebar items don't fit the height of the div
I've done float: left to the sidebar, so the content of the page that is more than the height of the sidebar is coming under the sidebar. Like this:https://imgur.com/a/7yyJU
So, basically, I want the sidebar to extend to the height of the page without having content underneath it if that makes sense.
Here is an approach, where you can just fix the sidebar to the window using the CSS property position:fixed, this will set its position relative to the browser window, by setting top:0px;bottom:0px;left:0px it will be sticking to the left window and it will be full height always. Then we need to add a margin of 210px to offset the content of the website so that it does not overlap the sidebar.
Note: I have used and additional CSS property called box-sizing: border-box, what this CSS property does is, it includes the border and padding of the element into the total height of the element, this is used because without it the border will cause a scrollbar when there is no content.
Let me know if the above code fixes your issue!
html,
body {
margin: 0px;
height: auto;
width: 100%;
}
.sidebar {
width: 200px;
float: left;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
border: 1px solid black;
box-sizing: border-box;
}
.content {
margin-left: 210px;
}
<div class="sidebar">this is the fixed sidebar</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et condimentum nibh. Aenean eu orci aliquam, consequat ipsum at, blandit eros. Duis commodo tincidunt ligula. Suspendisse pellentesque erat risus, pulvinar convallis ligula congue non.
Nam sit amet tempus nisl. In malesuada at augue vel mattis. Sed luctus eu neque in dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin pharetra tellus eu convallis suscipit. Mauris sit amet ultrices
urna. Duis lectus nisl, luctus eu ultrices quis, scelerisque id lacus. Donec suscipit lacus sit amet accumsan consequat. Donec vitae sagittis risus. Sed at ante at sapien placerat laoreet a a leo. Integer tincidunt ut quam ornare luctus. Suspendisse
sodales, ex quis congue laoreet, lacus tortor tristique metus, vitae tempus ipsum augue vitae lectus. Donec pharetra et metus at ultricies. Aliquam tempus gravida tortor. Mauris non finibus erat. Nam sed scelerisque metus. In pulvinar, lacus in placerat
placerat, enim dolor porta magna, sed maximus enim felis nec tortor. Nunc elementum purus at justo dictum, quis mollis tellus vulputate. Maecenas sagittis placerat orci ac placerat. Nunc convallis sit amet nisi non imperdiet. Integer dictum ipsum nec
nibh dapibus, ut consectetur mi hendrerit. Donec euismod, felis in luctus malesuada, est purus varius sapien, ut rhoncus mauris est a eros. Proin id metus eu quam aliquet pharetra. Nullam tincidunt ligula vel ligula consectetur eleifend. Proin non posuere
libero. Etiam eu iaculis ex. Curabitur sit amet nibh interdum, elementum velit dictum, elementum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed bibendum sapien at imperdiet dictum. Phasellus congue
et dui vel ultrices. Quisque felis risus, malesuada ac scelerisque et, vestibulum nec leo. Aenean eget enim vestibulum, vulputate dolor eu, scelerisque libero. In ut venenatis ligula, a vulputate eros. Maecenas eget convallis diam, non condimentum arcu.
Mauris vitae velit in magna facilisis semper ut at lectus. Praesent tempor lorem nisl, eget finibus lorem lacinia id. Cras ac vulputate dui, sit amet pellentesque ante. Vestibulum mollis ante nec purus faucibus, ut mattis magna gravida. Aenean commodo
velit non lorem hendrerit maximus. Sed nec urna convallis, mattis dolor eget, accumsan quam. Donec luctus, ante consectetur egestas aliquam, turpis turpis posuere enim, in convallis nunc massa et arcu. Fusce lobortis sapien orci, eu mollis sapien sollicitudin
a. Ut semper iaculis malesuada. Fusce tincidunt lacinia justo quis faucibus. Aenean rutrum ex elit, in faucibus eros ultrices ut. Integer eu sagittis leo, et accumsan est. Aenean vel varius diam. Maecenas id tortor viverra, tristique massa non, consectetur
velit. Pellentesque condimentum elit sed urna porta sollicitudin. Donec ultricies pellentesque diam, in mollis risus consequat eget. Donec a consectetur velit. Integer lobortis efficitur ante, eu sagittis nisl tincidunt et. Donec a neque scelerisque,
pellentesque dui sed, feugiat tortor.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et condimentum nibh. Aenean eu orci aliquam, consequat ipsum at, blandit eros. Duis commodo tincidunt ligula. Suspendisse pellentesque erat risus,
pulvinar convallis ligula congue non. Nam sit amet tempus nisl. In malesuada at augue vel mattis. Sed luctus eu neque in dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin pharetra tellus eu convallis
suscipit. Mauris sit amet ultrices urna. Duis lectus nisl, luctus eu ultrices quis, scelerisque id lacus. Donec suscipit lacus sit amet accumsan consequat. Donec vitae sagittis risus. Sed at ante at sapien placerat laoreet a a leo. Integer tincidunt
ut quam ornare luctus. Suspendisse sodales, ex quis congue laoreet, lacus tortor tristique metus, vitae tempus ipsum augue vitae lectus. Donec pharetra et metus at ultricies. Aliquam tempus gravida tortor. Mauris non finibus erat. Nam sed scelerisque
metus. In pulvinar, lacus in placerat placerat, enim dolor porta magna, sed maximus enim felis nec tortor. Nunc elementum purus at justo dictum, quis mollis tellus vulputate. Maecenas sagittis placerat orci ac placerat. Nunc convallis sit amet nisi
non imperdiet. Integer dictum ipsum nec nibh dapibus, ut consectetur mi hendrerit. Donec euismod, felis in luctus malesuada, est purus varius sapien, ut rhoncus mauris est a eros. Proin id metus eu quam aliquet pharetra. Nullam tincidunt ligula vel
ligula consectetur eleifend. Proin non posuere libero. Etiam eu iaculis ex. Curabitur sit amet nibh interdum, elementum velit dictum, elementum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed bibendum
sapien at imperdiet dictum. Phasellus congue et dui vel ultrices. Quisque felis risus, malesuada ac scelerisque et, vestibulum nec leo. Aenean eget enim vestibulum, vulputate dolor eu, scelerisque libero. In ut venenatis ligula, a vulputate eros. Maecenas
eget convallis diam, non condimentum arcu. Mauris vitae velit in magna facilisis semper ut at lectus. Praesent tempor lorem nisl, eget finibus lorem lacinia id. Cras ac vulputate dui, sit amet pellentesque ante. Vestibulum mollis ante nec purus faucibus,
ut mattis magna gravida. Aenean commodo velit non lorem hendrerit maximus. Sed nec urna convallis, mattis dolor eget, accumsan quam. Donec luctus, ante consectetur egestas aliquam, turpis turpis posuere enim, in convallis nunc massa et arcu. Fusce lobortis
sapien orci, eu mollis sapien sollicitudin a. Ut semper iaculis malesuada. Fusce tincidunt lacinia justo quis faucibus. Aenean rutrum ex elit, in faucibus eros ultrices ut. Integer eu sagittis leo, et accumsan est. Aenean vel varius diam. Maecenas id
tortor viverra, tristique massa non, consectetur velit. Pellentesque condimentum elit sed urna porta sollicitudin. Donec ultricies pellentesque diam, in mollis risus consequat eget. Donec a consectetur velit. Integer lobortis efficitur ante, eu sagittis
nisl tincidunt et. Donec a neque scelerisque, pellentesque dui sed, feugiat tortor.
</div>
give both the div float left and specific width.
And give them min-height: 100vh
Usually the sticky footer is not an issue for me but today it's a bit frustrating. I've tried various resources on here as well as just searching and I cannot figure out what is wrong with my footer. If anyone can help me figure this out that would be very much appreciated! Thank you!
html {
height: 100%;
}
body {
background: url('footer_lodyas.png') fixed;
font-family: 'Sahitya', serif;
max-width: 100%;
margin: 0 auto 0 auto;
overflow-x: hidden;
height: 100%;
}
.all {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#footer_links {
position: relative;
width: 100%;
text-align: center;
background: #1FA0A3;
font-size: 16px;
font-size: 1.6rem;
border-top: none;
padding: 20px;
}
<body>
<div class="all">
<div class="wrapall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus
venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis
id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta. Integer semper condimentum tellus ac accumsan. Integer scelerisque,
diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec
tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien
suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus. Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur
luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis. Vestibulum tristique magna ac lobortis
pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit
et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl. Proin eleifend ac lacus sed venenatis. Vivamus pulvinar
commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla
vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit
arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada
vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.
</p>
<div id="footer_links"></div>
</div>
</div>
</body>
Try putting your footer div outside .all and .wrapall. Like this: https://jsfiddle.net/fb3uno9s/
html {
height:100%;
}
body{
background: url('footer_lodyas.png') fixed ;
font-family: 'Sahitya', serif;
max-width:100%;
margin: 0 auto 0 auto;
overflow-x: hidden;
height: 100%;
}
.all{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
}
#footer_links {
position: relative;
width: 100%;
text-align: center;
background: #1FA0A3;
font-size: 16px;
font-size: 1.6rem;
border-top: none;
padding:20px;
}
<div class="all">
<div class="wrapall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta.
Integer semper condimentum tellus ac accumsan. Integer scelerisque, diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus.
Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis.
Vestibulum tristique magna ac lobortis pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl.
Proin eleifend ac lacus sed venenatis. Vivamus pulvinar commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.
</p>
</div>
</div>
<div id="footer_links"></div>
You can use display: flex; to achieve sticky footer. I can't see any efforts for getting sticky footer in your code.
.wrapall {
display: flex;
flex-direction: column;
height: 100%;
}
.wrapall p {
flex: 1;
}
html {
height: 100%;
}
body {
background: url('footer_lodyas.png') fixed;
font-family: 'Sahitya', serif;
max-width: 100%;
margin: 0 auto 0 auto;
overflow-x: hidden;
height: 100%;
}
.all {
min-height: 100%;
height: 100%;
margin: 0 auto;
}
.wrapall {
display: flex;
flex-direction: column;
height: 100%;
}
.wrapall p {
flex: 1;
}
#footer_links {
position: relative;
width: 100%;
text-align: center;
background: #1FA0A3;
font-size: 16px;
font-size: 1.6rem;
border-top: none;
padding: 20px;
}
<body>
<div class="all">
<div class="wrapall">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed tortor vitae est tincidunt dignissim eu id neque. Vivamus blandit, ex et maximus ullamcorper, ligula diam cursus risus, a fringilla elit odio et dolor. Etiam vestibulum lorem ut tellus
venenatis, eget ornare libero dapibus. Vestibulum ut eros in elit finibus elementum. Fusce egestas ornare massa. Proin ut egestas metus. Sed mollis pulvinar ipsum. Nullam et quam nunc. Aenean porttitor nulla eros, non sagittis magna convallis
id. Sed sollicitudin dui ac semper euismod. Curabitur volutpat mollis ante sit amet suscipit. Etiam eget massa pharetra, interdum turpis non, rhoncus augue. Morbi malesuada rutrum porta. Integer semper condimentum tellus ac accumsan. Integer scelerisque,
diam et placerat gravida, justo erat maximus urna, sed tristique metus risus sed eros. Donec quis tempus tellus. Donec malesuada lectus eu libero ultrices, at placerat nulla mattis. Sed sollicitudin est nec egestas placerat. Donec non enim nec
tortor tincidunt feugiat. Suspendisse id elit est. In at tincidunt ipsum, eu rutrum enim. Nulla facilisi. Suspendisse malesuada, odio et dapibus euismod, nunc mi finibus lorem, quis ornare dui turpis convallis sem. Cras luctus facilisis sapien
suscipit ullamcorper. Nullam massa metus, tempor non dui sed, efficitur aliquet nunc. Donec ullamcorper sagittis nulla et tempus. Phasellus sollicitudin mollis interdum. Fusce eu massa sapien. Vivamus id turpis sed dolor porttitor molestie. Curabitur
luctus ex porta ligula lobortis, non aliquet purus egestas. Aenean nibh tortor, auctor sed libero sed, auctor semper purus. Nullam porttitor vulputate orci ut euismod. Ut accumsan nisl ut nulla suscipit iaculis. Vestibulum tristique magna ac lobortis
pharetra. Pellentesque hendrerit eros nec nisi rutrum porta. Sed dolor orci, ornare sit amet viverra tempor, ultricies at mi. Praesent congue dapibus massa, eget tempor nisl porta quis. Integer dignissim iaculis eros eu aliquam. Cras luctus, velit
et pulvinar volutpat, urna ligula lacinia sem, malesuada pretium lorem lorem interdum enim. Quisque volutpat, diam non pharetra volutpat, odio leo iaculis odio, nec mollis leo enim in nisl. Proin eleifend ac lacus sed venenatis. Vivamus pulvinar
commodo tellus a maximus. Phasellus ut magna odio. Nunc ac lectus ac est tincidunt ornare non at turpis. Sed sagittis neque at rhoncus rutrum. Donec volutpat erat vitae turpis mattis maximus. Cras finibus, massa nec tincidunt suscipit, enim nulla
vehicula augue, ut lobortis dolor lacus quis diam. Suspendisse in congue nisl, vitae semper diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec varius felis eget leo egestas, ut vehicula ex dignissim.
Nam aliquet quis neque et venenatis. Praesent aliquam nisl vulputate, semper lacus ac, tristique sapien. Praesent vel lacinia libero. Morbi leo metus, dictum id ante in, fringilla consectetur elit. Donec eleifend nibh et elit pretium, non hendrerit
arcu accumsan. Proin vehicula felis a augue convallis, quis rhoncus lacus molestie. Quisque a suscipit purus. Aliquam et tellus vel libero imperdiet mattis at sit amet magna. Morbi porta a eros ut cursus. Vivamus ornare dolor nec lectus malesuada
vestibulum. Sed fermentum ligula vel turpis fermentum posuere. Duis cursus interdum nulla in pharetra. Sed at sodales eros, vel semper dolor. Vestibulum sit amet dui erat. Aliquam non vehicula ante. Etiam dapibus felis ut maximus rhoncus.
</p>
<div id="footer_links">
</div>
</div>
</div>
</body>
Try this: use vh - viewport height
.wrapall {
height: 100vh;
position: relative;
}
#footer_links {
background: #1fa0a3 none repeat scroll 0 0;
border-top: medium none;
bottom: 0;
font-size: 1.6rem;
padding: 20px;
position: absolute;
text-align: center;
width: 100%;
}
For some reason when I put content in my "slanted" div containers, the containers aren't growing from the content. I never defined a height so I assumed it would grow with the content.
Does anyone know why this would be happening?
Here is a codepen
HTML
<section class="slant-container">
<div class="slanted first" style="background-color:#2ecc71;">
<div class="unslant">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec nisl arcu. Quisque sed aliquet nisl. Aliquam varius maximus tellus a luctus. Pellentesque malesuada purus vestibulum iaculis tristique. Aliquam eu placerat nulla. In quis lorem in lectus dapibus pretium in non dolor. Proin quis ex rhoncus, bibendum tellus sed, ullamcorper mi. Pellentesque id libero sed mi dignissim iaculis sit amet ac nulla. Fusce gravida risus vitae leo cursus mattis. Pellentesque rhoncus velit vitae lacus hendrerit consectetur. Nulla maximus, lacus nec vestibulum pharetra, massa odio eleifend eros, non pellentesque lectus lectus id eros. Pellentesque id tellus tellus. Integer posuere ligula non mi mollis dapibus. In convallis lorem viverra urna molestie, eget sodales neque fringilla. Sed odio dolor, tincidunt pellentesque congue non, condimentum vitae libero. Praesent ullamcorper efficitur dui, vitae vestibulum nisl ornare id.
Ut laoreet efficitur maximus. Sed cursus, leo at tempor cursus, lectus metus facilisis metus, eu rhoncus magna elit at nulla. Proin sed nulla dolor. Sed non tortor ut tortor dignissim eleifend. Etiam nec egestas lacus. Sed commodo orci a tincidunt imperdiet. Vivamus non ornare tellus, sollicitudin feugiat dolor. Phasellus faucibus massa at diam convallis, quis condimentum nibh rhoncus. Morbi tortor tellus, iaculis ac fermentum vel, fringilla eu dolor. Nam vitae libero lectus. Integer nunc augue, egestas a ullamcorper vel, convallis ut lacus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce imperdiet rutrum mauris at fringilla. Nunc lacinia volutpat elit.
Fusce a faucibus neque. Curabitur malesuada urna eu elit egestas, et porta metus cursus. Aenean dignissim condimentum ultricies. Praesent a nisl velit. Vestibulum convallis lorem nec magna pellentesque, ultricies eleifend felis gravida. Morbi dictum dolor eget ex lacinia, sit amet condimentum felis bibendum. Phasellus quis ante eget dolor hendrerit cursus. Integer urna mi, auctor tempor urna a, varius varius justo. Nunc cursus eu neque vitae varius. Nullam tristique convallis blandit.
Donec eget elit iaculis, ultricies nibh sed, tempus sem. Nam ac erat sit amet ligula facilisis ullamcorper ac eu lectus. Aenean hendrerit enim in arcu maximus accumsan et auctor neque. Nunc lorem justo, congue eget ullamcorper malesuada, tincidunt sed ligula. Sed ut ultrices dolor. Donec et tristique lacus. Vivamus sodales euismod fermentum. In enim nibh, imperdiet non posuere at, tristique sit amet sapien. Suspendisse id congue mauris, sagittis pretium sapien. Ut vitae nunc in nisl convallis fermentum. Pellentesque sed aliquet sapien. Vestibulum fringilla, ex eget finibus ultricies, nisi massa rhoncus ex, sed dignissim sapien velit et diam. Morbi ut porta purus. Integer volutpat ante dictum, lobortis ante id, ultricies dolor. Quisque blandit, augue eu vestibulum feugiat, massa tellus dapibus erat, vel ullamcorper magna lorem eu leo.
</div>
</div>
<div class="slanted" style="background-color:#3498db;"></div>
<div class="slanted" style="background-color:#f39c12;"></div>
</div>
<footer></footer>
CSS
* {
margin: 0;
height: 0;
}
.first {
margin-top: -45px;
}
.slanted {
/* height: 300px; */
-webkit-transform: skewy(-3deg);
transform: skewy(-3deg);
padding:75px 25px;
}
.unslant {
-webkit-transform: skewy(3deg);
transform: skewy(3deg);
}
footer {
position: relative;
margin-top: -45px;
height: 150px;
background-color: #bdc3c7;
}
I have a responsive design layout that I am building. In a paragraph tag I have Lorem ipsum. Everything on my responsive design is working as expected except for the fact that when I shrink the box so it satisfies the media query of a max-width of 580px the text overflow: ellipsis doesn't work.
Below is my code:
HTML:
<p id="maincontent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non sapien lobortis enim suscipit convallis a eget mi. Duis vitae augue lacus. Donec molestie enim sit amet sollicitudin suscipit. In ac commodo sem, sit amet iaculis neque. Mauris at mi convallis tellus euismod tristique. Aenean et felis sodales, tempor nunc molestie, dictum libero. Praesent et placerat massa. Pellentesque semper tempus maximus. Duis sit amet ornare dolor. Donec pretium tellus et efficitur gravida. Nam vestibulum tellus a nunc egestas tristique. Donec pellentesque id sapien at molestie.Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eu enim ipsum. Sed sem enim, semper ac imperdiet a, aliquam in elit. Nullam et commodo massa. Donec tincidunt nulla a lectus imperdiet auctor. Duis sodales eu purus ut lobortis. Donec magna metus, ultricies at nulla ut, congue sollicitudin dui. Aenean scelerisque consectetur elementum. Fusce quis ligula sem. Nunc tincidunt aliquam nisl, sit amet egestas nulla molestie quis.Proin dignissim condimentum erat, eget hendrerit justo rhoncus non. Curabitur et metus velit. Morbi massa massa, lacinia in cursus ac, tincidunt eu metus. Vestibulum gravida dui sed purus aliquet interdum. Nunc eget maximus augue. Mauris non malesuada est. Phasellus maximus varius libero, non facilisis dui bibendum sed. Integer congue est a erat egestas mollis. In sed egestas risus, ac viverra mauris. Pellentesque in mi nec diam ullamcorper ullamcorper in in sem. Aenean lacinia consequat erat, eget auctor augue efficitur in. Etiam a justo quam.Nullam vestibulum iaculis purus sagittis vestibulum. Cras tristique varius est, a consequat nulla interdum id. Nam vitae convallis ipsum. Proin eu odio rhoncus, hendrerit odio id, ornare risus. Aliquam feugiat, velit et sagittis lacinia, nulla est viverra diam, eget euismod mauris nunc ac nibh. Integer pulvinar interdum urna, ut consequat sem varius id. Quisque aliquet ipsum quis leo fringilla, gravida aliquam libero fermentum. Integer tincidunt ut odio at tristique. Fusce in elementum nisl. Etiam pulvinar aliquet lacus a dapibus. Curabitur condimentum mattis nibh. Aliquam erat volutpat. Mauris elementum nisi turpis, vitae mattis purus luctus sit amet. Mauris sit amet fermentum nisi. Vivamus iaculis rhoncus lacus.Ut maximus augue in tellus elementum, eget efficitur sem scelerisque. Nam nec augue fermentum, mattis ligula quis, efficitur lacus. Suspendisse posuere libero eu eros tincidunt, ac egestas urna maximus. Sed eget nibh quis ligula semper dapibus. Aliquam ac iaculis lacus. Sed eu mollis elit. Morbi rhoncus eu ante eget consequat. Nam finibus enim ex, ac scelerisque lacus tempor vitae. Ut sagittis convallis sollicitudin. Duis fringilla ipsum orci, a tempor urna euismod laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras cursus libero metus, sed dignissim nisl maximus vitae. Morbi a est a nisl finibus ornare eu vel libero. Praesent eget ligula porta, aliquet eros ut, vestibulum nisi.</p>
CSS3:
#media screen and (max-width: 580px){
nav ul{
max-height: 0;
}
p#maincontent{
overflow: hidden;
text-overflow: ellipsis;
}
.showing {
max-height: 100%;
}
nav ul li {
box-sizing: border-box;
width: 100%;
padding: 15px;
}
#maincontent{
font-size: 80%;
}
.handle {
display: block;
}
}
Please let me know if I am doing something wrong.
try white-space: nowrap;
p#maincontent{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}