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
Why Does "Position: Absolute; Left: 0; Right: 0; Width: Xypx; Margin: 0 Auto" Actually Center
How to Fix "Insecure Content Was Loaded Over Https, But Requested an Insecure Resource"
File Opens Instead of Downloading in Internet Explorer in a Href Link
How to Add The Text "On" and "Off" to Toggle Button
How to Center Content in a Bootstrap Column
Why Is a Trailing Punctuation Mark Rendered at The Start with Direction:Rtl
Ckeditor Strips Inline Attributes
How to Specify Model to a Nginclude Directive in Angularjs
CSS - Border Where Only Half of a Border Is Visible
What Is The Correct Readonly Attribute Syntax for Input Text Elements
Making an Svg Image Object Clickable with Onclick, Avoiding Absolute Positioning
Make Input Type="Password" Use Number Pad on Mobile Devices