So i'm trying to make a dropdown menu. I want its css height to
Auto grow based on the list items inside
Have a max height of 500px
ALSO have a max height of 80vh (so it would shrink below 500px if required)
Is this possible to achieve with CSS?
div {
height: auto;
max-height: 80vh;
/** Right now only rule below applies, the one above is ignored */
/** Swapping them doesn't help. I want it to be the minimum of 80vh and 500px */
max-height: 500px;
border: 1px solid red;
overflow: hidden;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh cras pulvinar mattis nunc. Aenean pharetra magna ac placerat vestibulum. Est sit amet facilisis magna. Dictum varius duis at consectetur lorem. Mauris vitae ultricies leo integer malesuada nunc vel. Netus et malesuada fames ac turpis. Integer feugiat scelerisque varius morbi enim nunc faucibus. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Eget dolor morbi non arcu risus quis. In nibh mauris cursus mattis molestie a iaculis. Velit egestas dui id ornare arcu odio ut sem. Donec et odio pellentesque diam volutpat commodo.</p>
<p>Porta lorem mollis aliquam ut porttitor leo a. Ante metus dictum at tempor commodo. Eu scelerisque felis imperdiet proin fermentum leo vel orci. Cursus risus at ultrices mi. Tortor at auctor urna nunc id cursus metus aliquam. Ultricies mi eget mauris pharetra. Nisl nisi scelerisque eu ultrices vitae. Condimentum vitae sapien pellentesque habitant morbi. Integer eget aliquet nibh praesent tristique magna sit amet. Senectus et netus et malesuada fames. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Commodo sed egestas egestas fringilla phasellus faucibus. Dui ut ornare lectus sit amet est. A iaculis at erat pellentesque. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Purus in massa tempor nec feugiat nisl pretium fusce id. Facilisis sed odio morbi quis commodo odio aenean. Ut porttitor leo a diam sollicitudin. Aliquet sagittis id consectetur purus ut.</p>
<p>Ridiculus mus mauris vitae ultricies leo. Ut lectus arcu bibendum at varius vel pharetra. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Dui vivamus arcu felis bibendum ut tristique et. Eget dolor morbi non arcu risus quis varius quam. Non enim praesent elementum facilisis leo vel fringilla est ullamcorper. Aliquam malesuada bibendum arcu vitae elementum. Viverra accumsan in nisl nisi. Metus aliquam eleifend mi in nulla posuere. Non nisi est sit amet facilisis magna etiam tempor. Quisque id diam vel quam elementum pulvinar. Ipsum consequat nisl vel pretium lectus quam id leo in. Faucibus scelerisque eleifend donec pretium vulputate. Viverra justo nec ultrices dui sapien eget mi. Vivamus at augue eget arcu dictum. Ultrices gravida dictum fusce ut placerat orci. In fermentum et sollicitudin ac orci. Ornare arcu odio ut sem. Sed risus ultricies tristique nulla.</p>
<p>Pellentesque massa placerat duis ultricies. Tortor id aliquet lectus proin nibh nisl condimentum id. In nisl nisi scelerisque eu ultrices vitae auctor. Tortor consequat id porta nibh venenatis. Vulputate ut pharetra sit amet aliquam. Non curabitur gravida arcu ac tortor dignissim convallis aenean et. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Pharetra massa massa ultricies mi quis. Nec tincidunt praesent semper feugiat. Et malesuada fames ac turpis. Ac tortor dignissim convallis aenean et tortor at. </p>
<p>Justo nec ultrices dui sapien eget. Orci dapibus ultrices in iaculis nunc sed. Amet mauris commodo quis imperdiet massa. Egestas erat imperdiet sed euismod nisi porta lorem. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Morbi tristique senectus et netus et malesuada fames. Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Pellentesque sit amet porttitor eget dolor morbi non arcu. Sollicitudin nibh sit amet commodo nulla. Convallis posuere morbi leo urna molestie at elementum eu facilisis.<p>
</div>
Use CSS's min function. Maximize this example and resize the window to see it in action.
max-height: calc(min(500px, 80vh))
div {
height: auto;
max-height: calc(min(80vh, 500px));
border: 1px solid red;
overflow: hidden;
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh cras pulvinar mattis nunc. Aenean pharetra magna ac placerat vestibulum. Est sit amet facilisis magna. Dictum varius duis at consectetur lorem. Mauris vitae ultricies leo integer malesuada nunc vel. Netus et malesuada fames ac turpis. Integer feugiat scelerisque varius morbi enim nunc faucibus. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Eget dolor morbi non arcu risus quis. In nibh mauris cursus mattis molestie a iaculis. Velit egestas dui id ornare arcu odio ut sem. Donec et odio pellentesque diam volutpat commodo.</p>
<p>Porta lorem mollis aliquam ut porttitor leo a. Ante metus dictum at tempor commodo. Eu scelerisque felis imperdiet proin fermentum leo vel orci. Cursus risus at ultrices mi. Tortor at auctor urna nunc id cursus metus aliquam. Ultricies mi eget mauris pharetra. Nisl nisi scelerisque eu ultrices vitae. Condimentum vitae sapien pellentesque habitant morbi. Integer eget aliquet nibh praesent tristique magna sit amet. Senectus et netus et malesuada fames. Condimentum mattis pellentesque id nibh tortor id aliquet lectus proin. Commodo sed egestas egestas fringilla phasellus faucibus. Dui ut ornare lectus sit amet est. A iaculis at erat pellentesque. Imperdiet proin fermentum leo vel orci porta non pulvinar neque. Purus in massa tempor nec feugiat nisl pretium fusce id. Facilisis sed odio morbi quis commodo odio aenean. Ut porttitor leo a diam sollicitudin. Aliquet sagittis id consectetur purus ut.</p>
<p>Ridiculus mus mauris vitae ultricies leo. Ut lectus arcu bibendum at varius vel pharetra. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. Dui vivamus arcu felis bibendum ut tristique et. Eget dolor morbi non arcu risus quis varius quam. Non enim praesent elementum facilisis leo vel fringilla est ullamcorper. Aliquam malesuada bibendum arcu vitae elementum. Viverra accumsan in nisl nisi. Metus aliquam eleifend mi in nulla posuere. Non nisi est sit amet facilisis magna etiam tempor. Quisque id diam vel quam elementum pulvinar. Ipsum consequat nisl vel pretium lectus quam id leo in. Faucibus scelerisque eleifend donec pretium vulputate. Viverra justo nec ultrices dui sapien eget mi. Vivamus at augue eget arcu dictum. Ultrices gravida dictum fusce ut placerat orci. In fermentum et sollicitudin ac orci. Ornare arcu odio ut sem. Sed risus ultricies tristique nulla.</p>
<p>Pellentesque massa placerat duis ultricies. Tortor id aliquet lectus proin nibh nisl condimentum id. In nisl nisi scelerisque eu ultrices vitae auctor. Tortor consequat id porta nibh venenatis. Vulputate ut pharetra sit amet aliquam. Non curabitur gravida arcu ac tortor dignissim convallis aenean et. Sed euismod nisi porta lorem mollis aliquam ut porttitor. Pharetra massa massa ultricies mi quis. Nec tincidunt praesent semper feugiat. Et malesuada fames ac turpis. Ac tortor dignissim convallis aenean et tortor at. </p>
<p>Justo nec ultrices dui sapien eget. Orci dapibus ultrices in iaculis nunc sed. Amet mauris commodo quis imperdiet massa. Egestas erat imperdiet sed euismod nisi porta lorem. Adipiscing elit duis tristique sollicitudin nibh sit amet commodo. Morbi tristique senectus et netus et malesuada fames. Ornare suspendisse sed nisi lacus sed viverra tellus in hac. Pellentesque sit amet porttitor eget dolor morbi non arcu. Sollicitudin nibh sit amet commodo nulla. Convallis posuere morbi leo urna molestie at elementum eu facilisis.<p>
</div>
I'm making a page with some text, but I want to insert an image to the right of the text. I managed to make the text wrap around the image, but it seems I cannot move the image except right and left of the text. I would like to move vertically the image.
And here is my code for the image:
img {
width: 20%;
height: auto;
margin: 10px;
}
#test {
float: right;
}
<img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png" />
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur
lorem. Nam condimentum neque in tempor sollicitudin. Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque
varius dapibus mi. Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo. Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor. Aliquam a dolor
ac massa tempus mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl
dapibus non. Morbi urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur
non magna libero. Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus
finibus ornare. Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor
ornare, ultricies magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur. Sed semper lacus
lectus, sagittis rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien.
Suspendisse volutpat vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce
lobortis enim ac nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc,
sagittis eu tempor in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
Could someone help me ?
shape-outside can do it
img {
width: 20%;
height: auto;
margin: 10px;
float: right;
/* use the same value inside margin and shape-outside */
shape-outside: inset(100px 0 0 0);
margin-top: 100px;
}
p {
text-align: justify;
}
<img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur lorem. Nam condimentum
neque in tempor sollicitudin. Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque varius dapibus mi.
Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo. Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor. Aliquam a dolor ac massa tempus
mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl dapibus non. Morbi
urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur non magna libero.
Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus finibus ornare.
Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor ornare, ultricies
magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur. Sed semper lacus lectus, sagittis
rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien. Suspendisse volutpat
vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce lobortis enim ac
nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc, sagittis eu tempor
in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
You can move the image down, while still keeping it floated right, by positioning it in amongst the text. However, where it exactly appears in relation to the surrounding text depends on the viewport dimensions i.e. how the text can round it.
img {
position: relative;
width: 20%;
height: auto;
margin: 10px;
}
#test {
float: right;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam libero neque, rutrum et pretium ut, venenatis ac turpis. Aenean eget viverra lectus. Proin eu ex id velit venenatis maximus. Integer sed convallis nunc, sed efficitur lorem. Nam condimentum neque in tempor sollicitudin. <img id="test" src="https://assets.justinmind.com/wp-content/uploads/2018/11/Lorem-Ipsum-alternatives.png"/>Proin nunc turpis, bibendum eu fringilla et, vestibulum quis justo. In tempor varius mauris, non fringilla nisi varius sed. Ut nisi tortor, aliquet id odio sit amet, porttitor semper nulla. Pellentesque varius dapibus mi. Cras nec nibh ac lorem varius semper sed a nisl. Phasellus enim velit, mollis vitae pulvinar vitae, tincidunt eget leo.
Vivamus ornare ipsum est, placerat suscipit lorem sagittis eu. Phasellus sit amet pretium dolor.
Aliquam a dolor ac massa tempus mattis. Morbi in velit vitae nibh porttitor sollicitudin. Duis vehicula non neque ut egestas. Aliquam tincidunt eros sed metus euismod condimentum. Integer sit amet rutrum dolor. Pellentesque maximus hendrerit nulla, eget euismod nisl dapibus non.
Morbi urna ante, ornare a nulla eget, faucibus accumsan elit. Etiam pellentesque varius enim, non varius metus vestibulum id. Nunc blandit ex eu diam venenatis ultrices. Aenean nec libero vitae enim volutpat lobortis in vitae dui. Curabitur non magna libero. Sed efficitur semper mauris ultricies facilisis. Nam a sagittis quam. Curabitur facilisis, justo eget aliquam tincidunt, metus lorem elementum mauris, in auctor libero quam eu felis. Sed scelerisque vestibulum lacus, eget rhoncus risus finibus ornare. Vestibulum in velit rutrum, efficitur magna nec, varius eros. Sed id volutpat diam. Sed at massa erat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam venenatis convallis velit, a volutpat nibh pulvinar et. Donec id dolor ornare, ultricies magna at, auctor mauris. Maecenas tincidunt mi diam. Donec tempor nunc nisl, elementum aliquam mi ullamcorper at. Curabitur quis imperdiet massa, in porta dui. Curabitur condimentum mauris in enim aliquet efficitur.
Sed semper lacus lectus, sagittis rhoncus nunc porta et. Nunc mattis neque quis metus efficitur tempor. Phasellus feugiat ullamcorper dui. Proin quis mauris sit amet sem lacinia pellentesque sed et tellus. Vestibulum massa mi, luctus a quam in, mollis pharetra sapien. Suspendisse volutpat vel libero at tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas metus lectus, vehicula porta pellentesque in, maximus sed nunc. Donec pharetra vitae leo sed porttitor. Fusce lobortis enim ac nunc fermentum posuere. Ut quis lobortis turpis, nec lacinia erat. Cras ut dui ut ex placerat blandit. Integer interdum dolor sit amet tempor sollicitudin. In molestie molestie ipsum, in gravida odio fringilla sit amet. Proin mi nunc, sagittis eu tempor in, pellentesque sed nisi. Nullam quis dolor scelerisque, rutrum velit ut, tincidunt mauris.
</p>
I've been playing around with shape-outside and have a sample working here:
http://www.thelionscall.com/wp-content/Temp/wrap-test.html
.element {
shape-outside: url(https://i.ibb.co/44KLGpq/marginalia-susan-transparent.png);
-webkit-shape-outside: url(https://i.ibb.co/44KLGpq/marginalia-susan-transparent.png);
shape-image-threshold: 0.5;
float: right;
height: 300px;
shape-margin: 1em;
}
<body><img class="element" src="https://i.ibb.co/44KLGpq/marginalia-susan-transparent.png">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Sagittis purus sit amet volutpat. Sollicitudin tempor id eu nisl
nunc mi ipsum. Eleifend mi in nulla posuere sollicitudin. Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis. Suscipit tellus mauris a diam maecenas. Congue mauris rhoncus aenean vel elit scelerisque. Hac habitasse platea dictumst
quisque. Semper quis lectus nulla at volutpat. Tincidunt augue interdum velit euismod. Sit amet aliquam id diam maecenas. Sem et tortor consequat id. A erat nam at lectus urna duis convallis convallis tellus. Consectetur lorem donec massa sapien faucibus
et. Vitae proin sagittis nisl rhoncus mattis rhoncus. Ornare aenean euismod elementum nisi quis eleifend. Et netus et malesuada fames. Enim nunc faucibus a pellentesque sit amet porttitor eget. Elit scelerisque mauris pellentesque pulvinar pellentesque
habitant morbi. Viverra adipiscing at in tellus integer feugiat. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Purus viverra accumsan in nisl nisi scelerisque eu. Sit amet luctus venenatis lectus magna fringilla urna.
Malesuada nunc vel risus commodo. Eleifend quam adipiscing vitae proin sagittis nisl. Cras ornare arcu dui vivamus arcu. Sed augue lacus viverra vitae congue eu consequat ac. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Et
egestas quis ipsum suspendisse ultrices gravida dictum fusce. Duis convallis convallis tellus id interdum velit laoreet id donec. Tellus molestie nunc non blandit massa enim nec dui. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida.
Habitasse platea dictumst quisque sagittis purus sit amet. Cursus metus aliquam eleifend mi in. Suscipit tellus mauris a diam maecenas sed. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Aliquet nibh praesent tristique magna sit
amet. Vehicula ipsum a arcu cursus vitae. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Nulla pellentesque dignissim enim sit amet venenatis urna cursus eget. Mauris augue neque gravida in fermentum et sollicitudin ac. Pellentesque
elit eget gravida cum sociis natoque penatibus et. Velit laoreet id donec ultrices tincidunt arcu. Viverra vitae congue eu consequat ac felis donec et odio. Cursus in hac habitasse platea dictumst quisque. Et tortor consequat id porta nibh venenatis.
Placerat in egestas erat imperdiet sed euismod nisi. Morbi leo urna molestie at elementum eu facilisis. Sed egestas egestas fringilla phasellus. Arcu dui vivamus arcu felis bibendum ut tristique et. Tempus urna et pharetra pharetra massa massa ultricies
mi. Nisl vel pretium lectus quam.</div>
</body>
Simple enough.
But what if I want the image to appear aligned to the bottom of the text, so it's in the bottom right corner with the text wrapped around it? The float is still required for shape-outside I believe, but you can't vertical-align while using float. Any suggestions? Thanks.
You need to apply a top margin. It's difficult to find the good value but you can approximate it using vw unit. You will probably need JS to get the perfect value or some media query to adjust the value for different resolutions:
.element {
shape-outside: url(https://i.ibb.co/44KLGpq/marginalia-susan-transparent.png);
shape-image-threshold: 0.5;
float: right;
height: 300px;
shape-margin: 1em;
margin-top: max(0px,calc(1000px - 95vw));
}
body {
text-align:justify;
}
<body><img class="element" src="https://i.ibb.co/44KLGpq/marginalia-susan-transparent.png">
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Venenatis urna cursus eget nunc scelerisque viverra mauris in. Sagittis purus sit amet volutpat. Sollicitudin tempor id eu nisl
nunc mi ipsum. Eleifend mi in nulla posuere sollicitudin. Ac placerat vestibulum lectus mauris ultrices eros in cursus turpis. Suscipit tellus mauris a diam maecenas. Congue mauris rhoncus aenean vel elit scelerisque. Hac habitasse platea dictumst
quisque. Semper quis lectus nulla at volutpat. Tincidunt augue interdum velit euismod. Sit amet aliquam id diam maecenas. Sem et tortor consequat id. A erat nam at lectus urna duis convallis convallis tellus. Consectetur lorem donec massa sapien faucibus
et. Vitae proin sagittis nisl rhoncus mattis rhoncus. Ornare aenean euismod elementum nisi quis eleifend. Et netus et malesuada fames. Enim nunc faucibus a pellentesque sit amet porttitor eget. Elit scelerisque mauris pellentesque pulvinar pellentesque
habitant morbi. Viverra adipiscing at in tellus integer feugiat. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Purus viverra accumsan in nisl nisi scelerisque eu. Sit amet luctus venenatis lectus magna fringilla urna.
Malesuada nunc vel risus commodo. Eleifend quam adipiscing vitae proin sagittis nisl. Cras ornare arcu dui vivamus arcu. Sed augue lacus viverra vitae congue eu consequat ac. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Et
egestas quis ipsum suspendisse ultrices gravida dictum fusce. Duis convallis convallis tellus id interdum velit laoreet id donec. Tellus molestie nunc non blandit massa enim nec dui. Tincidunt praesent semper feugiat nibh sed pulvinar proin gravida.
Habitasse platea dictumst quisque sagittis purus sit amet. Cursus metus aliquam eleifend mi in. Suscipit tellus mauris a diam maecenas sed. Euismod elementum nisi quis eleifend quam adipiscing vitae proin. Aliquet nibh praesent tristique magna sit
amet. Vehicula ipsum a arcu cursus vitae. Sed ullamcorper morbi tincidunt ornare massa eget egestas purus viverra. Nulla pellentesque dignissim enim sit amet venenatis urna cursus eget. Mauris augue neque gravida in fermentum et sollicitudin ac. Pellentesque
elit eget gravida cum sociis natoque penatibus et. Velit laoreet id donec ultrices tincidunt arcu. Viverra vitae congue eu consequat ac felis donec et odio. Cursus in hac habitasse platea dictumst quisque. Et tortor consequat id porta nibh venenatis.
Placerat in egestas erat imperdiet sed euismod nisi. Morbi leo urna molestie at elementum eu facilisis. Sed egestas egestas fringilla phasellus. Arcu dui vivamus arcu felis bibendum ut tristique et. Tempus urna et pharetra pharetra massa massa ultricies
mi. Nisl vel pretium lectus quam.</div>
</body>
I am trying to fix this footer. If i remove positon it works fine but some other pages still have a problem. I need this footer at the bottom of every page...
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 16px;
background:white;
}
<footer>
<div class="container text-center"> <span>Copyright © 2017 LeagueOn. all rights reserved </span> </div>
</footer>
Try to avoid position: absolute where you don't really need it.
You can achieve this via flexbox. Your footer should be direct child of body:
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh; /* min-height: 100vh will also work everywhere except IE */
}
footer {
/* move footer to the bottom */
margin-top: auto;
}
/* This styles are just for demo */
body {
background-color: lightsteelblue;
}
footer {
background-color: lime;
padding: 16px;
text-align: center;
}
<footer>Copyright © 2017 LeagueOn. all rights reserved</footer>
This will work even in case of long page:
body {
margin: 0;
display: flex;
flex-direction: column;
height: 100vh; /* min-height: 100vh will also work everywhere except IE */
}
footer {
/* move footer to the bottom */
margin-top: auto;
}
/* This styles are just for demo */
body {
background-color: lightsteelblue;
}
footer {
background-color: lime;
padding: 16px;
text-align: center;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sodales molestie orci vitae facilisis. Duis non urna eget felis blandit facilisis vel sit amet purus. Donec finibus ex eget ultrices ultricies. Sed porttitor lobortis mi dignissim lacinia. Phasellus eget iaculis mauris, quis placerat augue. Quisque luctus condimentum neque, sed feugiat ipsum sagittis at. Mauris ut commodo eros.
Sed vel faucibus lacus, efficitur dapibus lectus. Sed consectetur luctus odio. Sed tempus aliquet enim, ac ullamcorper augue tincidunt at. Pellentesque vehicula iaculis elit eleifend viverra. Etiam scelerisque maximus felis. Aenean mollis nisl non eros faucibus mattis. Phasellus dictum venenatis ex vel ultricies.
Suspendisse auctor, nunc at ullamcorper hendrerit, dui enim laoreet nisl, id ullamcorper elit ex in lorem. Ut malesuada ipsum et euismod fermentum. Etiam euismod feugiat lacus eget luctus. Sed tempor vestibulum lectus. Suspendisse tincidunt ut massa ac interdum. Pellentesque mattis sapien in augue imperdiet, vel imperdiet massa convallis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum nec consectetur nunc.
Mauris vel sodales ex. Aenean at lectus non libero sagittis aliquam nec eget nisi. Proin massa tortor, iaculis in ante ut, hendrerit sodales sem. Aenean blandit vestibulum dolor et viverra. Mauris non nunc eget odio vulputate viverra. Morbi sagittis nisl at risus convallis vestibulum. Aenean pellentesque sit amet nibh id lobortis.
Ut consequat ligula risus, sit amet congue dolor consequat maximus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur ultrices tellus at placerat hendrerit. Fusce ullamcorper ante id urna scelerisque, eget interdum libero feugiat. Sed consectetur eget metus et euismod. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Maecenas malesuada interdum mauris, tempor porttitor odio porttitor eu. Vestibulum sollicitudin justo velit, nec porttitor risus luctus non. Fusce tempor dapibus magna a luctus. Donec ex turpis, venenatis vulputate lacus in, pharetra auctor nisi. Pellentesque dictum elit ut mollis vehicula. Donec vulputate suscipit felis vitae accumsan. Ut fermentum aliquam ipsum sit amet condimentum. Phasellus sollicitudin ligula elit, in efficitur leo dignissim a. Quisque dignissim dolor malesuada interdum interdum.
Nulla congue nibh erat, et tincidunt nulla maximus id. Duis placerat suscipit ex. Integer ut tortor sapien. Vestibulum dapibus sed ex at pharetra. Aliquam blandit facilisis erat. Proin imperdiet cursus arcu, non congue neque tempor nec. Maecenas ut nibh semper, dictum velit sit amet, vehicula nisl. Nullam ac tempor libero. Donec elit lorem, luctus et maximus in, iaculis sed neque. Duis vehicula lacus vitae eros congue, at molestie nisi eleifend. Nulla erat diam, dapibus eu consectetur et, rutrum non quam. Duis imperdiet laoreet elit ac varius. Nulla ultricies pellentesque libero, eget tincidunt tortor elementum quis.
Morbi vitae pharetra ante. Aenean maximus rutrum nunc, eget tempor nunc. Aenean nisi erat, egestas a rhoncus ut, tempus non nisl. Donec venenatis aliquam pulvinar. Sed in tortor neque. Fusce sollicitudin arcu vitae justo faucibus, sit amet sodales neque suscipit. Aliquam in sollicitudin diam. Donec a eros magna. Quisque vel posuere ipsum, quis vehicula odio. Morbi non dolor velit. Vivamus varius velit purus, bibendum volutpat magna eleifend ut. Quisque imperdiet pharetra nunc, id efficitur eros interdum sit amet. Sed commodo maximus risus et iaculis.
Fusce facilisis hendrerit leo. Donec a justo vel velit pellentesque congue et convallis sem. Nullam et urna justo. Donec aliquet mi ac turpis lacinia, in faucibus nunc tempor. Mauris at magna vitae ex volutpat blandit. Integer sed faucibus odio, in congue turpis. Vivamus pellentesque condimentum sagittis. Aliquam fermentum consequat massa non imperdiet.
Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris pellentesque interdum arcu, at tempor tortor tincidunt sed. Aliquam quis odio rhoncus, pharetra ligula vitae, tempus ante. Aenean ultrices ultrices purus eu interdum. Nullam malesuada dui sit amet enim feugiat dignissim. Vestibulum purus orci, fermentum vitae augue ac, semper scelerisque lectus. Etiam congue erat nec eleifend dapibus. Vestibulum vel mattis lacus. Proin urna nunc, sollicitudin quis volutpat varius, posuere vitae elit. Mauris felis ex, elementum et venenatis at, sagittis at quam. Donec nec pulvinar metus. Morbi sit amet tortor tortor.
Sed cursus fermentum nibh, ac fringilla ante dignissim non. Morbi in hendrerit lacus. Nam pulvinar ultricies dolor vitae ultrices. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent at neque sapien. Nam nisi velit, porta nec ultricies venenatis, semper sit amet mauris. Praesent sagittis ullamcorper lorem, imperdiet eleifend nisl vehicula quis. Cras ut vulputate metus. Ut in congue enim, vel efficitur tortor.
Integer velit erat, fringilla tincidunt porttitor gravida, pulvinar nec elit. Pellentesque ornare porttitor lorem ut congue. Pellentesque sagittis libero in est tristique feugiat. Suspendisse et ex fringilla dui tincidunt iaculis. Etiam a mollis enim, in scelerisque orci. Sed accumsan viverra nunc, a varius tellus molestie malesuada. Nam nec fringilla tellus, sed facilisis tortor. Nulla sed est sed orci tincidunt tincidunt. Morbi luctus imperdiet mi, eget molestie purus venenatis vel.
Integer venenatis dignissim nisi vel dignissim. Mauris vitae maximus felis, et tincidunt eros. Vivamus luctus scelerisque ligula, nec semper turpis volutpat ut. Ut vestibulum nisi vel justo iaculis, sed congue ante vulputate. Maecenas suscipit, mi at pulvinar tempus, nisl lorem molestie massa, ac vestibulum risus neque sit amet purus. Cras ultrices vulputate eros, a volutpat urna luctus ac. Curabitur viverra nunc in mauris mattis, pretium faucibus nibh convallis. Vivamus fermentum magna consectetur velit condimentum finibus. Vestibulum luctus dolor ut elit dictum, sed posuere ligula aliquam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus tincidunt nisi tellus, nec iaculis tellus feugiat nec. Vivamus sodales molestie velit, quis porta augue rhoncus ac. Sed elementum mi in est venenatis, vitae posuere risus imperdiet.
Pellentesque scelerisque id urna iaculis interdum. Nulla cursus nibh at quam pretium mattis. Quisque at elit metus. Sed pellentesque, lacus et placerat tincidunt, orci metus rutrum ante, pharetra iaculis urna ipsum ac ipsum. Ut maximus ante sit amet finibus vestibulum. Nam lacinia tellus vehicula, gravida tellus vitae, maximus lacus. Integer placerat enim et fringilla commodo.
Cras non accumsan erat, vel dapibus velit. Sed eu dolor tellus. Integer varius mauris nibh, quis pharetra magna congue non. Aliquam libero nisl, suscipit eu congue id, tristique in magna. Maecenas rutrum magna non tincidunt convallis. Aliquam aliquam, mi ut dictum rhoncus, nisl neque lobortis tortor, at mattis odio eros ut justo. Vestibulum egestas risus nec nisl placerat maximus. Nunc orci purus, egestas at rutrum id, eleifend semper erat. In hac habitasse platea dictumst. Vivamus diam ipsum, aliquam ut placerat ac, ultrices nec arcu. Integer eu ultrices dolor, non luctus orci. Proin sodales pulvinar dui, et sollicitudin tellus dapibus nec. Praesent quis consectetur eros, non ornare tortor.
Curabitur vitae lorem vitae est scelerisque facilisis vitae non augue. Duis erat metus, iaculis a velit et, iaculis vehicula nisl. Mauris tristique pellentesque suscipit. Maecenas a nisl dui. In lacus justo, fringilla ut tortor non, dignissim aliquet nisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam non lectus libero. Proin consequat eleifend justo. Praesent dolor enim, fringilla ut accumsan sit amet, egestas et augue. Nunc mattis dolor quis sodales tempus.
Integer sed ornare dolor. Quisque id dapibus tortor. Quisque ornare, ex quis consequat porttitor, arcu justo aliquet diam, in sollicitudin odio sem laoreet dolor. Ut elit dolor, semper vitae consectetur rutrum, finibus in felis. Nunc volutpat quam ut ligula varius volutpat. Nunc porttitor dictum libero et facilisis. Nam a libero a nisi aliquet mollis. Integer eget ipsum accumsan, interdum elit sit amet, ultrices massa. Nullam nec est id lorem dignissim aliquet nec at urna. Maecenas ante lorem, rutrum ac commodo ac, viverra quis enim. Etiam convallis sapien eu leo dignissim condimentum. Morbi ut ex eu enim fermentum varius at non turpis. Nulla sed libero pharetra, ornare mi sit amet, scelerisque odio. Mauris sit amet mi non mi ornare commodo. Proin eget lacinia erat. Nunc dictum lobortis justo sed vulputate.
Proin ullamcorper finibus nisi egestas aliquam. Sed tempor ornare massa at semper. Integer ultrices diam a libero fringilla faucibus. Proin vitae leo nec neque laoreet imperdiet. Donec mattis gravida massa ac blandit. Aliquam et accumsan urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam rhoncus elementum est nec iaculis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse et sapien orci. Vestibulum ut venenatis velit. Sed sodales volutpat risus vel aliquam. In hac habitasse platea dictumst.
Sed tempus nibh tempus bibendum viverra. Maecenas sit amet magna pretium, pharetra nisl at, ullamcorper elit. Integer ipsum diam, laoreet at consectetur at, rutrum eu mi. Duis et neque mauris. Pellentesque consequat augue et tortor commodo ornare. Nulla sed dui non sem vehicula bibendum vitae nec nibh. Curabitur ut arcu lacus. Donec vel orci dolor. Nam vel nibh a turpis ultricies dapibus rhoncus sit amet lorem. Aliquam condimentum mollis aliquam. Pellentesque laoreet vitae mauris id ornare. In id malesuada nisi.
Phasellus eu aliquam magna, sed efficitur dui. Morbi sagittis tellus vitae velit lacinia, ac molestie massa accumsan. Nullam molestie odio non turpis bibendum rutrum. Donec pellentesque nunc in massa ultrices, a pulvinar ex porta. Curabitur pretium placerat eleifend. Vivamus in dolor id dolor dapibus scelerisque. Etiam pretium placerat laoreet.
Nam at varius nibh, nec ullamcorper tellus. Vivamus ut metus sit amet ligula lobortis ultrices. Vestibulum sed metus id tortor pellentesque dignissim sit amet quis tellus. Integer porta laoreet massa. Fusce tincidunt eros sed neque egestas tristique. Donec eleifend elit volutpat purus sagittis gravida ut vitae purus. Suspendisse a neque id enim euismod egestas et in arcu. Vivamus placerat nulla vel ex dapibus, nec rutrum risus imperdiet. Nam aliquet felis vel turpis varius venenatis. Curabitur a tempus velit, eget vulputate dolor. Nullam feugiat risus risus, in finibus mauris egestas eu.
Donec arcu ligula, pulvinar eu dapibus ut, viverra id ante. Integer in tempus leo, quis finibus felis. Sed sollicitudin libero quis mi vehicula, et blandit tellus porttitor. In in interdum leo. Pellentesque blandit nisi eu quam tempus, vel bibendum augue accumsan. Nam eget suscipit magna, sit amet lacinia velit. Nullam tincidunt, quam a lobortis pharetra, arcu velit pulvinar risus, quis fermentum erat lacus ut neque. Aenean ex elit, feugiat semper vestibulum sed, porttitor at massa.
Proin turpis metus, commodo porta sem non, faucibus hendrerit magna. Nulla sodales gravida quam ac aliquet. Nam posuere lobortis ultricies. Nulla ac odio venenatis, tempor lorem at, varius diam. Suspendisse malesuada lacus vel sapien malesuada, quis faucibus urna eleifend. Donec aliquam erat ut est pellentesque suscipit. Nunc diam lorem, semper et porttitor vitae, commodo eget nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec eu dapibus lorem. Aenean auctor, risus vel efficitur fringilla, neque ex elementum augue, eget aliquam arcu risus quis ligula. Sed viverra mauris tortor, ut tempus risus luctus vitae. Vestibulum tincidunt blandit tortor, eu scelerisque nisl pulvinar et. Ut placerat odio urna, at consequat risus sagittis ac. Fusce imperdiet, enim ut commodo auctor, lectus ante efficitur velit, sed ullamcorper dui purus eu nunc. Nam in mauris venenatis, pretium tortor a, accumsan metus.
Donec efficitur suscipit metus id ullamcorper. Etiam ipsum eros, luctus ut maximus non, pellentesque ut dolor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor leo eu dolor pulvinar, at rutrum nulla volutpat. Curabitur quis mollis augue. Nunc porttitor suscipit odio, laoreet facilisis mi luctus convallis. Nunc urna purus, mattis at sollicitudin eget, pharetra quis sapien. Sed porttitor, lacus sed posuere aliquam, quam odio pellentesque ante, sed volutpat est justo sit amet purus. Aenean consequat condimentum tellus, in sagittis dolor molestie quis. Aenean eget enim sem. Vivamus rutrum mi in magna rutrum, vitae euismod lorem pulvinar. Quisque viverra urna odio, eu tristique orci ultricies eu. Nam facilisis malesuada mattis. Ut tempor nibh eu sapien pellentesque facilisis. Aenean fringilla urna ut lorem viverra, quis condimentum elit iaculis.
Nullam aliquam, leo nec iaculis maximus, nisl nulla pretium leo, vitae iaculis nunc mi sit amet ante. Donec ullamcorper velit vitae dictum placerat. Nulla facilisi. Donec lobortis ut diam et pulvinar. Pellentesque suscipit suscipit aliquet. Nulla et pharetra tellus, nec semper erat. Praesent metus mauris, accumsan ut tempus ut, dignissim eget ante. Nulla eget diam sit amet enim luctus interdum. Quisque volutpat, enim vitae sollicitudin fermentum, odio metus fermentum ante, nec ultrices augue dolor eu eros. Nam eu venenatis dui. Vivamus volutpat accumsan nibh, in tincidunt lorem commodo sit amet.
Ut rhoncus, nunc ut lacinia vulputate, nisi purus efficitur massa, id suscipit ex felis nec mauris. Cras malesuada sapien et congue consectetur. Mauris molestie nisl vel purus convallis rutrum. Sed tristique dictum consectetur. Curabitur justo ante, semper sit amet ultrices at, placerat at lacus. Aenean lorem quam, tempor nec arcu nec, viverra ornare mi. Aenean ante velit, vestibulum non libero a, ullamcorper vulputate lectus. Aenean congue, metus ac lobortis dignissim, elit nunc interdum magna, eu sagittis neque mi vitae nibh. Etiam eget lacus quam. Duis quis augue eget eros congue molestie eget at dui.
<footer>Copyright © 2017 LeagueOn. all rights reserved</footer>