To start, I am aware that this question has been asked many times previously, and answered about as many times as it has been asked. Unfortunately I have not been able to get the solutions provided here, here and here to work for me.
I have only been using html and css for a few weeks, teaching myself through Codecademy. Sadly Codecademy's positioning tutorials are littered with bugs so the code I have here is the product of much trial and error and I'm not sure if any of it has been setup "correctly".
Without further ado, here's my current code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Header Test</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>
CSS
html, body {
height:100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
position: relative;
}
.header {
height: 75px;
padding: 10px;
background-color: red;
}
.content {
height:100%;
}
.footer {
width:100%;
height: 75px;
bottom: 0;
position: absolute;
background-color: red;
}
This code makes me a header and footer with a content div between them. However, the content div is 0px tall. I would like the div to stretch from the bottom of the header to the top of the footer.
Here's a JSFiddle of my current code. Thanks in advance for any help.
The 'modern' way is to use flexbox
DEMO
.wrapper {
min-height: 100%;
position: relative;
display:flex;
flex-direction: column;
justify-content: flex-start;
}
.content {
flex:1;
background:pink;
}
Edit: DEMO USING TABLE
Here is your solution.
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
position: relative;
}
.header {
height: 75px;
padding: 10px;
background-color: red;
}
.content {
height: 100%;
width: 100%;
position: absolute;
display: block;
background-color: blue;
}
.footer {
width: 100%;
height: 75px;
bottom: 0;
position: absolute;
background-color: orange;
}
<div class="wrapper">
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
I think you need this code:
.content {
height:100vh;
}
Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.[reference]
Your code is working actually. If <div class"content"> is empty then the height is 0px. Otherwise use fixed height value.
HTML:
<body>
<div id="header"></div>
<div id="content"><div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada diam eu aliquet pretium. Donec dapibus condimentum lectus a porta. Fusce sed augue bibendum, egestas nisi rhoncus, varius lectus. Nullam vitae erat vitae purus dapibus aliquet. Praesent id urna aliquet, interdum mi sit amet, dictum nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris facilisis sodales ligula, nec pulvinar neque ornare et. Vivamus ultrices odio venenatis lectus semper, at luctus sem tempus. Ut molestie sem ac faucibus pulvinar. Ut in massa et mauris congue accumsan at eu magna. Sed augue risus, varius eget vehicula eget, fringilla in magna. Proin tempus ante leo, non tempor justo cursus a. Sed a posuere nisl.
Nulla imperdiet nulla auctor tellus ultricies, quis cursus libero finibus. Praesent sed justo nec ex blandit pretium non in eros. Praesent a mollis ante. Donec sit amet vehicula quam, ut euismod dolor. Vivamus vitae faucibus felis. Ut eget condimentum arcu. Curabitur vel felis tortor. Quisque a semper neque. Fusce a diam ac elit fringilla sodales sit amet vel ligula.
Donec blandit congue commodo. Etiam dolor tellus, viverra et molestie vel, bibendum non diam. Vivamus dignissim ac sapien eget vulputate. Pellentesque eu ex nec tellus malesuada sollicitudin. Vivamus non erat eu est dapibus accumsan nec a erat. Donec a ligula tellus. Maecenas et ullamcorper urna.
Morbi maximus, quam a vulputate hendrerit, augue enim consectetur massa, vel tristique dui felis vel leo. Ut id pellentesque nisi, eget congue magna. Nunc vitae auctor quam. Etiam varius, nisi sed cursus faucibus, felis metus luctus enim, eu consectetur elit nulla ut magna. Donec mi tortor, ultricies eget fringilla vitae, fringilla et nisl. Vestibulum vestibulum neque leo, in viverra sapien vehicula quis. Donec fermentum placerat dignissim. Duis vestibulum dolor a tellus eleifend ultricies. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris quis suscipit diam. Vivamus tristique dignissim fermentum. Phasellus eu cursus ipsum. Quisque magna purus, ultrices quis dolor vitae, dignissim pharetra nisi. Sed sollicitudin blandit nulla, a consequat lorem congue in. Fusce a dapibus orci. Aenean sed laoreet ex.
Aenean eget volutpat dui, a eleifend sem. Fusce malesuada sodales dapibus. Cras gravida ornare mauris, a ullamcorper massa pulvinar eu. Proin facilisis dapibus commodo. Nullam ac sem ultrices, iaculis nulla at, pulvinar velit. Cras auctor, mauris sit amet viverra tristique, nunc turpis faucibus lacus, at rutrum massa diam eu nisi. Aenean facilisis metus tempor accumsan tristique. Phasellus condimentum mauris a neque iaculis pretium ut vitae ligula. Vivamus congue mi eget sagittis iaculis. Praesent urna ipsum, porta in eros et, commodo vulputate odio. Vestibulum bibendum arcu sit amet orci viverra pellentesque. Etiam pellentesque sodales nisi, sit amet consequat mi ornare ut. Donec non cursus velit.
</div>
</div>
<div id="footer"></div>
</body>
CSS:
html { height: 100%; }
body {
height:100%;
min-height: 100%;
background: #000000;
color: #FFFFFF;
position:relative;
}
#header {
height:50px;
width:100%;
top:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#footer {
height:50px;
width:100%;
bottom:0px;
left:0px;
background: #CCCCCC;
position:fixed;
}
#content {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:100%;
padding: 0 20px;
}
#content > div {
padding: 70px 0;
}
Related
I have content on page and I would like to make both sidebars to be sticky, something like:
I am using flex:
<div className="homePageFeed">
<div className="homePageFeedWrapper">
<HomePageFeedMenu/>
<HomePageFeedContent/>
<HomePageFeedUtil/>
</div>
</div>
.homePageFeed{
position: relative;
width: 100%;
}
.homePageFeedWrapper{
display: flex;
align-items: center;
position: relative;
height: 100%;
padding-left: 22px;
padding-right: 16px;
z-index: 30;
flex-direction: row;
}
Other components, left-sidebar:
const HomePageFeedMenu = () => {
return (
<div className="homeFeedMenu">
<ol>
<li> Mammals</li>
<li> Lizards</li>
<li> Birds</li>
<li> Spiders</li>
</ol>
</div>
)
}
export default HomePageFeedMenu;
.homeFeedMenu{
flex: 10 0 0;
width: 100%;
height: 500px;
border-right: 1px solid hsl(210,8%,35%);
}
ol{
list-style: none;
}
li{
color: hsl(210,8%,35%);
margin: 0;
}
Scrollable content ( with test item in it ):
const HomePageFeedContent = () => {
return (
<div className="homeFeedContent">
<div className="homeFeedItem">
<div className="content">
<div className="homeFeedItemTitle"><p>Animal name</p></div>
<div className="homeFeedItemContent">
Animal description
</div>
<div className="homeFeedItemMetaInfo">Age and adoption info</div>
</div>
<div className="img">Animal picture</div>
</div>
</div>
)
}
.homeFeedContent{
padding-top: 25px;
flex: 70 0 0;
width: 100%;
border-right: 1px solid hsl(210,8%,35%);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
}
.homeFeedItem{
width: 90%;
height: 200px;
display: flex;
margin-top:25px;
flex-direction: row;
justify-content: center;
border-bottom: 1px solid hsl(210,8%,35%);;
}
.content{
flex: 80 80 0;
display: flex;
flex-direction: column;
}
.img{
flex: 20 20 0;
width: 100%;
height: 100%;
border: 1px solid black;
}
.homeFeedItemTitle{
width: 100%;
flex: 20 20 0;
}
.homeFeedItemContent{
width: 100%;
flex: 60 60 0;
border-bottom: 1px hsl(210,8%,35%);;
}
.homeFeedItemMetaInfo{
width: 100%;
flex: 20 20 0;
}
export default HomePageFeedContent;
And right static sidebar
const HomePageFeedUtil = () => {
return (
<div className="homeFeedUtil">
</div>
)
}
export default HomePageFeedUtil;
.homeFeedUtil{
flex: 20 0 0;
width: 100%;
height: 500px;
}
Now I am trying to use sticky positioning for both sidebars, however, it does not work as they are part of the flexbox. I would also like to fix their height, as you can see I attempted to use 500px, hover when the middle flex element gets lots of element and the site become scrollable, it readjusts the position of both sidebars ( as they have fixed height ) and thus their content does not appear on top of it "column".
Are there any tricks to use both, flex and sticky positioning? Or do I need to do it without flex?
Thanks for the help!
I'd not use flexbox. I'd use position: sticky for the top then position: fixed for each sidebar. Use css variables to work out the width of the scrollable area. Here's an example:
body {
box-sizing: border-box;
margin: 0;
}
.main-container {
--header-height: 50px;
--header-gap: 0.5rem;
--sidebar1-width: 200px;
--sidebar2-width: 100px;
--sidebar-gap: 0.5rem;
}
.sticky-header {
position: sticky;
height: var(--header-height);
background-color: lightblue;
border: 1px solid blue;
top: 0;
z-index: 1;
}
.sticky-sidebar1 {
position: fixed;
top: var(--header-height);
left: 0;
width: var(--sidebar1-width);
height: calc(100vh - var(--header-height));
background-color: lightgreen;
border: 1px solid darkgreen;
}
.sticky-sidebar2 {
position: fixed;
top: var(--header-height);
right: 0;
width: var(--sidebar2-width);
height: calc(100vh - var(--header-height));
background-color: lightpink;
border: 1px solid darkred;
}
.scrollable-content {
border: 1px solid red;
padding: 0.25rem;
overflow: hidden;
margin-left: calc(var(--sidebar1-width) + var(--sidebar-gap));
margin-right: calc(var(--sidebar2-width) + var(--sidebar-gap));
margin-top: var(--header-gap);
}
#media only screen and (max-width: 600px) {
.main-container {
--sidebar1-width: 100px;
--sidebar2-width: 0px;
}
}
<div class='main-container'>
<div class="sticky-header">Sticky Header</div>
<div class="sticky-sidebar1">Sticky Sidebar1</div>
<div class="sticky-sidebar2">Sticky Sidebar2</div>
<div class="scrollable-content">
<h1>Scrollable Content</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. In eu mi bibendum neque egestas congue quisque egestas. Adipiscing enim eu turpis egestas
pretium.
Accumsan sit amet nulla facilisi morbi tempus iaculis urna id. In massa tempor nec feugiat nisl. Mattis nunc
sed
blandit libero volutpat sed. Magna ac placerat vestibulum lectus mauris ultrices eros in. Senectus et netus et
malesuada fames ac turpis egestas. Tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel elit
scelerisque mauris pellentesque pulvinar. Egestas egestas fringilla phasellus faucibus scelerisque eleifend
donec pretium. Tristique risus nec feugiat in fermentum posuere urna nec tincidunt. Lectus vestibulum mattis
ullamcorper velit sed. Risus ultricies tristique nulla aliquet enim tortor at auctor. Vitae congue mauris
rhoncus aenean vel elit scelerisque mauris pellentesque. Lacus suspendisse faucibus interdum posuere lorem
ipsum
dolor. Suspendisse interdum consectetur libero id. Vestibulum lorem sed risus ultricies tristique nulla
aliquet.
Nunc eget lorem dolor sed viverra ipsum nunc. Diam sit amet nisl suscipit adipiscing bibendum est.
Diam phasellus vestibulum lorem sed risus ultricies tristique. Ultrices sagittis orci a scelerisque. Iaculis
at
erat pellentesque adipiscing commodo elit at imperdiet dui. Donec enim diam vulputate ut pharetra sit.
Fringilla
urna porttitor rhoncus dolor purus. Turpis massa tincidunt dui ut ornare lectus. Et netus et malesuada fames
ac
turpis egestas maecenas pharetra. Malesuada nunc vel risus commodo viverra maecenas. Purus sit amet volutpat
consequat mauris nunc. Vel fringilla est ullamcorper eget nulla. Duis ultricies lacus sed turpis tincidunt id
aliquet risus. Arcu ac tortor dignissim convallis aenean et. Elementum nibh tellus molestie nunc non blandit
massa.
Magna sit amet purus gravida quis. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Sagittis
nisl rhoncus mattis rhoncus urna neque. Feugiat scelerisque varius morbi enim nunc faucibus. Parturient montes
nascetur ridiculus mus mauris vitae ultricies leo. Enim nulla aliquet porttitor lacus luctus accumsan tortor
posuere. Rhoncus aenean vel elit scelerisque mauris pellentesque. Velit aliquet sagittis id consectetur purus.
Id porta nibh venenatis cras sed felis eget velit aliquet. Mattis nunc sed blandit libero. Suspendisse in est
ante in. Duis at tellus at urna condimentum mattis. Consequat semper viverra nam libero justo laoreet sit amet
cursus.
Sed turpis tincidunt id aliquet risus feugiat. Aliquam purus sit amet luctus. Suspendisse faucibus interdum
posuere lorem. Cursus turpis massa tincidunt dui ut ornare. Donec ultrices tincidunt arcu non sodales. Tellus
integer feugiat scelerisque varius morbi enim nunc faucibus. Leo integer malesuada nunc vel risus. Ut pharetra
sit amet aliquam id diam. Condimentum vitae sapien pellentesque habitant morbi tristique. Vestibulum lectus
mauris ultrices eros. Aenean sed adipiscing diam donec adipiscing tristique risus. Nulla aliquet porttitor
lacus
luctus accumsan tortor. Semper feugiat nibh sed pulvinar. Placerat in egestas erat imperdiet sed.
Pulvinar pellentesque habitant morbi tristique senectus et netus. Vitae turpis massa sed elementum tempus
egestas sed. Aliquam sem et tortor consequat id porta nibh venenatis cras. Orci dapibus ultrices in iaculis
nunc
sed augue lacus. Blandit turpis cursus in hac habitasse platea. Volutpat blandit aliquam etiam erat velit
scelerisque. Massa ultricies mi quis hendrerit dolor magna eget est lorem. Lectus sit amet est placerat. Eu mi
bibendum neque egestas congue. Dictum non consectetur a erat nam at. Facilisis magna etiam tempor orci eu
lobortis. Sit amet venenatis urna cursus eget nunc. Sed risus pretium quam vulputate dignissim suspendisse.
Vivamus at augue eget arcu dictum. Ultricies tristique nulla aliquet enim tortor. Gravida neque convallis a
cras
semper auctor neque.
Malesuada pellentesque elit eget gravida cum sociis natoque penatibus. Est lorem ipsum dolor sit amet. Tempor
orci dapibus ultrices in iaculis nunc. Lorem ipsum dolor sit amet consectetur adipiscing. Volutpat diam ut
venenatis tellus in metus vulputate eu. Sed nisi lacus sed viverra tellus. Penatibus et magnis dis parturient.
Ipsum consequat nisl vel pretium lectus quam. Mollis aliquam ut porttitor leo a diam. Cras sed felis eget
velit.
Euismod lacinia at quis risus. Neque viverra justo nec ultrices dui. Pellentesque habitant morbi tristique
senectus et netus et. Pharetra vel turpis nunc eget lorem dolor. Ac auctor augue mauris augue neque gravida
in.
</p>
</div>
</div>
For the result you are looking for you would need to use position: fixed; in your css for all 3 elements you want to be fixed;
For your top header it would be something like:
#enterIDhere {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
margin: 0 auto;
}
For your left sidebar it would be something like:
#EnterIDhere {
position: fixed;
left: 0;
bottom: 0;
}
and last but not least your right sidebar would need something like:
#EnterIDhere {
position: fixed;
right: 0;
bottom: 0;
}
I'm trying to have my text inside the 'container' div show up entirely but it seems to get cut off? .. It works if there is only a bit of text but if the text is more than 1 page it will cut it off.. Also the page seems to load very long because of the background image (defined in stylesheet.css) How do I fix this the best ? Thanks in advance!
* {
box-sizing: border-box;
}
#font-face {
font-family: 'zcool';
src: url('fonts/zcool.ttf') format('ttf');
local: url('fonts/zcool.ttf') format('ttf');
font-weight: normal;
font-style: normal;
}
html,
body {
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
border: 0;
background-attachment: fixed;
background-size: 100% auto;
background-image: url("img/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
#media (max-width: 768px) { /* when screen size is < 768px apply the following styles */
body {
padding: 0;
margin: 0;
border: 0;
background-attachment: fixed;
background-size: 100% auto;
background-image: url("img/bgm.png");
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
ul#horizontal-list {
list-style: none;
}
ul#horizontal-list li {
display: inline;
}
ul {
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: center;
}
li a {
display: block;
color: white;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
width: 100%;
background-color: black;
color: white;
text-align: center;
left: 0;
right: 0;
z-index: 1;
}
.navbar ul {
display: flex;
align-items: center;
justify-content: center;
list-style-type: none;
margin-top: 0px;
}
.header {
background-image: url(img/j.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 100%;
margin-top: 10%;
margin-bottom: 10%;
}
#media (max-width: 768px) { /* when screen size is < 768px apply the following styles */
.header {
background-image: url("img/johnswork-mobile.svg");
background-repeat: no-repeat;
background-size: 100% 100%;
height: 100%;
width: 100%;
margin-top: 10%;
margin-bottom: 10%;
}
}
.body {
height: 100%;
width: 90%;
margin: auto;
padding: 0;
border: 0;
color: black;
padding-left: 5%;
padding-right: 5%;
overflow: hidden;
/*background-color: grey;*/
}
.johnswork {
background-image: url(img/johnswork.svg);
background-repeat: no-repeat;
background-size: 100% 100%;
height: 20%;
width: 100%;
margin-bottom: 5%;
}
.content {
margin: auto;
height: 100%;
width: 90%;
background-color: white;
color: black;
border-right: double;
border-left: double;
box-shadow: 0px -21px 28px 7px rgb(162, 27, 27);
text-align: justify;
font-size: 20px;
padding-top: 2%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
#media (max-width: 768px) { /* when screen size is < 768px apply the following styles */
.content {
margin: auto;
height: 100%;
width: 90%;
background-color: white;
color: black;
border-right: double;
border-left: double;
box-shadow: 0px -21px 28px 7px rgb(27, 125, 162);
text-align: justify;
font-size: 20px;
padding-top: 2%;
padding-bottom: 10%;
padding-left: 5%;
padding-right: 5%;
}
}
.social {
margin: auto;
display: flex;
justify-content: center;
}
.me {
float: left;
margin-right: 3%;
height: 100%;
}
.footer {
height: 50px;
width: 72%;
background-color: black;
color: white;
vertical-align: middle;
margin: auto auto 50px;
}
#copyright {
display: table;
}
#cpy{
display: table-cell;
vertical-align: middle;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<!--<link rel="stylesheet" type="text/css" href="stylesheet-m.css" media="handheld" />-->
<link rel="icon" type="image/x-icon" href="img/favicon.ico"/>
<meta name="description" content="My Personal Portfolio">
<title>John's Work</title>
</head>
<body>
<nav class="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>CONTACT</li>
</ul>
</nav>
<header class="header">
<!-- background defined in stylesheet.css-->
</header>
<section class="body">
<section class="content">
<section class="johnswork">
<!-- background defined in stylesheet.css-->
</section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna, in suscipit purus.
Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada. Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio.
Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu. Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus sit amet viverra in, varius vel urna.
Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor, a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
</section>
</section>
<footer class="footer" id="copyright" style="text-align:center">
<div id="cpy">© DA COSTA JOAO (2019)</div>
</footer>
</body>
</html>
As for the text cutting off, the below css seems to fix it without cutting off the image.
.body{
height: auto;
}
As for the background image, it may be the file size. I usually use https://compressor.io/ to reduce my file sizes while maintaining image quality.
Getting rid of
html,
body {
height: 100%;
}
Seems to fix the problem of the text getting cut off.
I am assuming you want an image with text going around it. You can try this out!
.image-container {
float: left;
margin: 0px 20px 5px 0px;
<section class="content">
<div class="image-container">
<img src="https://images.pexels.com/photos/374811/pexels-photo-374811.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="">
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac ipsum non diam faucibus dignissim. Praesent a dolor tincidunt, rutrum diam ut, convallis orci. Maecenas eleifend, sapien id blandit rutrum, enim augue cursus magna, vitae varius orci nulla
eu arcu. Cras ultrices condimentum libero nec vulputate. Praesent id ante dignissim, congue elit id, iaculis eros. Aliquam lacus quam, facilisis et pulvinar quis, hendrerit varius erat. Duis feugiat imperdiet lobortis. Ut et faucibus dui. Integer
quis bibendum tortor, at mattis dolor. Sed id lacus nec nisi iaculis blandit. Duis nec ligula orci. Quisque tincidunt, orci id tincidunt consequat, eros erat dictum urna, vel ultricies sem nisl eu nunc. Nulla facilisi. Suspendisse at malesuada magna,
in suscipit purus. Fusce facilisis pharetra dui, ut cursus orci maximus non. Cras nec magna ac odio ornare ornare. Proin id commodo eros. Phasellus dui est, malesuada non mi sit amet, fringilla rhoncus ante. Phasellus non elit id est cursus malesuada.
Maecenas accumsan erat in urna pulvinar, sit amet egestas felis facilisis. Nullam tincidunt porta nulla, a consectetur sapien venenatis in. Phasellus elementum est sit amet sem accumsan tincidunt. In semper vulputate risus, sed sollicitudin libero
consectetur eget. Curabitur pulvinar eleifend augue. Sed facilisis ligula sed arcu vulputate tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut mi nisi, mattis sed est a, luctus aliquet metus. Integer
fringilla, massa nec laoreet dapibus, odio sem convallis massa, a vestibulum tellus mi in massa. Sed at vulputate velit, id sagittis sem. Vestibulum ac libero massa. Vivamus et libero vel orci auctor sodales a a quam. Vivamus semper tortor eget lacus
euismod, non dignissim tellus feugiat. Donec tincidunt nisi at ornare ullamcorper. Nulla at mi nulla. Phasellus ligula ante, vehicula sit amet mauris et, consectetur mollis odio. Donec massa risus, ultricies et enim quis, vestibulum consectetur arcu.
Nunc sed convallis dui, sagittis imperdiet metus. Sed non ultrices velit. Nullam arcu sem, varius non pulvinar id, convallis eget erat. Nam porta tincidunt lorem, non venenatis sapien hendrerit vitae. Suspendisse nec est leo. Nunc commodo, lectus
nec facilisis laoreet, ex velit dapibus dui, et aliquet lacus est non velit. Vestibulum nisl velit, tempor vel lacus at, ultricies pellentesque nisi. Mauris velit tortor, aliquam a magna eget, efficitur fringilla erat. Praesent massa nisl, maximus
sit amet viverra in, varius vel urna. Pellentesque eget leo vitae neque dictum egestas at ullamcorper nulla. Aenean lacinia venenatis metus, in faucibus dolor sollicitudin eget. Sed volutpat sit amet urna vel molestie. Donec dignissim velit tortor,
a blandit ligula commodo dapibus. Vestibulum ac dolor facilisis mauris maximus mattis. Nullam vitae libero ut ligula sodales accumsan et vel dui. Quisque dapibus, lacus accumsan interdum efficitur, tellus augue maximus ipsum, quis ultricies dolor
justo in diam. Pellentesque id lobortis diam. Suspendisse mollis eget orci eu auctor. Nullam porttitor arcu mi, nec varius magna viverra quis. Fusce eleifend sodales turpis et hendrerit.
</p>
</section>
I am trying to position the footer on my page at the bottom of screen when there is not enough content. When Content height exceed above the screen height, I want the footer to fall under the content rather than stay fixed at the bottom.
I've tried a few ways mentioned on stackoverflow and other resources but not able to make it work.
I am currently following below link but not able to adapt it to my HTML structure
https://codepen.io/cbracco/pen/zekgx
HTML
<div class="site-wrapper">
<header>
Header
</header>
<div class="home-body-wrapper">
Body
</div>
<footer>
Footer
</footer>
</div>
Using Bootstrap +
Custom CSS
html {
height: 100%;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
height: 100%;
background-color: #ffffff;
color: #ffffff;
}
.site-wrapper {
height: 100%;
position: relative;
background-color: #6cacc5;
padding: 50px;
}
.site-wrapper header {
height: 50px;
background-color: #3b5998;
}
.site-wrapper .home-body-wrapper {
min-height: 300px;
background-color: #c97874;
}
.site-wrapper footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 200px;
background-color: #555555;
}
jsfiddle
You can remove height: 100% on .site-wrapper and replace it with min-height: 100vh. That way if the content is larger than the whole view port it'll get larger where as height limits the height completely.
For my solution I removed the site-wrapper, made the body position relative, the body min-height: 200px and put a top and bottom padding on the content wrapper. The rest I basically left like in your code.
html {
height: 100%;
box-sizing: border-box;
margin: 0;
}
body {
min-height: 100%;
margin: 0;
color: #ffffff;
background-color: #6cacc5;
padding: 50px;
position: relative;
}
header {
height: 50px;
background-color: #3b5998;
}
.home-body-wrapper {
min-height: 300px;
background-color: #c97874;
padding: 50px 0 200px 0;
}
footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 200px;
background-color: #555555;
}
<body>
<header>
Header
</header>
<div class="home-body-wrapper">
<p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies
mi eu turpis hendrerit fringilla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices
mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
<p>Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</p>
<p>Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus.</p>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.</p>
<p>Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna.</p>
<p>Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies
mi eu turpis hendrerit fringilla.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices
mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut</p>
</div>
<footer>
Footer
</footer>
</body>
This duplicate didn't solve because I don't want to use JS. CSS: Sidebar fixed width with background to edge of window
This is what I'm trying to achieve:
Basically all the content must be inside a div with a specific width and set to the center with margin: 0 auto. Inside this div there must be a main div with a white background and a sidebar with a blue background.
I don't want to use javascript. Isn't this possible with pure CSS?
CURRENT CODE (not working): https://jsfiddle.net/0p9jrnq1/1/
Try this..
.sidebar {
position: static;
}
.sidebar:after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 22%; (adjust till get the right width)
height: 100%;
bacgkround: (the sidebar background);
z-index: (below sidebar);
}
Doing this with fixed with seems kind of tough for me. If you can do with percentages, then this works. All you have to add to this is use media queries in order to reduce the size or hide the left and right gutters when viewing this layout in smaller screens.
HTML:
<div class="container">
<div class="left-gutter"></div>
<div class='content'>
<div class="main"> </div>
<div class="sidebar"> </div>
</div>
<div class="right-gutter">
</div>
CSS:
.container {
width:100%;
}
.container > .left-gutter, .container > .right-gutter {
width:20%;
}
.container > .left-gutter {
height:100%;
float:left;
}
.container > .right-gutter {
height:100%;
background: #0000FF;
float:right;
}
.container > .content {
width: 60%;
height:100%;
float:left;
min-width: 200px;/*Your minimum fixed width here*/
}
.container > .content > .main {
width: 80%; /*Width for the content area in %*/
float: left;
height:100%;
background:#FFFFFF;
}
.container > .content > .sidebar {
width: 20%; /*Width for the sidebar area in %*/
float: right;
height:100%;
background:#0000FF;
}
Make sure width percent of main and sidebar add up to be 100%
Using padding and margins will require you to adjust the widths of the elements accordingly.
Take a look at this layout
body {
margin: 0;
padding: 0;
}
#header {
background-color: #02CC02;
width: 100%;
position: relative;
z-index: 2;
}
#header .clearfix {
padding: 40px;
}
#main-content {
background-color: white;
}
.page-content {
margin: 0 auto;
width: 55%;
}
#sidebar {
background-color: rgba(238, 130, 238, 0.92);
position: fixed;
right: 0;
top: 0;
width: 300px;
height: 100%;
z-index: 1;
}
#sidebar .clearfix {
padding: 60px;
}
<div id="header">
<div class="clearfix"></div>
</div>
<div id="main-content">
<div class="page-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi auctor blandit mauris, vel ornare metus cursus eu. Maecenas faucibus nisl non mauris sagittis, at porttitor lorem vestibulum. Curabitur vulputate facilisis nunc nec imperdiet. Sed finibus risus eu quam bibendum, imperdiet commodo felis condimentum. Morbi dapibus, libero eu malesuada sagittis, justo urna ullamcorper odio, a venenatis orci turpis ac nisi. Ut porta commodo nibh, at auctor nisi dapibus sit amet. Nullam tincidunt urna at nisi finibus dictum.</p>
<p>Duis orci purus, varius vel dolor a, pharetra mattis ipsum. Duis aliquam velit sed ex consequat pretium. Donec eleifend mattis elit, sit amet accumsan diam sodales id. Nulla sed sem nisl. Sed mattis nunc massa, eget ultrices ex luctus sit amet. Curabitur porttitor turpis non tortor venenatis, at blandit dui elementum. Proin vehicula, augue ac tempor euismod, erat quam iaculis velit, a bibendum erat sapien sed dolor. Proin sed augue convallis, molestie sem id, finibus ante. Ut in tincidunt ligula, non rutrum tortor. Cras eu ex eleifend, volutpat nibh at, faucibus nunc. Nam eget augue porta, congue tellus id, viverra turpis. Curabitur quis felis ligula. Phasellus lacus erat, molestie eget sapien quis, luctus feugiat mi. Nam tristique, sem eget aliquam interdum, ligula neque malesuada diam, vitae rhoncus elit est eu arcu.</p>
<p>Etiam finibus purus mattis, elementum nibh sit amet, eleifend nulla. Duis tortor eros, bibendum eget mattis nec, feugiat quis sem. Curabitur consequat urna in turpis facilisis maximus. Nulla elementum molestie ligula. Vestibulum eleifend fermentum quam ut sagittis. Integer nunc tortor, condimentum et posuere vel, vestibulum quis leo. Ut feugiat vehicula arcu, laoreet vehicula mi rutrum vitae.</p>
<p>In venenatis, erat eu interdum ornare, leo magna eleifend elit, vitae fermentum metus dui vel quam. Vivamus auctor lacinia porta. Nullam vitae vestibulum libero. Quisque tincidunt pellentesque metus, sit amet pharetra est mattis quis. Sed mattis, nisl a interdum porttitor, velit ligula lacinia orci, sed hendrerit augue dolor vel nisi. Aliquam ut ex vitae nunc aliquam aliquam et in mi. Phasellus sit amet ante quis ipsum cursus volutpat eget eget lectus. Curabitur tempor sed odio id pulvinar. Suspendisse sed elit egestas, lobortis est id, aliquet urna. Mauris ac purus at justo condimentum rutrum non eget libero. Quisque scelerisque erat sed orci consequat suscipit. Quisque sit amet dui hendrerit, commodo arcu quis, tristique quam. Phasellus feugiat nulla velit, nec condimentum nisl varius eget. Mauris facilisis et arcu vitae ultrices. Vivamus viverra, lorem vitae eleifend vulputate, neque sem volutpat ante, eget rhoncus erat nisl ac turpis.</p>
</div>
</div>
<div id="sidebar">
<div class="clearfix"></div>
</div>
Use JS to show and hide the sidebar
So I have two divs, one is a .header and the other is the .content, together they would take up the whole page. The .header would be set in place and only the content would scroll.
I would like to make the content's height to be dynamic based on the height of the .header without javascript.
This could be achieved with a calc if the .header had fixed height, but it doesn't because the height can vary.
Code:
.container {
height: 100%;
}
.header {
height: 50px; // height is fixed, not great for dynamic content
}
.content {
height: calc(100% - 50px); // height is a subtraction
}
<div class='container'>
<div class='header'>Header</div>
<div class='content'>
Content
</div>
</div>
See switching of content here
Is there a CSS only solution in which would calculate the height of the .content based on the size of the .header?
you can use flexbox for that
html,
body {
margin: 0;
height: 100%;
}
.container {
display: flex;
flex-direction: column;
height:100%
}
.header {
display: flex;
border: 5px solid red
}
.content {
flex: 1;
border: 5px solid green
}
<div class='container'>
<div class='header'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at libero ut arcu tincidunt porta. Vestibulum in ex nec neque rutrum vestibulum a nec eros. Morbi accumsan nisl in justo viverra, non euismod libero sagittis. Aenean vulputate tortor
molestie metus iaculis ornare. Vestibulum posuere, mauris eget tempor tincidunt, arcu risus eleifend felis, ac fringilla mauris lorem sit amet risus. Ut id ante eu nisl hendrerit tincidunt ac ut velit. Sed efficitur ante in neque mollis feugiat. Nulla
sed erat nec ipsum fermentum tristique. Sed auctor dolor quis fringilla ullamcorper. Duis luctus ligula nibh, ac facilisis eros dapibus at. Aliquam eget vestibulum sem, a euismod ante. Quisque at arcu arcu. Nunc massa tellus, imperdiet in facilisis
vitae, maximus at neque. Maecenas et dictum enim.</div>
<div class='content'>
Nam vehicula tempor est et ultrices. Cras elementum, mi ac pellentesque ultricies, dui urna rutrum risus, quis tristique ante eros in tellus. Quisque sit amet varius erat. Aliquam dapibus eros augue, et blandit nulla volutpat nec. Duis nibh lacus, scelerisque
in interdum in, hendrerit eget justo. Pellentesque finibus nisi sed fermentum aliquet. Mauris feugiat, magna in sagittis dapibus, neque justo convallis risus, eget rutrum metus tellus eget lorem. Suspendisse at turpis faucibus eros dapibus feugiat
vel at elit. Sed ac arcu tempor, molestie elit ut, eleifend dolor. Morbi fringilla enim ac lectus lobortis, ac convallis orci mollis. Ut tempus quam sodales, tincidunt dolor non, dapibus neque. Fusce elementum magna dolor, non suscipit est imperdiet
at. Vivamus mattis augue vestibulum, ultricies dui ac, finibus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Curabitur id cursus sapien. Phasellus placerat finibus vehicula. Donec
sit amet nisi eget risus venenatis euismod. Curabitur quis felis tempus, egestas ante eget, efficitur dolor. Duis ullamcorper commodo massa, a efficitur turpis finibus nec. Cras eget dui purus.
</div>
</div>
Or CSS tables for older browsers (as OP requested in comment)
html,
body {
margin: 0;
height: 100%;
}
.container {
display: table;
width: 100%;
height: 100%
}
.header {
display: table-row;
background: red
}
.content {
display: table-row;
background: green
}
<div class='container'>
<div class='header'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at libero ut arcu tincidunt porta. Vestibulum in ex nec neque rutrum vestibulum a nec eros. Morbi accumsan nisl in justo viverra, non euismod libero sagittis. Aenean vulputate tortor
molestie metus iaculis ornare. Vestibulum posuere, mauris eget tempor tincidunt, arcu risus eleifend felis, ac fringilla mauris lorem sit amet risus. Ut id ante eu nisl hendrerit tincidunt ac ut velit. Sed efficitur ante in neque mollis feugiat. Nulla
sed erat nec ipsum fermentum tristique. Sed auctor dolor quis fringilla ullamcorper. Duis luctus ligula nibh, ac facilisis eros dapibus at. Aliquam eget vestibulum sem, a euismod ante. Quisque at arcu arcu. Nunc massa tellus, imperdiet in facilisis
vitae, maximus at neque. Maecenas et dictum enim.</div>
<div class='content'>
Nam vehicula tempor est et ultrices. Cras elementum, mi ac pellentesque ultricies, dui urna rutrum risus, quis tristique ante eros in tellus. Quisque sit amet varius erat. Aliquam dapibus eros augue, et blandit nulla volutpat nec. Duis nibh lacus, scelerisque
in interdum in, hendrerit eget justo. Pellentesque finibus nisi sed fermentum aliquet. Mauris feugiat, magna in sagittis dapibus, neque justo convallis risus, eget rutrum metus tellus eget lorem. Suspendisse at turpis faucibus eros dapibus feugiat
vel at elit. Sed ac arcu tempor, molestie elit ut, eleifend dolor. Morbi fringilla enim ac lectus lobortis, ac convallis orci mollis. Ut tempus quam sodales, tincidunt dolor non, dapibus neque. Fusce elementum magna dolor, non suscipit est imperdiet
at. Vivamus mattis augue vestibulum, ultricies dui ac, finibus erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Curabitur id cursus sapien. Phasellus placerat finibus vehicula. Donec
sit amet nisi eget risus venenatis euismod. Curabitur quis felis tempus, egestas ante eget, efficitur dolor. Duis ullamcorper commodo massa, a efficitur turpis finibus nec. Cras eget dui purus.
</div>
</div>
Use display: flex
html, body { margin: 0; height: 100%; }
.container {
display: flex;
flex-direction: column;
height: 100%;
}
.header {
background: blue;
}
.content {
flex: 1;
background: red;
}
<div class='container'>
<div class='header'> Header </div>
<div class='content'>
Content
</div>
</div>
Or display: table
html, body { margin: 0; height: 100%; }
.container {
display: table;
width: 100%;
height: 100%;
}
.header {
display: table-row;
height: 0; /* shrink to fit content */
background: blue;
}
.content {
display: table-row;
background: red;
}
<div class='container'>
<div class='header'> Header </div>
<div class='content'>
Content
</div>
</div>
And merged with fallback, where flex kicks in if supported.
Note, the header's height: 0 is needed if it should shrink to content
html, body { margin: 0; height: 100%; }
.container {
display: table;
width: 100%;
height: 100%;
}
.header {
display: table-row;
height: 0; /* shrink to fit content */
background: blue;
}
.content {
display: table-row;
background: red;
}
#supports (display: flex) {
.container {
display: flex;
flex-direction: column;
}
.header {
display: block;
height: auto;
}
.content {
flex: 1;
display: block;
}
}
<div class='container'>
<div class='header'> Header </div>
<div class='content'>
Content
</div>
</div>