Is it possible to dynamically set a divs width, then set its height to a certain percentage of that width. Something like this:
#myDiv{
width:%100;
height: {35% of width};
}
I want to retain the ratio of the width to height of a div regardless of what the width may be.
You can do this with CSS by setting the height to zero and then adding a percentage to padding-bottom. You might have to tweak it a little to get the desired outcome but here's a fiddle with an example
http://jsfiddle.net/wbq8o3s7/
#myDiv {
width: 100%;
height: 0;
padding-bottom: 35%;
background-color: #333;
}
<div id="myDiv"></div>
HTML:
<div class='box'>
<div class='content'>All your content are belong to us</div>
</div>
We use two block elements to achieve the desired behaviour, box for width, content for height.
CSS:
.box{
position: relative;
width: 50%; /* desired width */
}
.box:before{
content: "";
display: block;
padding-top: 100%; /*What you want the height to be in relation to the width*/
}
The Content:
Then set the content to cover the entire box absolutely so no matter the size, it fits!
.content{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Tada you are done...
SOURCE: Pure CSS
Try a simple JavaScript:
document.getElementById("elemID").style.height =
Math.round((document.getElementById("elemID").style.width * 100) / 35) + "px";
This will get a percentage (Rounded) of the with, and assign it to the height.
Related
I have a div (the one with class container) with fixed height (which is supposed to be dynamic and not known in advance) which contains another div (the one with class fixed-aspect-ratio).
I would like the inner div to fill the container's height while keeping a fixed aspect ratio of 1:1.
The commonly used trick to achieve fixed aspect ratios is to exploit padding: in fact when declaring percentages instead of fixed values for padding, the percentage is calculated based on the WIDTH of the element in question, even if we are declaring a vertical value such as padding-top or padding-bottom.
This makes padding a great trick to exploit if you want to fill the container's WIDTH, but not if you want to fill the container's HEIGHT.
Is it possibile to achieve it using CSS only? No javascript thanks.
Ideally I would love to have CSS units complementary to the viewport ones, but relative to the container. Something like:
cw (container width)
ch (container height)
cmin (container min)
cmax (container max)
Would be freaking awesome.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: green;
height: 30vh;
}
.fixed-aspect-ratio {
background-color: red;
width: 100%;
padding-top: 100%;
/* 1:1 Aspect Ratio */
position: relative;
/* If you want text inside of it */
}
/* If you want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="fixed-aspect-ratio">
<div class="text">Some text</div>
<!-- If you want text inside the container -->
</div>
</div>
</body>
</html>
https://www.w3schools.com/code/tryit.asp?filename=FLJBS4J2MTWS
There is no similar CSS solution for height, as the padding-bottom for width.
Besides script, here is a this trick I have used, where I place an img, with a data url SVG (could be a Base64 png as well) to avoid an extra roundtrip to the server, having a square size.
By setting its height to 100%, it will keep its parent, being inline block, a square, and with visibility: hidden hide it.
Stack snippet
.container {
background-color: green;
height: 50vh;
}
.fixed-aspect-ratio {
display: inline-block;
background-color: red;
height: 100%;
position: relative;
}
.fixed-aspect-ratio img {
display: block;
height: 100%;
visibility: hidden;
}
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
<div class="container">
<div class="fixed-aspect-ratio">
<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><rect width='10' height='10'/></svg>">
<div class="text">Some text</div>
<!-- If you want text inside the container -->
</div>
</div>
Set height to 100% and width to x%
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: green;
height: 30vh;
}
.fixed-aspect-ratio {
background-color: red;
height: 100%;
width: 10%;
/* 1:1 Aspect Ratio */
position: relative;
/* If you want text inside of it */
}
/* If you want text inside of the container */
.text {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="fixed-aspect-ratio">
<div class="text">Some text</div>
<!-- If you want text inside the container -->
</div>
</div>
</body>
</html>
<div class="ui-datatable-scrollable-view" style="
width: 100%;
position: relative;
">
<div class="ui-widget-header ui-datatable-scrollable-header" style="position:fixed;top:50px">
</div>
</div>
I have a div element which is stick on the top of the page. I have given the css as
width: 100%;
position: fixed;
z-index: 2;
But it is not taking the width.
I tried several ways to do that.
I tried making the parent div as position:relative but that is not working;
I think my element is taking the width equal to the width of screen.I tried giving the fixed width to it to fit the required size. But on change of screeen size it won't work proper.
I want it to take the width of its parent.
I just tried using your css and it works for me
HTML
<div class="container"></div>
CSS
.container {
width: 100%;
height: 100px;
position: fixed;
z-index: 2;
background-color: black;
}
Check if your html and body elements have a width of 100%
Link to codepen: https://codepen.io/athapliyal/pen/VzqyBX
#test {
width: 100vw;
position: fixed;
z-index: 2;
height: 50px;
background-color: blue;
}
<div id="test">
If you provide the width as percentage it is relative to the parent of the div, so you could define the parent with a width of 100% to make it working. To provide you an example we would need more code.
So the other solution is by defining the width with 100vw.
1vw = 1% of viewport (window) width.
This way it will be relative to the viewport and doesn´t care about the parent.
For the height you can use: vh (Viewport height)
I believe that the width is in fact 100%, however since you did not set a height, it appears invisible.
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent {
width: 800px;
background-color: grey;
height: 600px;
}
.child {
position: fixed;
background-color: blue;
width: inherit; height: 100px;
}
I'm using position: fixed; to make a div adjusting to different screen sizes. The height is set to 100% in this simplified example to make the div "example" always take up the whole height of the screen. What I want to do is making space both over and under this div and I'm doing so by using position: fixed; and top: 100px; bottom: 100px;
The problem is that the code only runs top: 100px; not both. Is there any way around this problem?
Fiddle
HTML
<div id="example"></div>
Css
#example {
background-color: #333;
width: 500px;
height: 100%;
position: fixed;
bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
top: 100px;
}
EDIT
And if I set the height using this function istead of setting height in css to 100%. How do I do then?
$(document).ready(function() {
function setHeight() {
windowHeight = $(window).innerHeight();
$('#example').css('min-height', windowHeight);
};
setHeight();
$(window).resize(function() {
setHeight();
});
});
You have to remove the height: 100%. The browser will calculate the distance between the top and bottom value and create the height you need.
new code:
#example {
background-color: #333;
width: 500px;
position: fixed;
bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
top: 100px;
}
JSFiddle
You seem to misunderstand the box model. When you say "height: 100%" it means that the height of the element will be the same number of pixels as the containing element with layout. Setting top:100px will result in moving the box down 100px, but it will not affect the height of the box. Thus, 100px of the box will overflow the viewport. This is the same if you specify bottom:100px, except that top 100px of the box will underflow the viewport.
Remove height 100% and the top and bottom instructions will calculate the element height.
#example {
background-color: #333;
width: 500px;
position: fixed;
bottom: 100px; /* This is clearly not working, how do I do this with absolute/fixed position? */
top: 100px;
}
Just try this instead of height: 100%, it would be enough; http://jsfiddle.net/xd2j2shm/1/
height: calc(100% - 200px);
EDIT: I like RMo's answer more. It is simpler. That being said, they both work.
To clarify, it sounds like you want the div to cover 100% of the height, minus for 100px at the top and 100px at the bottom.
The way to do this is relatively new. You need to use the calc value for your height property:
#example {
background-color: #333;
width: 500px;
height: calc(100% - 200px);
position: fixed;
top: 100px;
}
It has wide support in modern browsers: http://caniuse.com/#feat=calc
How can I have a div with 100% height that has a particular aspect ratio, e.g. 2:3?
For example, if the outer element has a height of 900px, the width of the inner element should be 600px, but this should be responsive.
I don't want to use any JavaScript for this.
Using the CSS3 flexible box model would be fine.
If you are targeting modern browsers that support CSS3, you can try the following.
Consider the following HTML snippet:
<div class="wrapper">
<div class="inner">Inner content...</div>
</div>
and apply the following CSS rules:
html, body {
height: 100%;
}
body {
margin: 0;
}
.wrapper {
background-color: lightblue;
height: 100%;
}
.wrapper .inner {
margin: 0 auto;
background-color: beige;
height: 100%;
width: 66.6666666666vh;
}
The .wrapper element takes up 100% of the view port height because I have set
height: 100% on the body and html elements.
The inner wrapper .inner has a height: 100% and fills up the parent block.
To set the .inner width, use the viewport-percentage length vh that scales with the height of the parent block.
In this example, 66.66vh means 66.66% of the vertical height, which corresponds to a 2:3 aspect ratio (width:height).
See demo at jsFiddle
Reference: http://www.w3.org/TR/css3-values/#viewport-relative-lengths
Browser Compatibility
The vh unit and other vertical percentage lengths have pretty good support with the latest browsers, see the reference below for more details.
See reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/length#Browser_compatibility
Alternative Approach Using a Spacer Image
Consider the following HTML:
<div class="ratio-wrapper">
<img class="spacer" src="http://placehold.it/20x30">
<div class="content">Some content...</div>
</div>
and apply the following CSS:
.ratio-wrapper {
position: relative;
display: inline-block;
border: 1px solid gray;
height: 500px; /* set the height or inherit from the parent container */
}
.ratio-wrapper .spacer {
height: 100%; /* set height: 100% for portrait style content */
visibility: hidden;
vertical-align: top;
}
.ratio-wrapper .content {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
padding: 20px;
}
The .ratio-wrapper container has two child elements, an img.spacer and div.content.
The image as a portrait aspect ratio, for example, 20x30 (wxh) and is set to expand to fill the height of the parent container using height: 100%. The image is hidden from view but retains its space in the parent block.
The .content element is positioned absolutely to fill the parent container and can contain any content. Because .content is constrained in height and width, the content could overflow in some cases, so setting overflow: auto may be appropriate.
See demo at: http://jsfiddle.net/audetwebdesign/BVkuW/
Related question and answer:
In Fluid Container, Can I Make Elements as Tall as they Are Wide?
You can do this by sticking a 2px by 3px image and an inner div as siblings into an outer div which has display: inline-block; applied. Now when you set the image to have a height of 100%, and you absolutely position the inner div to be as high and wide as its ancestor, you can set the height of the outer div, and the width of all elements involved will be exactly equal and based on the aspect ratio of the image.
Here's a jsFiddle demonstrating this approach.
HTML
<div>
<div>2 by 3</div>
<img src=".../twobythree.png" />
</div>
CSS
body > div {
height: 300px;
position: relative;
display: inline-block;
}
img {
display: block;
height: 100%;
}
div > div {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
I have a <table> and I wish to display an <img> over the <table> in the exact center.
How would I do that?
If the dimensions of the image are fixed (say, width 200 height 300), then something like this should work:
HTML:
<div id="table-and-image-container">
<table id="the-table">...</table>
<img src="..." id="the-image" />
</div>
CSS:
#table-and-image-container
{
position: relative;
display: inline-block;
}
#the-table
{
z-index: 1;
}
#the-image
{
left: 50%;
margin-left: -100px; /* = 200px width of image / 2 */
margin-top: -150px; /* = 300px height of image / 2 */
position: absolute;
top: 50%;
z-index: 2;
}
The containing #table-and-image-container will be the size of the table, since position: absolute will take #the-image out of the sizing algorithm and display: inline-block will reduce the width to the width of the table instead of 100% of the container. Then you use standard top/left/margin tricks to position the image in the center, and use z-index to make sure it goes on top.