I have a plunker to show: http://plnkr.co/edit/nGjdvrG27jNpQ3QTulMr?p=preview
I want the green area to fill the remaining available height. I can set div height:100% and get almost I want, but that is less than desirable.
Is there a way to do this with css? Do I need to do some sort of resizing via js?
I've set the following classes to height: 100% and it seems to work now:
.tabset, .tab-content, .tab-pane, .tabbable {
height:100%;
}
Updated Plunker
if you use flexbox layout you can do it this way:
override the display property of the '.tab-content>.active' class. By default it is set to 'display: block'. It has to be set to 'display: flex'. Also modify the tab template.
See my solution:
Using flexbox layout with angular-ui tabs
The easiest way that I know is to set the height with vh units. They were introduced in CSS3
height: 100vh;
Updated plunker.
vh unit is setting the viewport height. I believe it's viewed as setting it to a % of the viewport, or visible screen. So simply changing 100% to 100vh gives you the desired outcome.
It seems like it's pretty widely used: http://caniuse.com/#search=vh. Just depends on who your audience base is I suppose.
Related
Hi I have a responsive website. All the DIVs container depend of their parents and I use a lot width and height 100%.
I see that Arjs is setting fixed dimensions to the body.
I thought that I did something wrong but in the official example is happening the same:
My goal is to have some html elements on front of the camera but the fixed dimensions are affecting my CSS. Is there a way to control this?
I tried this configuration for tests but I did not see any change:
arjs="sourceWidth:480; sourceHeight:480; displayWidth: 480; displayHeight: 480"
You should use the "embedded" component on the tag, it will remove the automatic css fullscreen styles that A-Frame adds by default. You can find more details here in the documentation.
I have fixed it using position "fixed" in all my elements.
Making position "fixed" in all elements is helpful but not enough.
And still making custom elements acting weird or overflow from the screen.
Simply add these may help:
html {
width: 100vw;
height: 100%;
overflow: hidden;
}
I'm using jQuery Lazyload Plugin. Before the images are loaded I use a dummy image as placeholder which is a 20x20 pixels blank PNG. Also I'm using jQuery wookMark which is a dynamic grid plugin. For this plugin to work I need the images to be in their correct aspect ratio so the plugin can calculate the suitable position of each grid element in the page.
I have width and height attributes on img tag set to the correct dimensions, but that doesn't have any effect on the dummy image and it will be shown as a square, no matter what.
I can use inline styles to set width and height for each image, but this approach will stop the image from being responsive in other dimensions.
Is there a way to give an image width and height in a way that it act like it is its real dimensions?
Here's the pen to look at:
http://codepen.io/anon/pen/iaIoJ
The only way you're going to get what you want is by using some javascript. You're already using jQuery so that will make it a bit easier.
Use the following CSS to begin with (as an example):
.myImage {
width: 300px;
height: 400px;
}
then when the images are loaded (in some sort of callback function I presume):
$('.myImage').css('width','100%');
$('.myImage').css('height','auto');
Alternatively, you can work with a placeHolder css class that has this height and widht, and then $('myImage').removeClass('placeHolder'); to clear it from the images.
I found a good way for it.It's not going to be pure css, but that's fine by me :)
My solution is to set the image height to 0 and use padding-bottom to maintain the aspect ratio:
<img src="./blank.png" style="height:0;padding-bottom:133.333%">
And also having a class for the img tag when the actual image is loaded:
img.loaded {
height:auto !important;
padding-bottom:0 !important;
}
Here's the pen for this example: http://codepen.io/nOji/pen/yoshA
Hope you find it useful.
I am working on a site where certain sections have 100% height. To achieve this I am using the new css3 unit vh as a min-height (100vh).
In each section there is also a element which is absolute positioned and aligned with the bottom of the page. You can see an example of it here.
The problem which occurs is that on a smaller screen the button shows up upon the text.
I know that I could e.g. let the button disappear on smaller screens with #media; instead I would like to know if there is a css3 possibility in doing something like this:
.element {
min-height: 100vh && 200px;
}
Any other css tricks too achieve this are also appreciated (I can change the markup).
No, it makes no sense to use like that. You must use media query.
If it was to be added like you mentioned it would just sense if vh is undefined px would take.
But to say, it would never be applied like so.
Is it possible to work only on css, to set a dynamic height of the div to a proportion of full screen?
Would like to have something like the following example
.my_div {
width:100%;
height:90%;
}
No, only dynamic width. You need javascript to adjust height dynamically.
Unless you are looking to do this, in which case search before asking next time. :)
I agree with #Alexander O'Mara.The parents like html or body or any wrapper must have dynamic heights on js that their children elements are free to set their heights with percentage.It is not possible to work only on css.
I will be referring to this example: http://codepen.io/KenPowers/pen/CwoKc?editors=110
My desired result is to (when the screen width is at least 800px) stretch out the middle "row" so that the header is at the top and the footer is at the bottom. I would like to do this without adding any HTML markup.
Currently, the example renders as such:
Adding the following code:
html, body {
width: 100%;
height: 100%;
}
Results in the following:
Finally, setting the max-height of footer and header to something like 50px results in the following:
How can I make it so the middle line stretches to fill all space on the page? I feel like I've tried all possible combinations of align-content, align-items, and align-self but to no avail.
I had a solution I think & hope it helps to you.
I utilized css3 reset from HTML5 doctor (only must part), viewport-height unit vh as height unit and Equal Height Columns with Cross-Browser CSS.
Equal Height Columns with Cross-Browser CSS info is from here: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
you can view and use the solution here:
http://jsbin.com/puvesila/1/edit
update:
I tried without wrappers but I couldn't achieve without them.