I am building an app in Ionic where I am trying to locate four row elements and a button inside a div. The div has an height: 100% that covers the whole screen, and the content has to stretch to its full-height.
I have tried the following solution, but apparently it is not working:
ion-content {
position: relative;
height: auto;
width: 100%;
}
.boxes-container {
position: absolute;
height: 100%;
width: 100%;
}
This is the complete code. Do you have an idea of what is a possible way to solve it?
Thanks in advance for your replies!
You can use a combination of the calc function and viewport units to achieve this layout.
height: 100vh will give an element a height equal to that of the viewport.
You have a header element that is 44px in height. Each row has a vertical margin. You can deduct these from 100vh using the calc function:
.boxes-container {
height: calc(100vh - 44px - 50px);
}
This will give your element a height equal to that of the viewport minus the height of the header element.
You then need to give your four rows and the button a height of 20% so that they occupy all of the available vertical space in the container.
.row {
...
height: 20%;
}
.button {
height: 20%;
}
Updated live demo
calc() is available in all major browsers and IE>8 (caniuse.com)
An alternative would be to give both .scroll and .boxes-container a height of 100% and .row a height of 20%:
.scroll {
height: 100%;
}
.boxes-container {
height: 100%;
}
.row {
...
height: 20%;
}
Updated live demo
Related
I'm trying to make an element maintain only to the initial 100% height of the viewport. So anytime the user resize their windows, the height shouldn't be responsive.
Am i suppose to write javascript to get the initial viewport height and then create those deliver those dimensions to the css? Anybody can show me how to do that?
* {
margin: 0;
padding: 0;
}
.top {
height: 100vh;
width: 100%;
background-color: yellow;
}
.bottom {
height: 300px;
width: 100%;
background-color: red;
}
class top is the div i want to maintain its initial 100% viewport size.
I don't think you need a javascript for that. The height: 100vh; from your code will do just fine.
I'm trying to make a fixed position div stuck to the bottom of the page, that has the starting height, 70% of the screen ( like vh ).
I will make it resizable with jQuery resizable.
The problem is that if I apply height: 70vh or height: 70%, the div resizes when the user resizes the browser height, and I want to keep it the same.
Any idea what to do?
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
background-color: red;
}
<div>
</div>
View the snippet in full page.
vh or % will be relative to the height of the viewport or screen height. So we need to set the initial height of the div with JavaScript on DOM load.
Next (The resizing part) can be done with CSS resize property.
**PS: In the div bottom right corner you can see the resize icon and do the resizing.
document.getElementById("demo").style.height = window.innerHeight*.7+"px";
div {
position: fixed;
bottom: 0px;
width: 500px;
background-color: red;
resize:vertical;
overflow:auto;
}
<div id="demo"></div>
You can add min-height to div so that it will not resize itself beyond a specific height.
Like this
div {
position: fixed;
display: block;
bottom: 0;
width: 500px;
height: 70vh;
min-height: 500px;
background-color: red;
}
<div>
</div>
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
I am trying to position an div element at the bottom right of an image, that is inside a container element. I set position relative to the container, and position absolute to the inner div, but it does not work. Here is the (http://jsfiddle.net/ZC84G/). Please, help.
<div class="container">
<div class="icon"></div>
<img src="/images/someImage.png" />
</div>
CSS:
body {
background-color: black;
}
.container {
position: relative;
}
.container img {
max-width: 75%;
max-height: 80%;
}
.icon{
background-image: url('http://icons.iconarchive.com/icons/iconfactory/star-wars-lego/32/Biggs-No-Helmet-icon.png');
width: 31px;
height: 31px;
position: absolute;
bottom: 5px;
right: 5px;
}
This is because by default div has block display mode, and it's width is 100% of the parent container. Try to add display: inline to .container
.container {
position: relative;
display: inline;
}
Here's the corrected jsfiddle: http://jsfiddle.net/ZC84G/4/
Your container div has no width and height set. And since a <div> is a block-level element by default, it will be set to 100% width ie expand to however much horizontal space is left.
Plus, you're also constraining your image size:
max-width: 75%;
max-height: 80%;
If you replace the img CSS with:
max-width: 75%;
max-height: 80%;
It works fine, and as expected: http://jsfiddle.net/ZC84G/3/
I've modified your CSS on the image a bit.
Basically, I set it to scale properly to the size of its container, and now it sits where I think you wanted it. The way you could find this yourself in the future would be to inspect the element by using right click from your browser, and looking at the size of the different elements to see what was expanding larger/smaller than it should.
.container img {
max-width: 100%;
height: auto;
}
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;
}