Div Margin-Bottom of a Proportion of Its Own Height

Div margin-bottom of a proportion of its own height?

As others note, I don't know you can use CSS to do this. jQuery could help:

http://jsfiddle.net/userdude/PZAvm/

<div id="margin">Foo</div>

div#margin {
background-color:red;
height:100px;
}

$(document).ready(function(){
alert($('#margin').height());
var margin = $('#margin').height()/4;
$('#margin').css('margin-bottom',margin);
alert($('#margin').css('margin-bottom'));
});

EDIT - This could possibly be done using em's.

EDIT 2 - em's are keying off font size, not a calculated box model size. So it won't work.

EDIT 3 - JCOC611 was able to use the em approach after all.

Original: http://jsfiddle.net/userdude/xN9V7/3/

JCOC611's Demo: http://jsfiddle.net/BCTg2/

The code:

<div id="foo">
Foo
</div>
lol

div#foo {
background-color: #fcc;
margin-bottom: 1.5em;
font-size:20px
}

Can I set the margin-bottom property of an element to = dynamic height of a sibling?

You can still use position: sticky on the footer to do this. If you want to do this pure CSS than it's very difficult to use position: fixed because it's outside the normal document flow so it has no idea about the elements inside the document flow, but position: sticky does.

Using bottom: 0 to put it at the bottom of the page and the z-index: 0 to have it underneath the main content.

It's just the reverse of a sticky header that is on top of the page.

footer {
background: #000;
width: 100%;
position: sticky;
display: inline-block;
bottom: 0;
left: 0;
height: auto;
z-index: 0;
}

Edited JSFiddle: https://jsfiddle.net/g7a8b51z/1/

Setting a negative margin which is a percentage of its height. Pure CSS

Unfortunately, it turns out this is completely impossible with just CSS...
Despite many people believing that there is no valid use case for having negative padding, I think this is.

So... what I ended up doing was using an ::after block element, that covers the bottom half of the captions background. However, as this means I couldn't have rounded corners or have the entire image showing I also added a javascript over-ride.
This queries half of the captions height, and applies it as a padding bottom value to the container. see the fiddle and code below:

https://jsfiddle.net/todd_143/nawLywc9/5/

<div class="outer">
<div class="image">
</div>
<div class="caption">
<div class="block">
Lorem ipsum dolar sit amet consectetur idipiscine ipsumd lorem ipsum dolar sit amet.
a</div>
</div>
</div>

body {
background-color:#FFFFFF;
}
.outer {
display:block;
position:relative;
width:320px;
}

.image {
background-color:blue;
width:320px;
height:350px;
display:block;
position:relative;
border-radius:5px;
}

.caption {
position:absolute;
bottom:0; right:0; left:0;

}

.caption::before {
background-color: #FFFFFF;
content:"";
position:absolute;
top:50%; left:0; right:0; bottom:-1px;
background-color#FFFFFF;
display:block;
}

.block {
position:relative;
background-color:#FFFFFF;
padding:24px;
left:5%;
line-height:24px;
width: 60%;
border-radius: 5px;
margin: 0 auto;
display:inline-flex;
box-shadow: inset 0px -3px 0px 0px rgba(0,0,0,0.05);
}

$(document).ready(function() {
promoCaption();
});

$(window).resize(function() {
promoCaption();
});

function promoCaption() {
//allow caption to sit half way on bottom edge of promos while keeping their ratio. Purely cosmetic
$(".outer").each(function() {
// get caption height
var captionHeight = ($(this).find(".caption").height());
// get caption offset by halfing its height
var captionOffset = captionHeight / 2;
// apply caption offset as padding bottom to the promo container
$(this).css("padding-bottom", captionOffset);
});
}

Frustrating though, as I do not like using javascript for anything structural. But for this to work I couldn't find any other way.

How to set the margin or padding as percentage of height of parent container?

The fix is that yes, vertical padding and margin are relative to width, but top and bottom aren't.

So just place a div inside another, and in the inner div, use something like top:50% (remember position matters if it still doesn't work)

CSS div height percentage with margin percentage

Position Tricky

Changing your fixed position to absolute makes it easier to show what the problem is:

.a{    position: absolute;    top:0;    left:0;    bottom:0;    right:0;    border: 1px solid black;}
.b{ position: relative; background-color:red; height:75%; width:92%; margin: 25% 4% 0% 4%;}
<div class="a">    <div class="b"></div></div>

How to add percentage-of-height top/bottom margin in CSS

First you will have to set the root element to height:100vh

Then use :nth-child to set the height and the margin of each divs

*{box-sizing: border-box}:root{width: 100vw; height: 100vh; text-align: center}body{padding: 0; margin:0}div{  display: block;  background: #333;  width: 480px;}
div:first-child, div:nth-child(2){ height: 15vh; margin: 0 0 2.5vh 0}
div:nth-child(3){ height: 20vh; margin: 0 0 5vh 0}
div:nth-child(4){ height: 30vh}
<div></div><div></div><div></div><div></div>

Center div with equal margins. Margin-bottom not working with height 100vh?

Using this previous SO answer as a reference, I modified your fiddle to keep an even margin around the whole box. I did this specifically by setting the height and width smaller than the viewport and then translating the box to the middle of the screen:

.mySec {
display: block;
position: relative;
height: calc(95vh);
width: calc(96vw - 1vh);
transform: translate(calc((4vw + 1vh) / 2), 2.5vh);
overflow: hidden;
}

Here's a snippet for easy viewing:

body {  margin: 0;  padding: 0;  font-family: 'Josefin Sans', sans-serif;  background-color: #EFEFEF;  text-align: center;  overflow: hidden;  height: 100%;  width: 100%;}
.mySec { display: block; position: relative; height: calc(95vh); width: calc(96vw - 1vh); transform: translate(calc((4vw + 1vh) / 2), 2.5vh); overflow: hidden;}
.header { background: red; /* For browsers that do not support gradients */ background: -webkit-linear-gradient(#FFC0CB, #9370DB); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(#FFC0CB, #9370DB); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(#FFC0CB, #9370DB); /* For Firefox 3.6 to 15 */}
#headList { list-style: none; font-family: 'Josefin Sans', sans-serif; position: relative; left: -1vw;}
#headList li { display: inline;}
#headList li a { color: #000; font-size: 1.4vw; padding: 2vw; text-decoration: none; letter-spacing: 2px; font-weight: 200;}
.title { font-family: 'Amatic SC', cursive; font-size: 8vw; position: relative; bottom: 8.3vh; color: #000;}
.title2 { color: #000; position: relative; font-size: 2vw; bottom: 14vh;}
#pilLogo { position: relative; left: 25vw; bottom: 41vh;}
.info { position: relative; top: 25vh;}
<div class="mySec header">  <div class="info">    <ul id="headList">      <li>        <a data-section="top-left" id="link" href="#">ABOUT</a>      </li>      <li>        <a data-section="getInvolved" id="link" href="#">CLASSES</a>      </li>      <li>        <a data-section="footer" id="link" href="#">CONTACT</a>      </li>    </ul>    <h1 class="title">Niki Gibbs Modern Pilates</h1>    <p class="title2">Working From The Inside Out.</p>    <img id="pilLogo" src="pilatesLog.png">  </div></div>


Related Topics



Leave a reply



Submit