We Keep Coding

Fixed aspect ratio box with letter and pillarboxing between header and footer

Running the following code snippet will provide a framework for what I am visually hoping to accomplish, with some concessions made in the CSS that I'd like to remove:
body {
height: 100vh;
margin: 0;
}
.container>* {
height: 100%;
width: 100%;
flex: 0 0 50px;
}
.container {
width: 100%;
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.header {
background-color: red;
}
.content {
background-color: blue;
flex: 1;
position: relative;
}
.footer {
margin-top: auto;
background-color: yellow;
}
.fixedRatio {
height: 56.25vw;
max-height: calc(100vh - 100px);
width: calc((100vh - 100px) * (1/0.5625));
;
max-width: 100vw;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="container">
<div class="header"></div>
<div class="content">
<div class="fixedRatio"></div>
</div>
<div class="footer"></div>
</div>
Included are a header and footer of arbitrary height and a fixed aspect ratio box centered vertically and horizontally between them. I'd like it to letter- and pillar-box as the page is resized, and respond to increases/decreases in header height.
As it stands, the code accomplishes many of these goals but falls short in that it requires that the heights of the header and footer be included in the CSS for the fixed aspect ratio box. This limits my ability to freely manipulate the size of the header, or let it grow arbitrarily as a function of content (at least to the extent I am not using JavaScript).
I've managed to make this work successfully for the case of letter-boxing (top and bottom black bars) by leveraging the fact that the content is full-width. As a result, I can use 100vw / 56.25vw (in the case of 16:9) for the width/height and achieve the desired result. Unfortunately, when moving the content around to pillar-box, this obviously falls apart.
I've more or less resigned myself to needing JavaScript to - at the very least - toggle a class based on the dimensions of the inner content box to determine whether letter or pillar boxing is appropriate. However, it became very clear very quickly that setting width as a function of height is not trivial.
I was fortunate to come across this post, where a solution leveraging a 1x1 pixel is used to set width as a function of height.
I was able to successfully make this work for the pillar-boxing case in both Chrome and Safari, but not Firefox (IE11 and Edge not yet tested, but coverage is desired... pray for me). I'd like to get recent versions of Chrome/Safari/Firefox covered, as well as I11/Edge if possible.
The solution for Chrome/Safari is as follows:
body {
height: 100vh;
margin: 0;
}
.header,
.footer {
height: 100%;
width: 100%;
}
.container>* {
flex: 0 0 50px;
}
.container {
width: 100%;
height: 100%;
background-color: black;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.header {
background-color: red;
}
img {
display: block;
height: 100%;
background: orange;
}
.content {
background-color: blue;
flex: 1;
position: relative;
overflow: hidden;
height: 100%;
display: inline-block;
left: 50%;
transform: translateX(-50%);
}
.footer {
margin-top: auto;
background-color: yellow;
}
.fixedRatio {
background-color: purple;
position: absolute;
left: 0;
top: 0;
right: 0;
margin: auto;
bottom: 0;
}
<div class="container">
<div class="header"></div>
<div class="content">
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
<div class="fixedRatio"></div>
</div>
<div class="footer"></div>
</div>
There are a few things to consider. I am comfortable with fixing the height of the footer. This constraint may prove valuable, but I've been unable to yield anything from it yet. I am also comfortable with radical alterations to the included markup, supposing it enables the desired behavior.
The end-purpose of this would be to maintain fixed aspect ratio content between this flexible header, static footer, and overlay content upon it.
I am well aware that I could run some JavaScript and set these heights manually with great success, but I am coming at this from a position largely based in intellectual curiosity. If you, too, are curious, perhaps you can lend a hand in exploring :)
Thank you!

Problems with window resize using vw and vh measures

Im experimenting with vh and vw measures so I have stuck with this problem: when I resize window vertically/open chrome console and then scroll window down background doesn't load in a process of scrolling. How I can recalculate window view ? Or how else I can fix this problem? Is it necessary to use media queries?
Any help will be appreciate.
.m-page-header {
display: flex;
}
.m-page-header__wrapper {
margin: 0 auto;
}
.m-page-header__img-container {
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
}
.m-page-header img {
max-width: 100%;
height: auto;
display: block;
}
.main-content {
display: block;
background-image: url("https://image.ibb.co/hTboSm/1_HEADER_bg.jpg");
background-size: 100%;
background-repeat: no-repeat;
width: 100vw;
height: 100vh;
}
.main-content__wrapper {
max-width: 960px;
margin: 0 auto;
}
html,
body {
height: 100%;
}
body {
min-width: 960px;
}
.visually-hidden {
display: none;
}
<body>
<main class="main-content">
<div class="main-content__wrapper">
<header class="m-page-header">
<div class="m-page-header__wrapper">
<section class="m-page-header__img-container">
<h2 class="page-header__header-text visually-hidden">Game</h2>
<img src="https://image.ibb.co/cNjQ7m/1_HEADER_logo.png" alt="Game">
</section>
</div>
</header>
</div>
</main>
</body>

You have two solutions :
1) add background-size: contain to .main-content :
window resizing will not crop the background anymore. The background will stay completely visible but it won't stretch horizontally.
https://jsfiddle.net/o0p9y03f/
2) add background-size: cover to .main-content :
The background will keep on stretch horizontally but it will be cropped to fill the entire container.
In any case you will have to deal with the size and the centering of the container, depending on which result you are looking for.
https://jsfiddle.net/o0p9y03f/1/

How can one create a gallery that adapts to the different sizes of images?

In this image:
at this link:
http://www.autofinesse.co.uk/share-n-shine/
There are images of different sizes, the css seems to be generated automatically, i'd like a client to be able to upload to wordpress and not have to worry about the standard sizes of images too much. This gallery is fully aligned for every image, changes height between rows and doesn't make them all the same size.
Is there a library that will allow me to do this? The only way i've been able to do it is with the use of background positioning, which crops the image and also prevents the images being different sizes.
Or is there some sort of javascript algorithm to work this out?

I could give you a css solution but you said for a client on WP.
For that I suggest using a plugin like Unite Gallery which I use for my WP and Joomla clients.
Here is a screen. It also allows for text overlays like the image you posted.
https://wordpress.org/plugins/unite-gallery-lite/
Here is a CSS sample using flex
.flex {
background: #ddd;
padding: 1px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.flex-4by3, .flex-3by4, .flex-1by1, .flex-2by1, .flex-1by2, .flex-3by1, .flex-1by3 {
margin: 1px;
background-color: #efefef;
background-size: cover;
position: relative;
}
.flex-4by3:before, .flex-3by4:before, .flex-1by1:before, .flex-2by1:before, .flex-1by2:before, .flex-3by1:before, .flex-1by3:before {
content: "";
display: block;
}
.flex-4by3 {
flex-grow: 1.33333;
flex-basis: 266.66667px;
max-height: 320px;
max-width: 426.66667px;
background-image: url("http://lorempixel.com/267/200/food");
}
.flex-4by3:before {
padding-top: 75%;
}
.flex-3by4 {
flex-grow: 0.75;
flex-basis: 150px;
max-height: 320px;
max-width: 240px;
background-image: url("http://lorempixel.com/150/200/food");
}
.flex-3by4:before {
padding-top: 133.33333%;
}
.flex-1by1 {
flex-grow: 1;
flex-basis: 200px;
max-height: 320px;
max-width: 320px;
background-image: url("http://lorempixel.com/200/200/food");
}
.flex-1by1:before {
padding-top: 100%;
}
.flex-2by1 {
flex-grow: 2;
flex-basis: 400px;
max-height: 320px;
max-width: 640px;
background-image: url("http://lorempixel.com/400/200/food");
}
.flex-2by1:before {
padding-top: 50%;
}
.flex-1by2 {
flex-grow: 0.5;
flex-basis: 100px;
max-height: 320px;
max-width: 160px;
background-image: url("http://lorempixel.com/100/200/food");
}
.flex-1by2:before {
padding-top: 200%;
}
.flex-3by1 {
flex-grow: 3;
flex-basis: 600px;
max-height: 320px;
max-width: 960px;
background-image: url("http://lorempixel.com/600/200/food");
}
.flex-3by1:before {
padding-top: 33.33333%;
}
.flex-1by3 {
flex-grow: 0.33333;
flex-basis: 66.66667px;
max-height: 320px;
max-width: 106.66667px;
background-image: url("http://lorempixel.com/67/200/food");
}
.flex-1by3:before {
padding-top: 300%;
}
<div class="flex">
<div class="flex-4by3"></div>
<div class="flex-1by1"></div>
<div class="flex-2by1"></div>
<div class="flex-1by2"></div>
<div class="flex-2by1"></div>
<div class="flex-3by4"></div>
<div class="flex-3by4"></div>
<div class="flex-3by4"></div>
<div class="flex-1by2"></div>
<div class="flex-3by1"></div>
<div class="flex-1by1"></div>
<div class="flex-2by1"></div>
<div class="flex-1by3"></div>
<div class="flex-4by3"></div>
<div class="flex-1by1"></div>
<div class="flex-2by1"></div>
<div class="flex-4by3"></div>
<div class="flex-2by1"></div>
<div class="flex-3by4"></div>
<div class="flex-3by4"></div>
<div class="flex-1by1"></div>
<div class="flex-2by1"></div>
</div>

HTML
<div>
<img src="http://imgur.com/kj4qwHl.jpg">
<img src="http://imgur.com/q6pFhhE.jpg">
<img src="http://imgur.com/ngdnoYI.jpg">
<img src="http://imgur.com/FkrSS5O.jpg">
<img src="http://imgur.com/ux0Om6X.jpg">
<img src="http://imgur.com/2ProEc9.jpg">
<img src="http://imgur.com/iu39yRs.jpg">
<img src="http://imgur.com/gx0iOdT.jpg">
<img src="http://imgur.com/6kEuRYX.jpg">
</div>
CSS (SASS)
#mixin rspv($w) {
#media screen and (max-width:$w) {
#if $w==680px {
img:nth-child(n1) {
width:100%;
}
} #else {
#content;
}
}
}
#mixin grid($pc...) {
$len:length($pc);
img {
vertical-align:top;
transition:all 0.5s;
#for $i from 1 through $len {
&:nth-child(#{$i}) {
width: nth($pc,$i)+'%';
}
}
}
}
div {
margin:0 auto;
padding:0 100px;
+grid(26,40.7,33.3,41.9,26.7,31.4,29,38.5,32.5);
#include rspv(860px) {
+grid(39,61,45,55,46,54,42.9,57.1,100);
}
+rspv(680px);
}
EXPLANATION
In the rspv mixin (responsive) it checks if width meets the 680px then (even) and (odd) images will have full size. If not, mixin grid will come into play.
Besides normal property:value pairs, grid takes width from a given parameter $pc (percent) and uses it in the for loop. It will iterate through $i depending on the length of $pc and returns every value from the $pc map.
Since all images are inside of the div, all mixins will be included there. First grid doesn't need a responsive requirement, the second one does, and the last +rspv(680px) doesn't need width calculation.
This should work what your link about cars is showing. Not much code. I recommend, get precompiler for CSS. Without that it would be much more code and a lot harder to make up a plan.
DEMO HERE

How to force elements to be in middle?

I am using the following code to show some images but I can't figure out how to move them in middle. Does anyone has any idea?
CSS
.cover-image{
max-width: 300px;
max-height: 250px;
}
HTML
<div class="row" id="covers">
<div class="col-xs-6 col-sm-4">
<div class="cover" style="margin-bottom: 10px;">
<a target="_blank"><img class="cover-image" /></a>
</div>
</div>
</div>
JS
$.ajax({
type : 'GET',
dataType : 'json',
url: 'data.json',
success : function(data) {
var data = data.info;
var covers = document.getElementById("covers");
var blockTemplate = covers.getElementsByTagName("div")[0].cloneNode(true);
covers.getElementsByTagName("div")[0].remove();
data.forEach( function(obj) {
block = blockTemplate.cloneNode(true);
block.getElementsByTagName("a")[0].setAttribute('href', obj.link);
block.getElementsByTagName("img")[0].setAttribute('src', obj.cover);
covers.appendChild(block);
});
$("img").css({"vertical-align":"middle"});
}
});
A demo of what is showing now is here: http://tdhtestserver.herobo.com/test/

Just a try
Is this what you want
Have to use psuedo-css
.cover {
border:1px solid;
height:200px;
width:200px;
vertical-align: middle;
text-align: center;}
.cover:before { /* create a full-height inline block pseudo=element */
content: ' ';
display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */
height: 100%;
}
.cover-image {
margin-left: auto;
margin-right: auto;
display: inline-block;
vertical-align: middle;
}
This may make the question more clear.
Fiddle Demo

If you want to align image middle-center, you can set fixed size to your .cover and set the max-width and max-height to the a. Then you can align the a using absolute position and css transform. Example:
.cover {
width: 300px;
height: 250px;
position: relative;
}
.cover a {
max-width: 100%;
max-height: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Here is what I tried in JSFiddle:
http://jsfiddle.net/7w5fw7fw/
I placed the images directly into the div container:
<div class="row" id="covers">
<img src="http://sjhitsquad.net/wp-content/uploads/freshizer/3d142cc9444fe922cf69cf90e344ce5f_placeholder-920-350-c.gif">
<img src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif">
<img src="https://www.adspeed.com/placeholder-123x456.gif">
<img src="http://fpoimg.com/300x300?text=Advertisement">
<img src="http://www.garethjmsaunders.co.uk/blueprint/placeholders/gif/grid/span-11-rows-15.gif">
<img src="http://fpoimg.com/300x300?text=Advertisement">
</div>
Wrapping every single image in a separate div doesn't appeal to me a lot. If there is such a need, than it is better to use <figure>, which is semantic.
And here is the CSS that places the images in the middle:
html, body {
height: 100%;
margin: 0;
}
#covers {
background: yellow;
width: 100%;
min-height: 100%;
text-align: center;
}
img {
max-width: 300px;
min-height: 250px;
vertical-align: middle;
}
The background color is there just to show you how wide and high the container is (as much as the whole body element). Depending on the window width the images may all appear in a single row or break into many rows.
Is this close to your searched behaviour?

Your question is not clear but i think you want this
try to add this on your body
body {
margin: auto !important;
}

How to make the main content div fill height of screen with css [duplicate]

This question already has answers here:
Make a div fill the height of the remaining screen space
(41 answers)
Closed 8 years ago.
So I have a webpage with a header, mainbody, and footer.
I want the mainbody to fill 100% of the page (fill 100% in between footer and header)
My footer is position absolute with bottom: 0. Everytime I try to set the mainbody to 100% height or change position or something it will also overflow the header. If if set the body to position absolute with top: 40 (cause my header is 40px high), it will just go 40px too far down, creating a scroll bar.
I created a simple html file since i cannot actually post the entire page/css from the actual project. With the sample code, even though the maincontent body fills the screen, it goes 40px too far down (cause of the header I assume).
html,
body {
margin: 0;
padding: 0;
}
header {
height: 40px;
width: 100%;
background-color: blue;
}
#maincontent {
background-color: green;
height: 100%;
width: 100%;
}
footer {
height: 40px;
width: 100%;
background-color: grey;
position: absolute;
bottom: 0;
}
<html>
<head>
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header></header>
<div id="maincontent">
</div>
<footer></footer>
</body>
</html>
Anyone knows the answer?

These are not necessary
remove height in %
remove jQuery
Stretch div using bottom & top :
.mainbody{
position: absolute;
top: 40px; /* Header Height */
bottom: 20px; /* Footer Height */
width: 100%;
}
check my code : http://jsfiddle.net/aslancods/mW9WF/
or check here:
body {
margin:0;
}
.header {
height: 40px;
background-color: red;
}
.mainBody {
background-color: yellow;
position: absolute;
top: 40px;
bottom: 20px;
width:100%;
}
.content {
color:#fff;
}
.footer {
height: 20px;
background-color: blue;
position: absolute;
bottom: 0;
width:100%;
}
<div class="header" >
</div>
<div class="mainBody">
<div class="content" >Hello world</div>
</div>
<div class="footer">
</div>

No Javascript, no absolute positioning and no fixed heights are required for this one.
Here's an all CSS / CSS only method which doesn't require fixed heights or absolute positioning:
/* Reset */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
/* Essentials */
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
/* Aesthetics */
.container {
width: 100%;
height: 100%;
}
.header,
.footer {
padding: 10px 20px;
background: #f7f7f7;
}
.content-body {
padding: 20px;
background: #e7e7e7;
}
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
The benefit of this method is that the footer and header can grow to match their content and the body will automatically adjust itself. You can also choose to limit their height with css.

There is a CSS unit called viewport height / viewport width.
Example
.mainbody{height: 100vh;} similarly html,body{width: 100vw;}
or 90vh = 90% of the viewport height.
**IE9+ and most modern browsers.

This allows for a centered content body with min-width for my forms to not collapse funny:
html {
overflow-y: scroll;
height: 100%;
margin: 0px auto;
padding: 0;
}
body {
height: 100%;
margin: 0px auto;
max-width: 960px;
min-width: 750px;
padding: 0;
}
div#footer {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
height: 60px;
}
div#wrapper {
height: auto !important;
min-height: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
div#pageContent {
padding-bottom: 60px;
}
div#header {
width: 100%;
}
And my layout page looks like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="pageContent"></div>
<div id="footer"></div>
</div>
</body>
</html>
Example here: http://data.nwtresearch.com/
One more note, if you want the full page background like the code you added looks like, remove the height: auto !important; from the wrapper div: http://jsfiddle.net/mdares/a8VVw/

Using top: 40px and bottom: 40px (assuming your footer is also 40px) with no defined height, you can get this to work.
.header {
width: 100%;
height: 40px;
position: absolute;
top: 0;
background-color:red;
}
.mainBody {
width: 100%;
top: 40px;
bottom: 40px;
position: absolute;
background-color: gray;
}
.footer {
width: 100%;
height: 40px;
position: absolute;
bottom: 0;
background-color: blue;
}
JSFiddle

Well, there are different implementations for different browsers.
In my mind, the simplest and most elegant solution is using CSS calc(). Unfortunately, this method is unavailable in ie8 and less, and also not available in android browsers and mobile opera. If you're using separate methods for that, however, you can try this: http://jsfiddle.net/uRskD/
The markup:
<div id="header"></div>
<div id="body"></div>
<div id="footer"></div>
And the CSS:
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
min-height: calc(100% - 40px);
}
My secondary solution involves the sticky footer method and box-sizing. This basically allows for the body element to fill 100% height of its parent, and includes the padding in that 100% with box-sizing: border-box;. http://jsfiddle.net/uRskD/1/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#footer {
background: #f0f;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
#body {
background: #0f0;
min-height: 100%;
box-sizing: border-box;
padding-top: 20px;
padding-bottom: 20px;
}
My third method would be to use jQuery to set the min-height of the main content area. http://jsfiddle.net/uRskD/2/
html, body {
height: 100%;
margin: 0;
}
#header {
background: #f0f;
height: 20px;
}
#footer {
background: #f0f;
height: 20px;
}
#body {
background: #0f0;
}
And the JS:
$(function() {
headerHeight = $('#header').height();
footerHeight = $('#footer').height();
windowHeight = $(window).height();
$('#body').css('min-height', windowHeight - headerHeight - footerHeight);
});

Not sure exactly what your after, but I think I get it.
A header - stays at the top of the screen?
A footer - stays at the bottom of the screen?
Content area -> fits the space between the footer and the header?
You can do this by absolute positioning or with fixed positioning.
Here is an example with absolute positioning: http://jsfiddle.net/FMYXY/1/
Markup:
<div class="header">Header</div>
<div class="mainbody">Main Body</div>
<div class="footer">Footer</div>
CSS:
.header {outline:1px solid red; height: 40px; position:absolute; top:0px; width:100%;}
.mainbody {outline:1px solid green; min-height:200px; position:absolute; top:40px; width:100%; height:90%;}
.footer {outline:1px solid blue; height:20px; position:absolute; height:25px;bottom:0; width:100%; }
To make it work best, I'd suggest using % instead of pixels, as you will run into problems with different screen/device sizes.

Relative values like: height:100% will use the parent element in HTML like a reference, to use relative values in height you will need to make your html and body tags had 100% height like that:
HTML
<body>
<div class='content'></div>
</body>
CSS
html, body
{
height: 100%;
}
.content
{
background: red;
width: 100%;
height: 100%;
}
http://jsfiddle.net/u91Lav16/1/

Although this might sounds like an easy issue, but it's actually not!
I've tried many things to achieve what you're trying to do with pure CSS, and all my tries were failure. But.. there's a possible solution if you use javascript or jquery!
Assuming you have this CSS:
#myheader {
width: 100%;
}
#mybody {
width: 100%;
}
#myfooter {
width: 100%;
}
Assuming you have this HTML:
<div id="myheader">HEADER</div>
<div id="mybody">BODY</div>
<div id="myfooter">FOOTER</div>
Try this with jquery:
<script>
$(document).ready(function() {
var windowHeight = $(window).height();/* get the browser visible height on screen */
var headerHeight = $('#myheader').height();/* get the header visible height on screen */
var bodyHeight = $('#mybody').height();/* get the body visible height on screen */
var footerHeight = $('#myfooter').height();/* get the footer visible height on screen */
var newBodyHeight = windowHeight - headerHeight - footerHeight;
if(newBodyHeight > 0 && newBodyHeight > bodyHeight) {
$('#mybody').height(newBodyHeight);
}
});
</script>
Note: I'm not using absolute positioning in this solution, as it might look ugly in mobile browsers

This question is a duplicate of Make a div fill the height of the remaining screen space and the correct answer is to use the flexbox model.
All major browsers and IE11+ support Flexbox. For IE 10 or older, or Android 4.3 and older, you can use the FlexieJS shim.
Note how simple the markup and the CSS are. No table hacks or anything.
html, body {
height: 100%;
margin: 0; padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
}
#footer{
background: lime;
}
<div id="wrapper">
<div id="header">Title</div>
<div id="body">Body</div>
<div id="footer">
Footer<br/>
of<br/>
variable<br/>
height<br/>
</div>
</div>
In the CSS above, the flex property shorthands the flex-grow, flex-shrink, and flex-basis properties to establish the flexibility of the flex items. Mozilla has a good introduction to the flexible boxes model.