Square Div Where Height Is Equal to Viewport

Square DIV where height is equal to viewport

You can do this with jquery (or pure javascript if you prefer).

With jquery:

<div id="square">
</div>

$(document).ready(function(){
var height = $(window).height();
$('#square').css('height', height);
$('#square').css('width', height);
});

How to style a div to be a responsive square?

Works on almost all browsers.

You can try giving padding-bottom as a percentage.

<div style="height:0;width:20%;padding-bottom:20%;background-color:red">
<div>
Content goes here
</div>
</div>

The outer div is making a square and inner div contains the content. This solution worked for me many times.

Here's a jsfiddle

How to make square div fit into parent div

Add a mediaquery to limit width and height of the element if you are looking at the viewport in landscape mode

@media all and (orientation: landscape) {
div.stretchy-wrapper {
width: calc(100vh - 20px);
height: calc(100vh - 20px);
padding-bottom: 0;
}
}

In other words: if the width of the viewport is height, to ensure a 1:1 aspect ratio you could set the width equal to 100vh (minus some padding, if you need to) and the height should be equal to the width. Also the padding-bottom is no longer necessary when this condition occurres.

Jsfiddle fork


After your edit

Since your outercontainer is fixed in height, if the viewport width is ≥ 200px then set a fixed width and a fixed height both to 200px. otherwise use a psuedoelement to preserve the 1:1 aspect ratio:

    div.stretchy-wrapper::before {      display: block;      content: "";      padding-bottom: 100%;    }
@media all and (min-width: 200px) { div.stretchy-wrapper { width: 200px; height: 200px; } div.stretchy-wrapper::before { display: none; } } .outercontainer { max-width: 400px; height: 200px; border: 1px #9cb dashed; } .stretchy-wrapper { background: #9bc; }
<div class="outercontainer">  <div class="stretchy-wrapper"></div></div>

Height equal to dynamic width (CSS fluid layout)

Using jQuery you can achieve this by doing

var cw = $('.child').width();
$('.child').css({'height':cw+'px'});

Check working example at http://jsfiddle.net/n6DAu/1/

Div Square, width size based on 100% height

Ok here the solution.

<div id="square" style="background-color:black;height:100%">test</div>

$(window).ready(updateWidth);
$(window).resize(updateWidth);

function updateWidth()
{
var square = $('#square');
var size = square.height();

square.css('width',size);
}

http://jsfiddle.net/j372H/7/

create a div square, and center it accordingly the view port using less

You Cannot Do What You Desire With Precompiled LESS

LESS is a CSS preprocessor. That means it processes the code to form it into CSS before the browser ever sees it; and as far as LESS is concerned, the browser does not exist. What that means is, 40% of the height of the browser window is totally unknown to LESS. All that it knows is 40%, having no idea what that will actually translate into for pixels at a later time.

You will either want to stick to javascript, or use extra html mark-up to get the squaring effect.

Client-Side Compiling (NOT Recommend for Production)

I need to stress the fact that client-side compiling is recommended only for development. If someone has javascript turned off, then they will get NO styling. And those that have it turned on are going to experience a slowdown in page loading.

Now, the reason you get an invalid type error is because the returned value needs to be made into a number that LESS understands (I think it is treating the returned value as a string). This can be easily done like so (see the changes to the @base assignment):

@base: (0.4 * unit(`window.innerHeight`, px));

#mytransform {
background-color:#ccc;
height:@base;
width:@base;
position:absolute;
top:50%;
left:50%;
margin-top:-(@base/2);
margin-left:-(@base/2);
}

My CSS Output On One Run At less2css.org

#mytransform {
background-color: #ccc;
height: 243.60000000000002px;
width: 243.60000000000002px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -121.80000000000001px;
margin-left: -121.80000000000001px;
}


Related Topics



Leave a reply



Submit