I try to achieve a Layout with nested min-height divs and a sliding footer.
The problem of course is that die inner min-height div is not expanding to the full heights of the outer div because the outer divs height is set with min-height.
here is the html:
<div class="container">
<section class="pos-container">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, voluptates, qui eos dignissimos quae nobis at provident voluptatum dicta nesciunt possimus iusto vitae nihil hic assumenda aspernatur quos vel necessitatibus.</p>
</section>
</div>
<footer>
i'm footer
</footer>
and the css:
body {
background-color: grey;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow-y: scroll;
}
.container {
z-index: 1;
position: relative;
width: 100%;
min-height: 100%;
background-color: pink;
margin-bottom: 6em;
}
.pos-container {
position: relative;
width: 50em;
min-height: 100%;
margin: auto;
background-color: green;
}
footer {
z-index: 0;
position: fixed;
bottom: 0;
width: 100%;
height: 6em;
}
FIDDLE #1
In this Fiddle the height of the inner div (green) is not expanding to the height of the outer div(pink).
FIDDLE #2
Seems fixed if i set the height of the outer div from min-height to height but there is another problem if the height of the inner div is more than 100% as you can see in FIDDLE #3
Is there any pure css solution for this problem?
Thanks in advance!
Remove the height for body or make it height:auto;
Check this FIDDLE
CSS change
body{
height:100%; // remove this and add below line
height:auto;
}
Related
I am trying to make my image cover the whole div which is 50% of the parent div. I used object-fit:cover but it's still not working. The problem is as I reduce the width of window the image also shortens.
In (1) the width is full
The 2nd picture is 900px window size.
* {
box-sizing: border-box;
}
body {
background: yellow;
}
section {
background: red;
widtth: 100%;
min-height: 700px;
}
article {
background: green;
width: 50%;
min-height: 700px;
padding: 100px;
float: left;
}
picture {
float: left;
width: 50%;
min-height: 700px;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
section::after {
content: "";
clear: both;
display: block;
}
<body>
<section class="about">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor
sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<picture>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</picture>
</section>
</body>
I have linked the code pen link below for reference.
https://codepen.io/YASH_KR18/pen/LYObNrB
Simple solution, add display:flex to its parent element which is picture will make it work.
* {
box-sizing: border-box;
}
body {
background: yellow;
}
section {
background: red;
width: 100%;
min-height: 700px;
}
article {
background: green;
width: 50%;
min-height: 700px;
padding: 100px;
float: left;
}
picture {
float: left;
width: 50%;
min-height: 700px;
display:flex
}
img {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
section::after {
content: "";
clear: both;
display: block;
}
<body>
<section class="about">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor
sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<picture>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</picture>
</section>
</body>
Because you are using the extra picture tag for that
I am avoiding that tag because I see no need of that in this whole code. If you want to use the picture tag vary badly we have to think of something else. Here take a look:
HTML
<body>
<section class="about">
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</section>
</body>
CSS
*{
box-sizing:border-box;
}
body{
background:yellow;
}
section{
background:red;
widtth:100%;
min-height:700px;
}
article{
background:green;
width:50%;
min-height:700px;
padding:100px;
float:left;
}
img{
float:left;
width:50%;
min-height:700px;
}
section::after{
content:"";
clear:both;
display:block;
}
Floating elements (removing them from the normal flow of the html structure) is the source of a lot of problems. If you would use a flexbox or gridbox for the parent element then there would be no need to float the children to position them next to eachother and then I believe your problem is solved. Well that is if the snippet below does what you're after at least! If not I might not understand your question yet.
/* Colors for visibilty */
body{ background-color: yellow;}
article{ background-color: green; padding: 100px;}
picture{ background-color: red; }
/* The problem fix*/
section
{
display: grid;
grid-template-columns: 50% 50%;
width: 80%;
max-width: 1100px;
min-height: 700px;
margin: auto;
}
picture img{
object-position: center;
object-fit: cover;
width: 100%;
height: 100%;
}
<section>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur expedita laudantium, ea eos fugiat dolores laboriosam voluptas illo deleniti pariatur ratione nobis perferendis in consectetur rerum ipsa debitis quis numquam! Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam unde placeat ratione magnam tempore velit accusamus ipsam quaerat aspernatur maiores?</p>
</article>
<picture>
<img src="https://www.loveinartsz.com/wp-content/uploads/2021/03/b04803919effa1914ae6754d8bee30fb.jpg" alt="">
</picture>
</section>
I can't get max-width to work when using absolute positioning. In https://jsfiddle.net/jn2bs6ax/ the item should take as little width as possible, up to the max-width of 1000px. But it's taking a width of about 50% and wrapping the text. How to make it work? If I set the max-width to something small like 300px it works, but anything larger than what it's width currently is doesn't cause it to expand.
This example just shows an item that's been absolutely positioned to the center below an item, but I use transform, top, bottom, left and right to position things in all 4 directions relative to an item. The solution should work with all 4 cases.
There's a similar question CSS (position:absolute + left:50% = max-width:50%)? but the answer only works with centering below but not for all cases like positioning to right of an item vertically centered.
<div class="relative">
text
<div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
text
</div>
css
.relative {
position: relative;
}
.absolute {
position: absolute;
background-color: grey;
max-width: 100%;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
Try setting display: inline-table; or display: table;
.relative {
position: relative;
}
.absolute {
position: absolute;
background-color: grey;
max-width: 1000px;
top: 100%;
left: 50%;
transform: translateX(-50%);
display: inline-table;
}
<div class="relative">
text
<div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
text
</div>
Try add width: 100%; for your class along max-width in any place.
.relative {
position: relative;
}
.absolute {
position: absolute;
background-color: grey;
max-width: 1000px;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 100%;
}
<div class="relative">
text
<div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
text
</div>
As you already noticed, the issue is related to left:50% that will restrict the width of the element to 50% of the parent element.
One hacky way to overcome this is to increase the width of the parent element by adding more padding since absolute element will consider the padding-box. Then you add negative margin to rectify the added padding. You should simply pay attention to overflow:
.relative {
position: relative;
padding:0 50%;
margin:0 -50%;
}
.absolute {
position: absolute;
background-color: grey;
max-width: 800px;
top: 100%;
left: 50%;
transform: translateX(-50%);
}
.hide {
overflow:hidden;
height:500px;
}
<div class="hide">
<div class="relative">
text
<div class="absolute">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim recusandae doloribus nesciunt unde vitae quis aliquid laborum adipisci ipsa, dolorem repellendus nulla iure atque minus fuga sunt rem eaque animi.</div>
text
<div class="absolute" style="top:200px;">Lorem ipsum dolor sit amet</div>
</div>
</div>
I have a footer right now that will stick to the bottom of the page but when it runs up to content it will sit over top of it. I obviously want it to be pushed down by whatever container content it comes next to.
Here is a screenshot:
I would like the bottom of that table to push it down. Here is my CSS and HTML
BODY AND CONTAINER CSS
body {
color: $base-text-color;
margin: 0;
padding: 0;
background-color: $base-background-color;
}
.container {
max-width: 1200px;
margin: 18px auto 0;
text-align: center;
margin-bottom: 40px;
}
FOOTER CSS
.footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
}
APPLICATION HTML
<body>
<%= render 'shared/top_bar' %>
<div class="container">
<%= render 'shared/errors' %>
<%= yield %>
</div>
<%= render 'shared/footer' %>
</body>
I'm really stumped by this one and can't seem to find the answer! All help would be great thanks!
What you want is a sticky footer and not a fixed one. Fixed, the content will not push it. Sticky, it will remain at the bottom until it's pushed by content. Please beware that inserting a padding into the footer affects it's size and you have to adjust other measures for this to work correctly.
Please note that I added a padding of 20px to the .container so I had to increase 40px on the bottom margin and on the .push div.
I would also advise that you should use Footer element instead of a div .footer
Here is the code
CSS
html, body {
height: 100%;
margin:0;
padding:0;
}
.container {
max-width: 1200px;
text-align: center;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -80px;
overflow: auto;
padding:20px;
}
.push {
height: 80px;
margin-top: 0;
}
.footer {
height: 40px;
margin-top: 0;
width: 100%;
background: red;
border: 0;
}
HTML
<body>
<div class="container">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam
<div class="push"></div>
</div>
<div class="footer">Footer</div>
</body>
http://codepen.io/luisalves/pen/ggZWGv
i have added css in your code from line 6
as your footer's height is fixed i have leveraged that fact
please read it and comment if you dont understand
body {
color: black;
margin: 0;
padding: 0;
background-color: green;
/*magic is here */
box-sizing: border-box;
min-height: 100vh;
position: relative;
padding-bottom: 40px;
/*magic ends here */
}
.container {
max-width: 1200px;
margin: 18px auto 0;
text-align: center;
margin-bottom: 40px;
}
.footer {
height: 40px;
width: 100%;
position: absolute;
bottom: 0;
text-align: center;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
lorem*10
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quia accusamus, aut consequuntur harum velit, cupiditate nisi quos soluta nihil tempore. Sint facere aliquid officia atque molestiae, nulla numquam excepturi.</div>
<div class="footer">i am here</div>
</body>
</html>
try adding different div for footer...
something like this
<html>
<body>
<form id="form1" runat="server">
<div>
..some code..
</div>
<div id="footer">
<p align="center">Copyright ©</p>
</div>
</form>
</body>
</html>
I've been trying different ways but couldn't achieve what I want.
<div id="parent">
<div id="child-1"></div>
<div id="child-2"></div>
<div id="child-3"></div>
</div>
So I have the #parent at height: 100vh.
#child-1 should have height: 100% of parent.
#child-2 and #child-3 should have width: 100% and height: auto and they should be stacked on top of each other at position bottom: 0.
I've been trying to set parent relative and two childs absolute but the first child's height gets ignored.. I tried with display flex but first child's height is not 100% of parent.. I'm very confused how to do this.
Can someone help?
Here is what I'm trying to achieve: jsfiddle.net
You have to first get the bottom value of #child-2 dynamically as you said it should be on the top of #child-3.
You need to apply jQuery to get the height of #child-3 dynamically and then applying the height value of #child-3 to the bottom value of child-2, just like
#child-2 {
bottom: height-of-child-3;
}
Look at this Codepen
Or look at the snippet below:
height_child_three = $('#child-3').height();
$('#child-2').css({
position: 'absolute',
bottom: height_child_three
});
#parent {
width: 100vw;
height: 100vh;
background: #000;
position: relative;
}
#child-1 {
width: 100%;
height: 100%;
background: #eee;
}
#child-2 {
width: 100%;
background: #a0ea0e;
}
#child-3 {
position: absolute;
bottom: 0;
width: 100%;
background: #30e30e;
}
body { margin: 0; } /* A small reset */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
<div id="child-1">
<strong>I'm child 1</strong>
</div>
<div id="child-2">
<strong>I'm child 2</strong>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione deleniti voluptate commodi distinctio, repellendus qui, placeat laboriosam eligendi! Ducimus reiciendis officiis debitis placeat adipisci quae hic tempore vitae suscipit nemo.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam sed aliquid, laborum nisi quos excepturi hic! Molestias hic consectetur dolor! Perferendis iste, quisquam quaerat ab, odio ducimus! Odio, minima error?</p>
</div>
<div id="child-3">
<strong>I'm child 3</strong>
</div>
</div>
Hope this helps!
Is this what you need?
HTML:
<div id="parent">
<div class="child-1"></div>
<div class="child-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error voluptatum necessitatibus dolorem soluta laudantium cupiditate maiores neque, aliquid accusamus autem saepe tempora, itaque possimus, eaque deleniti odio atque enim omnis.</div>
<div class="child-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, illo est dolor dolores placeat deleniti quae consequuntur eum ipsum blanditiis laboriosam quod repellendus fugit! Odio quis rem vel a dolores.</div>
</div>
CSS:
html,
body,
div {
margin: 0;
padding: 0;
}
*,
*:after,
*:before {
box-sizing: border-box;
}
#parent {
position: relative;
width: 100vw;
height: 100vh;
background: #ccc;
}
.child-1 {
width: 100%;
height: 100%;
background: red;
}
.child-2 {
width: 100%;
height: auto;
padding: 30px;
background: blue;
}
.child-3 {
width: 100%;
height: auto;
padding: 30px;
background: green;
}
Here you can see a solution just using plain CSS. CODEPEN
I have been trying to learn CSS from the book by Jon Duckett.
I'm learning the concepts of positioning and floats. When I tried to implement them,
<head>
<title>Try</title>
<style type="text/css">
div#container {
width: 400px;
height: 400px;
padding: 5px;
}
div#cont_2 {
width: 800px;
padding: 0px 5px;
right: 7%;
position: absolute;
top: 10px;
}
p {
width: 300px;
}
p#right {
float: right;
}
p#clear {
clear: right;
}
p#cont_2_p {
width: 700px;
}
</style>
</head>
<body>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam nobis aliquam nihil quas soluta nemo ad magnam animi! Veritatis, magnam, vero, pariatur ducimus quibusdam ad sint nostrum architecto natus asperiores odio eum doloremque excepturi expedita veniam tenetur esse sapiente est unde molestiae error et dignissimos dolorem? Rem quas eius nesciunt repellat assumenda temporibus cumque aperiam.
</p>
<p id="right">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, sint, soluta ab explicabo labore vero placeat porro fugit tempore dolore deleniti libero sit quod reprehenderit.
</p>
<p id="clear">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis, ullam.
</p>
</div>
<div id="cont_2">
<p id="cont_2_p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, distinctio, asperiores, maxime amet quidem doloribus repudiandae tenetur quod odio laborum at hic nemo eaque! Vero.
</p>
<p id="cont_2_p">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis, dolorum, tempore, eveniet distinctio repellendus perspiciatis modi enim saepe officia voluptatem recusandae sed voluptas molestias itaque eius ex reiciendis voluptatum consequuntur architecto molestiae quos esse eaque minima minus velit dolore in voluptate qui vel sequi provident?
</p>
</div>
</body>
or this: http://jsfiddle.net/7qYYT/
it worked well on 100% zoom on a browser but when I zoomed in, the text on the right overlaps the text on the left. How do I overcome it?
It is because of position absolute of div#cont_2
The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn't exist, the initial container is used.
div#cont_2 {
width: 600px;
padding: 0px 5px;
float: right;
right: 7%;
/*position:absolute;*/
top: 10px;
}
And here you have set top:10px that sets the top of this div from 10px of parent element. That make overlapping of the other contents.
And of-course please used class instead of id selector in css. If you want to reuse that. As Id selector should be unique in the markup.
Js Fiddle
Two possible approaches:
Instead of setting a fixed width with pixels, set a relative width for the two containers using percentages:
div#container {
width: 33.333%;
height: 400px;
padding: 5px;
}
div#cont_2 {
width: calc(66.667% - 10px); // taking padding into account, but this won't work IE<=8
padding: 0 5px;
right: 7%;
position: absolute;
top: 10px;
}
Use floats instead of positioning (with relative width, again):
div#container {
float: left;
width: 33.333%;
height: 400px;
padding: 5px;
}
div#cont_2 {
float: right;
width: calc(66.667% - 10px);
padding: 0 5px;
}
There are other less supported methods as well, such as flex-box.
(BTW, don't use 0px; just use 0.)