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
How to Customize Angular Material's Input/Md-Input-Container Component
How to Add Vertical Spacing Between Block Elements, But Not Top and Bottom
Creating Custom Blocks in Rstudio's Bookdown
How to Use Nth-Child in CSS to Select All Elements After The 3Rd One
Width: 100% with Position: Absolute
White-Space: Nowrap; and Flexbox Did Not Work in Chrome
Media Queries - CSS Only for iPhone Landscape
Divide Width of Element Between Child Divs with CSS
Pace.Js "Hide Everything But Pace Until The Page Has Fully Loaded" Local Copy
Using CSS Modules in React How to Pass a Classname as a Prop to a Component
Chrome Devtools Converts All Hex Colors to Rgb
Validating Check Boxes in HTML
Angular Material Table -Border Inside The Table
Bootstrap4 Make All Input-Group-Addons Same Width
Sharepoint 2013 Deleting Contents of <Style> in Embed Code When Saving
Rem-Based Layouts, Zooming on Chrome Is Inconsistent, Px Vs Rem