Related
I'm trying to position a div to the bottom right of the parent div. As shown in the image.
The parent div is filled with text so I have used the overflow-y property on the parent.
But when I tried to scroll the parent div, the child container started scrolling with it. I'm expecting the bottom container stay as it is at bottom right even on scroll.
Attatching the codesandbox link: https://codesandbox.io/s/relaxed-night-g96xce?file=/index.html
Code:
.text {
color: white;
font-size: 15px;
text-align: right;
}
.usage_body {
border: 1px solid #000;
width: 300px;
height: 300px;
padding: 10px;
overflow-y: scroll;
position: relative;
}
.chart-wrapper__graphLabel {
position: absolute;
bottom: 0;
right: 0;
width: 300px;
height: 30px;
background-color: #00f;
}
<div class="usage_body">
<div class="chart-wrapper">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
Est?
</div>
<div class="chart-wrapper__graphLabel">
<p class="text">
position me
</p>
</div>
</div>
You can use position:sticky as per the comments but the padding is also applied to the sticky element so you also have to set the padding-bottom to 0 or use translate to fix it to the very bottom of the frame like this.
Padding-bottom
.text {
color: white;
font-size: 15px;
text-align: right;
margin:0;
}
.usage_body {
border: 1px solid #000;
width: 300px;
height: 300px;
padding: 10px;
padding-bottom:0;
overflow-y: scroll;
position: relative;
}
.chart-wrapper__graphLabel {
position: sticky;
bottom: 0;
right: 0;
width: 300px;
height: 30px;
background-color: #00f;
}
<div class="usage_body">
<div class="chart-wrapper">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
Est?
</div>
<div class="chart-wrapper__graphLabel">
<p class="text">
position me
</p>
</div>
</div>
Translate with css variable
.text {
color: white;
font-size: 15px;
text-align: right;
margin:0;
}
.usage_body {
--padding: 10px;
border: 1px solid #000;
width: 300px;
height: 300px;
padding: var(--padding);
overflow-y: scroll;
position: relative;
}
.chart-wrapper__graphLabel {
position: sticky;
bottom: 0;
right: 0;
width: 300px;
height: 30px;
transform:translateY(var(--padding));
background-color: #00f;
}
<div class="usage_body">
<div class="chart-wrapper">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
Est?
</div>
<div class="chart-wrapper__graphLabel">
<p class="text">
position me
</p>
</div>
</div>
Using margin on the child element
Possibly a more straightforward approach would be to apply a margin to the content div then you can just position the footer right where you want it
.text {
color: white;
font-size: 15px;
text-align: right;
margin:0;
}
.usage_body {
border: 1px solid #000;
width: 300px;
height: 300px;
overflow-y: scroll;
position: relative;
}
.chart-wrapper {
margin:10px;
}
.chart-wrapper__graphLabel {
--left-margin: 10px;
position: sticky;
bottom: 0;
/* note, setting right:0 does not appear to work on widths less than 100% so used left:0 and transform:translateX instead */
left: 0;
width: calc(100% - var(--left-margin));
height: 30px;
transform: translateX(var(--left-margin));
background-color: #00f;
}
<div class="usage_body">
<div class="chart-wrapper">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas tempora nisi vitae tempore at voluptate similique recusandae? Modi quas qui nesciunt libero, autem, est officia ducimus nobis velit cum asperiores saepe, facilis nam corrupti ad eaque
laudantium provident nihil magnam. Delectus facere iure distinctio officiis, fuga rem molestiae magnam quam iusto enim. Repellat minima at, nostrum placeat consequuntur iusto quaerat molestias, pariatur aut odio, maiores cumque? Porro a sed nulla
architecto consequatur maxime praesentium asperiores ea, quasi enim veniam exercitationem neque necessitatibus, libero nemo modi, aspernatur ex sapiente quod. Nihil similique cum nobis quibusdam unde itaque et accusantium impedit. Veniam, illum! Eum
dolorum suscipit molestiae nihil officia nostrum deserunt laborum hic perferendis dolores asperiores illo perspiciatis, nemo tenetur harum recusandae explicabo quis ipsum amet ipsam vel fugiat assumenda eaque quia. Fugiat asperiores fugit voluptatum
aspernatur, animi facilis eos. Quod laudantium sunt eaque recusandae porro debitis consectetur nemo in placeat unde praesentium, obcaecati esse deserunt. Voluptate sit, ullam veniam doloribus optio blanditiis magni vero tempora sapiente! Explicabo
molestiae vel distinctio inventore, repellendus est mollitia tempora quae. Eius animi quisquam tenetur? Dolores placeat dolore sed nobis laboriosam. Dolore, unde! Recusandae amet natus odio totam cumque magnam unde mollitia pariatur iusto expedita.
Est?
</div>
<div class="chart-wrapper__graphLabel">
<p class="text">
position me
</p>
</div>
</div>
I wonder how can I set (with CSS grid only) layout for content that could be dynamic.
Let's say I have a Header, Body, and a sidebar.
the sidebar can be displayed, or not.
How can I apply such behaviour with CSS grid?
I want the header and the chart content to stretch over the .sidebar area when the .sidebar is not displayed
// Comment OR uncomment the .sidebar HTML tag
html, body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
display: flex;
}
.wrapper {
background: #fed;
height: 100%;
display: grid;
grid-template-columns: auto 300px;
grid-template-rows: 80px auto;
grid-auto-rows: 100px;
grid-template-areas:
"header sidebar"
"chart sidebar";
}
.header {
background: hotpink;
grid-column: 1/ 2;
grid-row: 1 /1;
overflow: auto;
}
.chart {
background: lightblue;
grid-column: 1/ 2;
grid-row: 2 / 2;
}
.sidebar {
background: rgba(255, 209, 62, 0.7);
grid-column: 2/ 2;
grid-row: 1 /span 2;
}
<div class="wrapper">
<div class="header"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio officiis deserunt cum, iusto veniam, perspiciatis atque dolore eum ab. Accusamus ratione repellat, laboriosam magnam exercitationem illum tempore quidem nam eveniet!</div>
<div>Iste nobis eveniet quibusdam aspernatur necessitatibus dolore perspiciatis fuga, quaerat ipsum minus eum placeat iure quas! Adipisci optio fugit laudantium voluptatem maiores, reiciendis laboriosam cupiditate blanditiis, quia consequatur voluptas! Nihil.</div>
<div>Nam dolorem atque, maxime ipsa aspernatur quo eveniet necessitatibus, dignissimos incidunt, sapiente quas eius tempore provident rem accusantium explicabo quia. Suscipit dolorem quo, voluptatum corporis. Enim minus repellat iure illum.</div>
<div>Ad voluptas, hic a vitae recusandae sit dignissimos beatae nemo eaque iusto culpa repudiandae quas asperiores repellendus nesciunt mollitia atque pariatur, reprehenderit rerum. Perspiciatis quod blanditiis deserunt iure consectetur tempore.</div>
<div>Placeat id, non quos incidunt rem, cumque, enim quidem consectetur obcaecati, dolor nihil beatae! Officiis necessitatibus nobis esse quaerat! Consectetur maiores praesentium libero hic at rem iste, assumenda vitae aperiam.</div>
<div>Illo tenetur libero nemo perspiciatis, quisquam minima sequi voluptate, dignissimos maiores hic aliquam et nobis quo iure, doloribus inventore repudiandae assumenda. Ad labore, quas alias explicabo excepturi saepe ullam repellendus!</div>
<div>Sint iure, hic quis eaque, deleniti asperiores quasi obcaecati cumque modi, iste laborum? Unde fugit quos itaque, molestias dolorum vero distinctio iste nisi ex repellat ut, voluptatem, ratione consectetur nihil?</div>
<div>Laudantium veniam aliquam provident doloremque excepturi eveniet iste illo consequatur eaque aut, ad, quae fugiat molestiae vitae autem laboriosam nulla accusantium. Tempora necessitatibus natus adipisci ab non, nihil quasi corporis!</div>
<div>Explicabo cumque unde tempore nihil, id. Nobis, iure veniam, dignissimos ullam nemo cumque voluptates voluptate atque eius unde tempora et, eos porro quo aut debitis. Consequatur neque, quaerat quae deleniti.</div>
<div>Repellat doloribus ipsa officia, debitis aspernatur blanditiis sit dignissimos nesciunt cum. Perspiciatis molestiae distinctio quas magni similique, mollitia obcaecati modi est ab quasi, ut. Sit libero adipisci sint consectetur molestias.</div></div>
<div class="chart">chart</div>
<!-- Comment / uncomment the sidebar -->
<div class="sidebar">sidebar</div>
</div>
No need to define the area for the sidebar. You can define the template to be one column and then force the sidebar to be on a second column which will create that column only when the sidebar is there (you will have an implicit defined grid)
// Comment OR uncomment the .sidebar HTML tag
body {
padding: 0;
margin: 0;
}
.wrapper {
background: #fed;
min-height: 100vh;
display: grid;
grid-template-rows: 80px auto;
grid-auto-rows: 100px;
}
.header {
background: hotpink;
overflow: auto;
}
.chart {
background: lightblue;
}
.sidebar {
background: rgba(255, 209, 62, 0.7);
grid-column: 2/ 2;
grid-row: 1 /span 2;
width:300px;
}
<div class="wrapper">
<div class="header"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio officiis deserunt cum, iusto veniam, perspiciatis atque dolore eum ab. Accusamus ratione repellat, laboriosam magnam exercitationem illum tempore quidem nam eveniet!</div>
<div>Iste nobis eveniet quibusdam aspernatur necessitatibus dolore perspiciatis fuga, quaerat ipsum minus eum placeat iure quas! Adipisci optio fugit laudantium voluptatem maiores, reiciendis laboriosam cupiditate blanditiis, quia consequatur voluptas! Nihil.</div>
<div>Nam dolorem atque, maxime ipsa aspernatur quo eveniet necessitatibus, dignissimos incidunt, sapiente quas eius tempore provident rem accusantium explicabo quia. Suscipit dolorem quo, voluptatum corporis. Enim minus repellat iure illum.</div>
<div>Ad voluptas, hic a vitae recusandae sit dignissimos beatae nemo eaque iusto culpa repudiandae quas asperiores repellendus nesciunt mollitia atque pariatur, reprehenderit rerum. Perspiciatis quod blanditiis deserunt iure consectetur tempore.</div>
<div>Placeat id, non quos incidunt rem, cumque, enim quidem consectetur obcaecati, dolor nihil beatae! Officiis necessitatibus nobis esse quaerat! Consectetur maiores praesentium libero hic at rem iste, assumenda vitae aperiam.</div>
<div>Illo tenetur libero nemo perspiciatis, quisquam minima sequi voluptate, dignissimos maiores hic aliquam et nobis quo iure, doloribus inventore repudiandae assumenda. Ad labore, quas alias explicabo excepturi saepe ullam repellendus!</div>
<div>Sint iure, hic quis eaque, deleniti asperiores quasi obcaecati cumque modi, iste laborum? Unde fugit quos itaque, molestias dolorum vero distinctio iste nisi ex repellat ut, voluptatem, ratione consectetur nihil?</div>
<div>Laudantium veniam aliquam provident doloremque excepturi eveniet iste illo consequatur eaque aut, ad, quae fugiat molestiae vitae autem laboriosam nulla accusantium. Tempora necessitatibus natus adipisci ab non, nihil quasi corporis!</div>
<div>Explicabo cumque unde tempore nihil, id. Nobis, iure veniam, dignissimos ullam nemo cumque voluptates voluptate atque eius unde tempora et, eos porro quo aut debitis. Consequatur neque, quaerat quae deleniti.</div>
<div>Repellat doloribus ipsa officia, debitis aspernatur blanditiis sit dignissimos nesciunt cum. Perspiciatis molestiae distinctio quas magni similique, mollitia obcaecati modi est ab quasi, ut. Sit libero adipisci sint consectetur molestias.</div></div>
<div class="chart">chart</div>
<!-- Comment / uncomment the sidebar -->
<div class="sidebar">sidebar</div>
</div>
Without sidebar:
// Comment OR uncomment the .sidebar HTML tag
body {
padding: 0;
margin: 0;
}
.wrapper {
background: #fed;
min-height: 100vh;
display: grid;
grid-template-rows: 80px auto;
grid-auto-rows: 100px;
}
.header {
background: hotpink;
overflow: auto;
}
.chart {
background: lightblue;
}
.sidebar {
background: rgba(255, 209, 62, 0.7);
grid-column: 2/ 2;
grid-row: 1 /span 2;
width:300px;
}
<div class="wrapper">
<div class="header"><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio officiis deserunt cum, iusto veniam, perspiciatis atque dolore eum ab. Accusamus ratione repellat, laboriosam magnam exercitationem illum tempore quidem nam eveniet!</div>
<div>Iste nobis eveniet quibusdam aspernatur necessitatibus dolore perspiciatis fuga, quaerat ipsum minus eum placeat iure quas! Adipisci optio fugit laudantium voluptatem maiores, reiciendis laboriosam cupiditate blanditiis, quia consequatur voluptas! Nihil.</div>
<div>Nam dolorem atque, maxime ipsa aspernatur quo eveniet necessitatibus, dignissimos incidunt, sapiente quas eius tempore provident rem accusantium explicabo quia. Suscipit dolorem quo, voluptatum corporis. Enim minus repellat iure illum.</div>
<div>Ad voluptas, hic a vitae recusandae sit dignissimos beatae nemo eaque iusto culpa repudiandae quas asperiores repellendus nesciunt mollitia atque pariatur, reprehenderit rerum. Perspiciatis quod blanditiis deserunt iure consectetur tempore.</div>
<div>Placeat id, non quos incidunt rem, cumque, enim quidem consectetur obcaecati, dolor nihil beatae! Officiis necessitatibus nobis esse quaerat! Consectetur maiores praesentium libero hic at rem iste, assumenda vitae aperiam.</div>
<div>Illo tenetur libero nemo perspiciatis, quisquam minima sequi voluptate, dignissimos maiores hic aliquam et nobis quo iure, doloribus inventore repudiandae assumenda. Ad labore, quas alias explicabo excepturi saepe ullam repellendus!</div>
<div>Sint iure, hic quis eaque, deleniti asperiores quasi obcaecati cumque modi, iste laborum? Unde fugit quos itaque, molestias dolorum vero distinctio iste nisi ex repellat ut, voluptatem, ratione consectetur nihil?</div>
<div>Laudantium veniam aliquam provident doloremque excepturi eveniet iste illo consequatur eaque aut, ad, quae fugiat molestiae vitae autem laboriosam nulla accusantium. Tempora necessitatibus natus adipisci ab non, nihil quasi corporis!</div>
<div>Explicabo cumque unde tempore nihil, id. Nobis, iure veniam, dignissimos ullam nemo cumque voluptates voluptate atque eius unde tempora et, eos porro quo aut debitis. Consequatur neque, quaerat quae deleniti.</div>
<div>Repellat doloribus ipsa officia, debitis aspernatur blanditiis sit dignissimos nesciunt cum. Perspiciatis molestiae distinctio quas magni similique, mollitia obcaecati modi est ab quasi, ut. Sit libero adipisci sint consectetur molestias.</div></div>
<div class="chart">chart</div>
<!-- Comment / uncomment the sidebar
<div class="sidebar">sidebar</div>
-->
</div>
I've run into a curious problem when trying to create a flexbox accordion. The problem is that sometimes the contents of a given accordion will act like flexbox elements even if I set display to block. This is best described by showing an example:
http://codepen.io/jcummins/pen/KpWzNY
$('item div.header').click(function(e){
$( this ).parent().toggleClass( "active" );
});
body {
height:100%;
width:100%;
background-color: #ccc;
margin:0;
padding:0;
}
container {
display:block;
position:absolute;
height: 100%;
width: 100%;
/* Formatting styles: safe to remove */ background-color: #999;
}
items {
height:100%;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
box-pack:top;
box-align:center;
/* Formatting styles: safe to remove */ background-color: #fc0;
}
item {
display:flex;
/* Formatting styles: safe to remove */
box-shadow:0 1px 3px rgba(0,0,0,.3);
margin-bottom: 6px;
margin-top: 6px;
margin-left: 8px;
margin-right: 8px;
border-bottom: 3px green solid;
background:#fff;
border-radius:5px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Arial, sans-serif;
font-weight:bold;
}
.active {
-webkit-box-flex: 9;
-moz-box-flex: 9;
box-flex: 9;
}
.header {
display:block;
width:100%;
}
/* Hide the contents and only show it when the selected menu becomes active */
contents {
display:none;
overflow:scroll;
}
.active contents {
display:block;*/
/*width:100%;
overflow:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<container>
<items>
<item>
<div class="header">Item 1</div>
<contents>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem quos enim explicabo non ipsum dicta minima, architecto, aliquid iusto itaque repudiandae tenetur aliquam nihil odio. Distinctio alias maxime aperiam impedit.</div>
<div>Quasi aliquam inventore hic veniam nobis nesciunt ratione quod unde, excepturi reprehenderit, error. Fuga tempora excepturi voluptas nihil labore veniam animi! Possimus distinctio ea molestias voluptate aspernatur corrupti porro libero!</div>
<div>Nostrum deserunt quia modi necessitatibus id ipsum asperiores. Facilis suscipit, nisi culpa veritatis iusto autem iste eos dolore quibusdam ex quis dolorum blanditiis ipsa at architecto earum cum cumque dolor.</div>
<div>Eaque, libero, nihil. Accusantium corporis id fugit doloremque reiciendis temporibus, cumque minus, aliquid aperiam qui voluptates! Ipsum repudiandae inventore porro iusto mollitia, ex aliquid reiciendis quisquam odit ea, eligendi illo?</div>
<div>Enim, vitae natus distinctio adipisci rem possimus minus aliquid voluptas corporis velit, ipsa, est eligendi alias veniam fugit eius non hic quibusdam quod placeat dolorum laboriosam, quaerat explicabo. Sint, odio.</div>
</contents>
</item>
<item class="active">
<div class="header">Item 2</div>
<contents>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nobis soluta architecto similique molestiae saepe porro accusamus natus ab, eum nihil quidem tempore harum suscipit autem voluptates, quia quae aliquam.</div>
<div>Dolorum ut mollitia nisi. Sapiente necessitatibus, ducimus minima commodi suscipit dolor modi dolorum ipsa, dolores, aliquid porro neque voluptas a cupiditate blanditiis qui sed est iste dolore eos rerum doloremque!</div>
<div>Minima itaque ad officia quas dolore expedita, ab hic tempora, enim cum consectetur! Doloribus ut, reiciendis ipsam veniam voluptates, labore voluptatem perferendis earum illo voluptatum inventore a voluptas porro cum?</div>
<div>Perferendis quasi nesciunt laboriosam debitis veniam quisquam officiis est, cumque ut consectetur quod eligendi odio ab sapiente! Vel laboriosam quisquam odit, doloremque veritatis reiciendis perspiciatis molestiae illum repellendus, velit amet.</div>
<div>Numquam ipsum, dolorum, nihil perspiciatis aspernatur blanditiis explicabo corporis assumenda dolorem facilis debitis et est fuga sit. Totam, veniam unde soluta rem recusandae explicabo, enim, modi pariatur tempore repellendus quo!</div>
<div>In, nisi minima ex autem consequatur. Sequi mollitia, velit officiis nisi, eos laudantium quibusdam accusamus dolores dicta tenetur vitae pariatur rem consequatur a praesentium aliquam quidem at fuga eligendi quam!</div>
<div>Minima minus impedit iste, deleniti asperiores nulla est, nisi optio repudiandae ducimus, corporis aperiam. Quod neque magnam, provident minima minus corporis debitis officiis laborum voluptas consectetur accusantium numquam placeat eum.</div>
<div>Labore maxime exercitationem, pariatur quaerat, nisi repellat ad reprehenderit modi et sint eum veniam iure odio dignissimos, ullam. Culpa quos, est dolorum dolores asperiores quia commodi laudantium tempora doloribus soluta.</div>
<div>Aspernatur voluptatem, dolorem vel eligendi. Veritatis, ut eius officia cupiditate dicta quisquam dolores voluptatem, quo saepe. Sequi ducimus quo provident tempore accusamus alias ipsum soluta consequatur quidem, aut, et, dolorum.</div>
<div>Doloribus beatae excepturi, et sunt libero laborum. Eius perspiciatis vitae, corporis temporibus molestias eum sit dolorum eos a fugit maiores earum suscipit labore, adipisci magnam reiciendis animi rerum culpa inventore.</div>
<div>Optio itaque fugit dolorum, labore inventore. Illo beatae, quas eius dolorem quasi, quaerat. Voluptatibus laboriosam, laudantium, similique corrupti minus, tempora explicabo atque aspernatur ab, possimus quibusdam adipisci mollitia iste neque.</div>
<div>Accusamus vel dolorem libero consectetur facere, quo quod maiores, illum enim tenetur! Odio dicta repellendus, earum optio officiis consequatur dolore laboriosam fugit laudantium ad harum distinctio nesciunt accusantium vero, quaerat.</div>
<div>Eaque voluptatibus excepturi minima fuga ab voluptas ex dolore perspiciatis earum. Fugit eius natus, libero voluptates sunt autem quod consequuntur tempore! Velit rem tenetur est molestias quod quae modi inventore.</div>
<div>Quasi, quo nulla, hic ut veniam tempora dolorum veritatis eum animi repudiandae nisi eaque numquam temporibus consequatur odio voluptatum obcaecati mollitia neque amet, sunt quidem iure laboriosam eveniet. Quo, quas!</div>
<div>Officia fuga ipsum ullam deserunt rem praesentium quasi! Alias consectetur esse nobis commodi nam, placeat nesciunt, aspernatur quia asperiores officia fugiat delectus, nulla corporis saepe distinctio culpa aliquid adipisci amet.</div>
</contents>
</item>
<item>Item 3</item>
<item>Item 4</item>
<item>Item 5</item>
</items>
</container>
My expected behavior would be that Item 1 would be on one line and the <contents> would be on another line. Instead, it seems to be a 50-50 split.
Specifically it seems that this rule is not doing what I expect:
.header {
display: block;
width: 100%;
}
display: flex; applies to the containing element, and tells it that all of it's children should now be in a flex context.
Your style rule doesn't actually add anything, because by default the .header element is already a block element.
If you want a flex context for all elements except the header, you will likely want to wrap only those elements in an additional container, and set that container to be display: flex;, rather than overall main container
My expected behavior would be that Item 1 would be on one line and the
<contents> would be on another line.
That doesn't happen because the initial value of flex-wrap is nowrap. If you want multiple lines, use wrap:
item {
flex-wrap: wrap;
}
$('item div.header').click(function(e){
$( this ).parent().toggleClass( "active" );
});
body {
height:100%;
width:100%;
background-color: #ccc;
margin:0;
padding:0;
}
container {
display:block;
position:absolute;
height: 100%;
width: 100%;
/* Formatting styles: safe to remove */ background-color: #999;
}
items {
height:100%;
display: -webkit-box;
display: -moz-box;
display: box;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
box-orient: vertical;
box-pack:top;
box-align:center;
/* Formatting styles: safe to remove */ background-color: #fc0;
}
item {
display:flex;
flex-wrap: wrap;
/* Formatting styles: safe to remove */
box-shadow:0 1px 3px rgba(0,0,0,.3);
margin-bottom: 6px;
margin-top: 6px;
margin-left: 8px;
margin-right: 8px;
border-bottom: 3px green solid;
background:#fff;
border-radius:5px;
padding-left: 20px;
padding-top: 10px;
padding-bottom: 10px;
font-family: Arial, sans-serif;
font-weight:bold;
}
.active {
-webkit-box-flex: 9;
-moz-box-flex: 9;
box-flex: 9;
}
.header {
display:block;
width:100%;
}
/* Hide the contents and only show it when the selected menu becomes active */
contents {
display:none;
overflow:scroll;
}
.active contents {
display:block;*/
/*width:100%;
overflow:scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<container>
<items>
<item>
<div class="header">Item 1</div>
<contents>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem quos enim explicabo non ipsum dicta minima, architecto, aliquid iusto itaque repudiandae tenetur aliquam nihil odio. Distinctio alias maxime aperiam impedit.</div>
<div>Quasi aliquam inventore hic veniam nobis nesciunt ratione quod unde, excepturi reprehenderit, error. Fuga tempora excepturi voluptas nihil labore veniam animi! Possimus distinctio ea molestias voluptate aspernatur corrupti porro libero!</div>
<div>Nostrum deserunt quia modi necessitatibus id ipsum asperiores. Facilis suscipit, nisi culpa veritatis iusto autem iste eos dolore quibusdam ex quis dolorum blanditiis ipsa at architecto earum cum cumque dolor.</div>
<div>Eaque, libero, nihil. Accusantium corporis id fugit doloremque reiciendis temporibus, cumque minus, aliquid aperiam qui voluptates! Ipsum repudiandae inventore porro iusto mollitia, ex aliquid reiciendis quisquam odit ea, eligendi illo?</div>
<div>Enim, vitae natus distinctio adipisci rem possimus minus aliquid voluptas corporis velit, ipsa, est eligendi alias veniam fugit eius non hic quibusdam quod placeat dolorum laboriosam, quaerat explicabo. Sint, odio.</div>
</contents>
</item>
<item class="active">
<div class="header">Item 2</div>
<contents>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque nobis soluta architecto similique molestiae saepe porro accusamus natus ab, eum nihil quidem tempore harum suscipit autem voluptates, quia quae aliquam.</div>
<div>Dolorum ut mollitia nisi. Sapiente necessitatibus, ducimus minima commodi suscipit dolor modi dolorum ipsa, dolores, aliquid porro neque voluptas a cupiditate blanditiis qui sed est iste dolore eos rerum doloremque!</div>
<div>Minima itaque ad officia quas dolore expedita, ab hic tempora, enim cum consectetur! Doloribus ut, reiciendis ipsam veniam voluptates, labore voluptatem perferendis earum illo voluptatum inventore a voluptas porro cum?</div>
<div>Perferendis quasi nesciunt laboriosam debitis veniam quisquam officiis est, cumque ut consectetur quod eligendi odio ab sapiente! Vel laboriosam quisquam odit, doloremque veritatis reiciendis perspiciatis molestiae illum repellendus, velit amet.</div>
<div>Numquam ipsum, dolorum, nihil perspiciatis aspernatur blanditiis explicabo corporis assumenda dolorem facilis debitis et est fuga sit. Totam, veniam unde soluta rem recusandae explicabo, enim, modi pariatur tempore repellendus quo!</div>
<div>In, nisi minima ex autem consequatur. Sequi mollitia, velit officiis nisi, eos laudantium quibusdam accusamus dolores dicta tenetur vitae pariatur rem consequatur a praesentium aliquam quidem at fuga eligendi quam!</div>
<div>Minima minus impedit iste, deleniti asperiores nulla est, nisi optio repudiandae ducimus, corporis aperiam. Quod neque magnam, provident minima minus corporis debitis officiis laborum voluptas consectetur accusantium numquam placeat eum.</div>
<div>Labore maxime exercitationem, pariatur quaerat, nisi repellat ad reprehenderit modi et sint eum veniam iure odio dignissimos, ullam. Culpa quos, est dolorum dolores asperiores quia commodi laudantium tempora doloribus soluta.</div>
<div>Aspernatur voluptatem, dolorem vel eligendi. Veritatis, ut eius officia cupiditate dicta quisquam dolores voluptatem, quo saepe. Sequi ducimus quo provident tempore accusamus alias ipsum soluta consequatur quidem, aut, et, dolorum.</div>
<div>Doloribus beatae excepturi, et sunt libero laborum. Eius perspiciatis vitae, corporis temporibus molestias eum sit dolorum eos a fugit maiores earum suscipit labore, adipisci magnam reiciendis animi rerum culpa inventore.</div>
<div>Optio itaque fugit dolorum, labore inventore. Illo beatae, quas eius dolorem quasi, quaerat. Voluptatibus laboriosam, laudantium, similique corrupti minus, tempora explicabo atque aspernatur ab, possimus quibusdam adipisci mollitia iste neque.</div>
<div>Accusamus vel dolorem libero consectetur facere, quo quod maiores, illum enim tenetur! Odio dicta repellendus, earum optio officiis consequatur dolore laboriosam fugit laudantium ad harum distinctio nesciunt accusantium vero, quaerat.</div>
<div>Eaque voluptatibus excepturi minima fuga ab voluptas ex dolore perspiciatis earum. Fugit eius natus, libero voluptates sunt autem quod consequuntur tempore! Velit rem tenetur est molestias quod quae modi inventore.</div>
<div>Quasi, quo nulla, hic ut veniam tempora dolorum veritatis eum animi repudiandae nisi eaque numquam temporibus consequatur odio voluptatum obcaecati mollitia neque amet, sunt quidem iure laboriosam eveniet. Quo, quas!</div>
<div>Officia fuga ipsum ullam deserunt rem praesentium quasi! Alias consectetur esse nobis commodi nam, placeat nesciunt, aspernatur quia asperiores officia fugiat delectus, nulla corporis saepe distinctio culpa aliquid adipisci amet.</div>
</contents>
</item>
<item>Item 3</item>
<item>Item 4</item>
<item>Item 5</item>
</items>
</container>
Is there any way to create div with a style to drill all the underlying layers up to the background? Wherever such DIV is placed, it should provide an eraser effect. Basically, I'm interested in CSS, but would appreciate if you could suggest any method to reach following result.
Sample is below:
(1) - background
(2) - middle layer's (can be multiple)
(3) - upper div (like eraser, makes all underlying divs transparrent, except background)
You can't actually 'drill' a hole but you can overlay your content with a box that eg. has same fixed background as the box in the background using background-attachment: fixed;
.box1, .box3 {
background: url("http://placekitten.com/g/800/600") repeat fixed center center rgba(0, 0, 0, 0);
}
.box2 {
background: rgba(255,255,255,0.6);
min-height: 200px;
width: 80%;
margin: 0 auto;
padding: 2em;
position: relative;
}
.box3 {
width: 200px;
height: 200px;
border-radius: 50%;
position: fixed;
top: 25%;
left: 25%;
border: 4px solid red;
pointer-events: none; /* ignore pointer events */
}
<body class="box1">
<div class="box2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed earum repellendus voluptatem a iusto ex, incidunt animi ipsam, nesciunt qui quod minima nobis, veniam cum temporibus numquam at obcaecati ipsa fugiat facilis asperiores dignissimos? Ipsa molestiae minima iusto at qui explicabo asperiores, perspiciatis soluta nemo tempore dolore sit optio voluptatum!</p>
<p>Quod eos repudiandae nobis incidunt vitae impedit dolores doloremque, debitis sed. Eos voluptate, dolorem odio labore laudantium corrupti molestias natus nisi laborum? Officiis saepe ad voluptates alias ab temporibus quo esse ut neque fugit? Praesentium eaque possimus provident sunt id, iure soluta aperiam, corrupti esse labore voluptate animi odio autem!</p>
<p>Explicabo nostrum aspernatur, voluptas rem dicta consequuntur modi vel quae! Enim error aspernatur rem ea sapiente ratione sequi nulla numquam pariatur debitis dolorum saepe voluptates odit architecto minima, tempora iusto magni repudiandae assumenda vel quisquam eos placeat minus mollitia! Deserunt nisi eligendi, excepturi impedit quam eaque fugiat quia, suscipit consectetur.</p>
<p>Doloribus repellat explicabo magni cupiditate possimus quisquam, a ullam labore maxime quam voluptatibus blanditiis, voluptate alias recusandae fugit eos distinctio. A rerum fugit deserunt suscipit sint quibusdam voluptatum obcaecati blanditiis laudantium distinctio dolor nobis molestiae facilis earum voluptate natus, omnis vitae, tempore modi! Molestiae maxime adipisci fuga accusamus soluta neque.</p>
<p>Quas culpa, harum, eos velit atque placeat eaque fugiat nobis quo quae ex quos molestiae pariatur. Cumque sed ab dolorum assumenda nisi, sit, unde in. Nihil reiciendis provident, mollitia ipsa accusantium cumque ipsam magnam tempora natus a nesciunt dolorum, inventore culpa sapiente pariatur magni obcaecati tenetur sit voluptatem recusandae porro.</p>
<p>Culpa, id, amet! Ipsum natus ab, voluptatem maiores similique quod. Culpa asperiores perferendis non sit reprehenderit quaerat, soluta suscipit deserunt? Repellat vero tenetur quaerat, magnam dicta delectus consequatur doloribus? Illum magnam, veritatis sapiente delectus ratione molestiae libero similique praesentium accusantium repellat. Porro sunt vero dolores, voluptas laudantium, nisi tempore saepe!</p>
<p>Vero minima aliquam sapiente dolorem harum obcaecati enim itaque atque molestias deserunt numquam dicta, natus eaque consectetur voluptatibus, adipisci voluptas molestiae cupiditate nulla fuga voluptatem impedit quis magnam accusantium. Accusantium asperiores, nisi reprehenderit consequatur facilis. Recusandae maxime nobis ullam ducimus vel deleniti explicabo sint soluta. Modi recusandae temporibus consectetur, libero.</p>
<p>A facilis nemo hic quae fugit, aliquam ipsa facere ullam voluptate architecto cum ducimus, debitis quod eum corporis. Sapiente dicta quisquam enim beatae qui unde perferendis nostrum vel iusto fugiat saepe obcaecati quasi velit, repudiandae veniam odit quam exercitationem non eius et similique voluptate explicabo natus. Dolorum quaerat, nam reiciendis!</p>
<p>Et quisquam, cum magnam dolorum eveniet quas dolorem. Aperiam optio distinctio quidem quasi recusandae eaque, earum ad rerum voluptatem enim soluta explicabo quas dolorum consequatur quis pariatur? Ipsam totam, minima iste cumque consequuntur quae natus blanditiis commodi velit quo nulla tempore voluptas veniam! Accusamus quisquam quidem omnis voluptatem, voluptas inventore.</p>
<p>At earum similique deserunt nulla, aut autem, reprehenderit perspiciatis provident, nesciunt tempora commodi eius vitae quasi ad ea minima voluptates temporibus excepturi hic modi tenetur. Earum vel quia error sed, distinctio, beatae laborum suscipit dignissimos cumque? Quasi excepturi aliquid nulla placeat, reiciendis soluta vitae illum quisquam assumenda quibusdam quod cum.</p>
</div>
<div class="box3"></div>
</body>
You can "fake" it by using the background image as div's background.
The basic idea is to display a background image in DIV #1, and a portion of the same image on DIV #3. It looks like he middle DIV is transparent, but we're actually placing a patch on top to make it look that way.
<!DOCTYPE html>
<html>
<head>
<style>
.s1 {
background-color: gray;
background-image: url('http://images.wisegeek.com/forest.jpg');
background-repeat: no-repeat;
background-position: 0px 0px;
}
.s3{
background-image: url('http://images.wisegeek.com/forest.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id="div1" class="s1" style="position:relative; top:50px; left:50px; height:200px; width:300px;">
<div id="div2" style="position:absolute; top:20px; left:20px; height:60px; width:260px;">Now is the time for all good men to come to the aid of their party. Now is the time for all good men to come to the aid of their party.</div>
<div id="div3" class="s3" style="position:absolute; top:30px; left:30px; height:50px; width:50px; background-position: -30px -30px;"></div>
</body>
</html>
Is there any way to stick a footer to the bottom of the browser screen or right after the content (depending on which is longer) using CSS without knowing the size of the footer in advance?
Right now I am using the absolute positioning in a container that holds the footer and the content with container's min-height as 100%, but if I change the footer I find I must change the padding at the bottom of the container to match its height.
http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
Summary:
For a site with a header, content area, and footer:
Set html, body {height: 100%;}
Set your body (or a wrapper div) to display: table; width: 100%; height: 100%;
Set your header, footer, and content area to display: table-row;. Give your header and footer height: 1px;, and give your content area height: auto;
The header and footer will both expand to fit their content. The content area will expand to fit the larger of its content, or the available space.
https://jsfiddle.net/0cx30dqf/
If you're willing to jump into the HTML5 future, you can use flexbox...
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
My more detailed answer to the same question: How to make a fluid sticky footer (full example: http://jsfiddle.net/n5BaR/)
Solved by flexbox: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
What is Flexbox from MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
Try this!
Uses Flex!
NO FIXED HEIGHT, JAVASCRIPT OR TABLES
Expands when more content, and when there isn't it sticks to bottom
Note: Does not work with IE 9 & Below
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
body{
min-height: 100%;
display: flex;
flex-direction: column;
}
.content{
flex: 1;
background: #ddd;
}
<body>
<header>
Header
</header>
<div class='content'>
This is the page content
<br>
PS. Don't forget the margin: 0 and padding: 0 to avoid scrollbars (this can be also put into the body css)
</div>
<footer>
Footer
</footer>
</body>
For an app with a responsive footer (i.e. changes height on resize), you can use jquery to dynamically adjust the padding of the bottom for the parent element. Adding onto this post: Keep Footer at Bottom
HTML:
<div class=”main-container”>
<header>
this is a header
</header>
<section>
this is content
</section>
<footer>
this is a footer
</footer>
</div>
CSS:
html,
body {
height: 100%;
position: relative;
}
.main-container {
min-height: 100vh; /* will cover the 100% of viewport */
overflow: hidden;
display: block;
position: relative;
padding-bottom: 100px; /* height of your footer */
}
footer {
position: absolute;
bottom: 0;
width: 100%;
}
CoffeeScript:
footerEventListener = ->
$(window).on "resize", ->
setFooterHeight()
setFooterHeight = ->
// get footer height in px
bottomPadding = $("footer").css("height")
$(".main-wrapper").css("padding-bottom", "#{bottomPadding}")
// init footer events
setFooterHeight()
footerEventListener()
Check out the CodePen here.
since no one knows the answer for sticky footer w/o knowing the height of it, using css (crosbrowser solution), i was forced to calculate it
jquery:
if( $(document).height() < $(window).height() )
{
$('#content').height
(
$(window).height - $('#footer').height()
);
}
html structure:
<div id="content"></div>
<div id="footer"></div>
I think the best way is just add a class to your footer. Javascript will do the rest.
//This Pen is By Mohammad Abdus Salam
//portfolio.codeexposer.com
var footerHeight = $('footer.fixed_footer').height();
if($('footer').hasClass('fixed_footer')){
$( "section" ).last().css({
"margin-bottom": footerHeight + 'px'
});
}
#import url('https://fonts.googleapis.com/css?family=Raleway:400,700,800');
body{
margin: 0;
padding: 0;
text-align:center;
font-family: 'Raleway', sans-serif;
line-height: 30px;
}
section{
padding-top: 80px;
padding-bottom: 80px;
border-bottom:1px solid #ddd;
background: #ffffff;
z-index: 9;
}
h1{
font-size: 48px;
font-weight: 800;
text-transform: capitalize;
}
a{
text-decoration: none;
}
.container{
width: 700px;
display: inline-block;
box-sizing:border-box;
padding-left: 30px;
padding-right: 30px;
}
.logo{
height: 80px;
width: 80px;
display: inline-block;
}
.footer_top{
border-bottom: 1px solid #777;
padding-bottom: 60px;
}
.logo img{
width: 100%;
height: 100%;
}
.footer_bottom {}
.footer_bottom p{
color:#aaa;
}
.footer_top{
padding-top: 100px;
}
.footer_bottom p a{
color:#158;
}
footer{
width: 100%;
left: 0;
bottom:0px;
z-index: -1;
background: #222222;
}
.fixed_footer{
width: 100%;
position:fixed;
left: 0;
bottom:0;
z-index: -99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is About</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Service</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Portfolio</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<section>
<div class="container">
<h1>This is Banner</h1>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dicta fugiat amet explicabo illum, soluta quisquam minus consectetur totam omnis non veniam possimus atque nisi earum aperiam quasi ut, quas temporibus minima eius, rem repellat. Sed eius quae eum qui odio molestiae porro. Aut ab impedit recusandae odit at? Quas ab laboriosam culpa, rerum nobis consequatur voluptate nemo expedita voluptatem porro aliquid dolorum maiores autem dolorem unde mollitia quae nam fugit. At quibusdam error consequatur suscipit? Necessitatibus asperiores, doloribus accusamus odit quidem deserunt cum reiciendis aliquid ipsam alias distinctio recusandae earum nam nulla ratione quia architecto beatae nihil expedita blanditiis animi sit, exercitationem tempora placeat. Accusamus ad odio natus, pariatur sed tenetur debitis. Soluta distinctio velit beatae asperiores eligendi? Neque quasi doloremque cumque placeat ea sapiente recusandae harum veritatis corrupti! Ad, alias, at cum debitis sit obcaecati vitae nesciunt aliquam nulla laudantium ut sunt veniam distinctio mollitia sed neque qui sint repudiandae adipisci deserunt perspiciatis consectetur optio blanditiis? Unde distinctio dolorum laboriosam dolorem ex in, porro facilis ad velit beatae excepturi ut aspernatur! At sunt tempora, placeat veritatis excepturi hic repellendus pariatur dolores deserunt cupiditate exercitationem laborum itaque sapiente nostrum non, quibusdam explicabo velit dolorum cum. Maiores, accusamus! Iusto, rem doloribus?
</p>
</div>
</section>
<footer class="fixed_footer">
<div class="container">
<div class="footer_top">
<a class="logo" href="portfolio.codeexposer.com">
<img src="https://lh3.googleusercontent.com/-a700z77yIxk/AAAAAAAAAAI/AAAAAAAAABM/RzvY_qm9KQY/s512-p/photo.jpg" alt="">
</a>
</div>
<div class="footer_bottom">
<p>
All Rights Reserved By Mohammad Abdus Salam
</p>
</div>
</div>
</footer>
Take a look at this, cssstickyfooter, it works great in any browser.
Update: This is from 2010, might not be relevant with current standards