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>
This code below is using float to adjust image beside content.
how could i have the same result not using float or positions but only css grid or/and flex-box?(aiming to implement the picture below which red section is just one div and yellow could be an image beside the red not over-lapping it)
img {
float: left;
}
span {
background-color: tomato;
}
<div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos excepturi in modi nam nesciunt omnis quisquam, sed voluptates. Aspernatur at ea, explicabo facere illo iusto maiores nisi optio placeat quaerat quas quia ullam velit. Consequuntur culpa inventore saepe unde. Adipisci alias aspernatur blanditiis commodi consequuntur debitis dolorum ea eaque eos, est fugit ipsam iure, laudantium magni minima minus molestias mollitia neque officia pariatur perferendis quam quia quis reprehenderit sint tempore temporibus voluptatibus. Eos expedita nisi nobis quos reiciendis saepe tempora vero voluptas. Consequatur deleniti ea error Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ex incidunt maiores molestiae nulla optio ratione rerum, sed voluptatem. Dolorum, earum, ipsa? Animi dolore doloremque eos, inventore ipsum itaque nobis nulla porro, qui rem repellendus reprehenderit saepe sapiente tenetur totam vel, velit voluptatibus. Amet ducimus earum fuga fugit labore, magnam nemo optio praesentium quidem repellendus sit veniam veritatis. Ab accusamus culpa cum cumque, dicta dolore doloremque earum esse eveniet facilis iure iusto laboriosam maxime nihil possimus provident quaerat, quam quas quia quod repellat, repellendus repudiandae rerum Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab alias asperiores consectetur consequatur debitis dolore esse est eveniet illum laboriosam libero magni, molestias mollitia nemo nulla numquam odio perspiciatis quis similique temporibus vero vitae voluptates? Aliquid aperiam aut deleniti dignissimos incidunt necessitatibus perferendis velit. Accusantium animi aperiam architecto aspernatur atque consequuntur distinctio dolor dolorem ea eius esse et harum illum impedit in incidunt ipsam ipsum iste libero magnam neque perspiciatis porro qui, reprehenderit soluta tempore veniam vitae. Cupiditate ea eligendi fugiat officiis perferendis provident repellendus sit, sunt velit voluptatem! Asperiores consequatur deserunt inventore, minus molestias neque similique velit voluptates?sapiente sit tempore tenetur ullam ut vel voluptate. Doloribus eveniet facilis ipsam tenetur voluptatem. eum ipsum maxime minus, officia omnis optio praesentium quisquam ratione, recusandae rerum sunt tempore!</span>
</div>
Visual example of the question
You could do something like this. I've used approximations for the size of the div's just from what I see in your problem. But the end result is the same I suppose
.main{
display:flex;
background-color : red;
height:100vh;
}
.main div{
display:flex;
align-items: center;
}
p, span{
padding: 10px;
}
.main div:nth-child(1){
flex: 1;
height:50%;
background-color: yellow;
}
.main div:nth-child(2){
flex: 2;
height:50%;
}
<div class="main">
<div>
<p>Section 1</p>
</div>
<div>
<span>Section 2</span>
</div>
</div>
Hope this answer will helpful for you.
.flex_box {
display: flex;
justify-content: space-between;
}
.flex_box img {
width: 50%;
object-fit: contain;
}
.flex_box p {
width: 50%;
background-color: tomato;
color: #ffffff;
padding: 20px;
text-align: justify;
}
<div class="flex_box">
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos excepturi in modi nam nesciunt omnis quisquam, sed voluptates. Aspernatur at ea, explicabo facere illo iusto maiores nisi optio placeat quaerat quas quia ullam velit. Consequuntur culpa inventore saepe unde. Adipisci alias aspernatur blanditiis commodi consequuntur debitis dolorum ea eaque eos, est fugit ipsam iure, laudantium magni minima minus molestias mollitia neque officia pariatur perferendis quam quia quis reprehenderit sint tempore temporibus voluptatibus. Eos expedita nisi nobis quos reiciendis saepe tempora vero voluptas. Consequatur deleniti ea error Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet ex incidunt maiores molestiae nulla optio ratione rerum, sed voluptatem. Dolorum, earum, ipsa? Animi dolore doloremque eos, inventore ipsum itaque nobis nulla porro, qui rem repellendus reprehenderit saepe sapiente tenetur totam vel, velit voluptatibus. Amet ducimus earum fuga fugit labore, magnam nemo optio praesentium quidem repellendus sit veniam veritatis. Ab accusamus culpa cum cumque, dicta dolore doloremque earum esse eveniet facilis iure iusto laboriosam maxime nihil possimus provident quaerat, quam quas quia quod repellat, repellendus repudiandae rerum Lorem ipsum dolor sit amet, consectetur adipisicing elit. A ab alias asperiores consectetur consequatur debitis dolore esse est eveniet illum laboriosam libero magni, molestias mollitia nemo nulla numquam odio perspiciatis quis similique temporibus vero vitae voluptates? Aliquid aperiam aut deleniti dignissimos incidunt necessitatibus perferendis velit. Accusantium animi aperiam architecto aspernatur atque consequuntur distinctio dolor dolorem ea eius esse et harum illum impedit in incidunt ipsam ipsum iste libero magnam neque perspiciatis porro qui, reprehenderit soluta tempore veniam vitae. Cupiditate ea eligendi fugiat officiis perferendis provident repellendus sit, sunt velit voluptatem! Asperiores consequatur deserunt inventore, minus molestias neque similique velit voluptates? sapiente sit tempore tenetur ullam ut vel voluptate. Doloribus eveniet facilis ipsam tenetur voluptatem. eum ipsum maxime minus, officia omnis optio praesentium quisquam ratione, recusandae rerum sunt tempore!</p>
</div>
I created a popup with CSS and when I check it on mobile devices I can't scroll down.
.popup {
position: fixed;
left: 0;
right: 0;
top: 20%;
width: 100%;
max-width: 500px;
margin: auto;
background: #fff;
padding: 40px;
text-align: center;
box-shadow: 0 0 90px #aaa;
z-index: 410;
}
<div class="popup">
<h2>Login</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nulla facere, velit fuga. Natus suscipit, vel non, quas ullam accusamus eius at unde consequatur quo, quaerat. Quibusdam provident sunt adipisci, perspiciatis doloribus, porro consectetur, libero ad ipsa quo error nihil. Nisi, laboriosam illum sapiente enim exercitationem! Expedita quod, aliquid corporis eveniet veritatis harum eos ad minus eligendi a amet ipsam at neque saepe excepturi inventore nobis consequuntur magnam sint quas perspiciatis ratione ea tenetur facilis fugit. Ex consectetur sequi voluptas odio unde, dolorum amet, non eius minima eaque rerum, deleniti repellendus sunt accusantium culpa explicabo mollitia molestiae nobis! Architecto deserunt necessitatibus maxime. Nulla quis maxime veritatis reprehenderit aut, velit voluptatibus suscipit harum consequuntur atque doloribus fuga expedita ab laboriosam veniam animi, similique quo? Illum nisi odit voluptatum corporis accusantium ab, libero, dolorum nesciunt maiores quasi alias. Dolore hic, vero. Cupiditate velit error praesentium tempore consequatur ipsum repellat eaque ex, tenetur, saepe odit magnam omnis! Mollitia cum nesciunt quibusdam eos ea voluptas delectus doloribus ipsam nemo quisquam numquam ratione hic accusamus animi perferendis, qui laudantium dolorem nostrum. Voluptatum eveniet consequatur laudantium asperiores, quia esse explicabo nemo nam repellat voluptas ab dolorem maxime reiciendis nostrum, libero non minima? Sint sed aliquid dignissimos!</p>
</div>
Preview: https://jsfiddle.net/ea1grfqr/
Since it is a popup, I am assuming the position does not need to be fixed. Just change your position to absolute. Here's more about positioning.
.popup {
position: absolute;
left: 0;
right: 0;
top: 20%;
width: 100%;
max-width: 500px;
margin: auto;
background: #fff;
padding: 40px;
text-align: center;
box-shadow: 0 0 90px #aaa;
z-index: 410;
}
<div class="popup">
<h2>Login</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti nulla facere, velit fuga. Natus suscipit, vel non, quas ullam accusamus eius at unde consequatur quo, quaerat. Quibusdam provident sunt adipisci, perspiciatis doloribus, porro consectetur, libero ad ipsa quo error nihil. Nisi, laboriosam illum sapiente enim exercitationem! Expedita quod, aliquid corporis eveniet veritatis harum eos ad minus eligendi a amet ipsam at neque saepe excepturi inventore nobis consequuntur magnam sint quas perspiciatis ratione ea tenetur facilis fugit. Ex consectetur sequi voluptas odio unde, dolorum amet, non eius minima eaque rerum, deleniti repellendus sunt accusantium culpa explicabo mollitia molestiae nobis! Architecto deserunt necessitatibus maxime. Nulla quis maxime veritatis reprehenderit aut, velit voluptatibus suscipit harum consequuntur atque doloribus fuga expedita ab laboriosam veniam animi, similique quo? Illum nisi odit voluptatum corporis accusantium ab, libero, dolorum nesciunt maiores quasi alias. Dolore hic, vero. Cupiditate velit error praesentium tempore consequatur ipsum repellat eaque ex, tenetur, saepe odit magnam omnis! Mollitia cum nesciunt quibusdam eos ea voluptas delectus doloribus ipsam nemo quisquam numquam ratione hic accusamus animi perferendis, qui laudantium dolorem nostrum. Voluptatum eveniet consequatur laudantium asperiores, quia esse explicabo nemo nam repellat voluptas ab dolorem maxime reiciendis nostrum, libero non minima? Sint sed aliquid dignissimos!</p>
</div>
Below I have given the code for a scrollbar in HTML, see if this allows for the whole popup to be seen:
<div id="" style="overflow-y: scroll; height:400px;">
You'll need to change the height to your preference.
Need height for example 50% then use overflow: auto;
Works with position:fixed;
.popup {
height: 50%;
overflow: auto;
position: fixed;
left: 0;
right: 0;
top: 20%;
width: 100%;
max-width: 500px;
margin: auto;
background: #fff;
padding: 40px;
text-align: center;
box-shadow: 0 0 90px #aaa;
z-index: 410;
}
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 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