I'm trying to make one div with height 100% - 130px;
Code is:
height: calc(100% - 130px); // Here 80px of TOC-header and 50 of TOC-footer
height: -moz-calc(100% - 130px);
height: -webkit-calc(100% - 130px);
When I edit it with browser console(Inspect Element) it works well. But when I apply the same in code it shows calc(-30%); And due to that the contents get no visibility.
I've attached a screenshot below of firebug. Really confusing moment.
Any help will be appreciated. Thanks.
Saying height: 100% refers to the same height of it's parents height.
In your case, .element1 has a height of 100% which is not recognizable. Set a real height to this element and you will see the expected output.
For example:
.element1 {
height :200px;
}
DEMO
Wrap your item in another div, give it 100% height with a padding top or bottom of 130px or padding bottom and top of 65px. This way you can even position your element vertically.
Related
I'm trying to achieve the last piece of my general template for articles in a wordpress blog.
I've got an header/menu which is position: fixed.
Then I have a div .postThumbnail with a child img which is position: fixed so the following content can overlap the img when scrolling.
I also have a div that copy the img'height as the image is fixed.
Fact is, this could be a lot easier if .postThumbnail had an height, but it's value is equal to 0.
I do not know why.
What I intend to do is to set .postThumbnail's max-height equal to the height of the viewport minus the height of the header/menu, so if an image is taller than the viewport, it won't overflow and the following content which can be scrolled will appears right after the image (and not after the total height of the image).
Basically, I need to define .postThumbnail's height so I can apply an overflow:hidden.
Any idea?
I created a JSFiddle so you can actually see what I'm talking about.
Some of the current code :
#single\.php .postThumbnail img {
position: fixed;
z-index: 1;
width: 100%;
min-width: 640px;
height: auto;
}
#single\.php .postThumbnailGhost { /*keep as security even if no content is integrated*/
visibility: hidden;
}
What I need to achieve :
#single\.php .postThumbnail{
max-height: calc(100vh - 48px);
overflow: hidden;
}
With this fixed, I could fix the rest of the page as the content's min-height must be equal to the image's height in order to cover it properly.
Well,
I really simplified everything since I don't need a .postThumbnailGhost in this new version.
I also made it in Jquery as I couldn't do it fully in CSS ( :'( ).
Here is the script that is doing the job :
function refreshDynamicContent(){
$('.postThumbnail').height($('.wp-post-image').height());
$('.postThumbnail').css('max-height', $(window).height() - ($('header').height()));
$('#post').css('min-height', $('.postThumbnail').height());
}
refreshDynamicContent();
$(window).on("resize", refreshDynamicContent);
New JSFiddle
And I don't need an overflow anymore because I can set the height to the window's height!
YAY!
There is a way to set max-height in %, but is here any way to set DIV max-height, so it would be 100px smaller than window height with only CSS?
It must not be a fixed layout, user must be able to scroll page vertically, but DIV always should be resized to window height - 100px. Is this possible, or will I have to use JS for that?
Yes:
#specificElement {
height: calc(100vh - 100px);
box-sizing: border-box;
}
This uses the CSS calc() function to subtract 100px from 100vh (1vh being one percent of the view-port's height) and uses the result as the value of the height property.
The box-sizing forces the browser to include padding, and borders, in the calculated height of the element.
Obviously use a relevant selector for your use-case.
References:
calc().
CSS lengths.
#specificElement {
height: calc(100vh - 100%);
min-height: calc(100vh - 100px);
}
set min height so that your dyanmic content should not get effect and give height in percentage for dymanic result.
At my page i have a navigation bar to the left that is 100% height and 25% width.
It is working fine, but when there's scroll available, it destroys the background, and make it look ugly. The reason i think is that 100% height is only applied to the active window.
What is the trick to have a div 100% height always, even if the user is scrolling?
Css of the navigation:
width:25%;
height:100%;
float:left;
color:#999999;
I have tried position:absolute with no results, also tried clear both.
Need help :)
Fiddle
Using min-height: 100% instead of height: 100% should fix it. See updated fiddle here: http://jsfiddle.net/zitrusfrisch/Sa6cb/3/
if you want the element to take 100% of the screen use min-height: 100vh
and if you want it to take 100% of the parent element use min-height: 100%
I would rather use:
height: 100%;
overflow: auto;
I had a similar issue when I wanted to build an opaque overlay on top of a webpage. The overlay only covered the height of the browser window, not the total scrolling height of the page. I turned to Javascript to dynamically get the page height.
$('body').append('<div style="width:100%;height:'+document.documentElement.scrollHeight+'px;background:#000000;opacity:0.5;position: absolute;top: 0;z-index: 1000;"></div>')
I want to do this.
I have changing wrapper widths (sometimes it's 100%, sometimes it's a fixed width). Sidebar content is designed to be fixed 250px width, content should be flexible. But when I set content to be { width: 100%; } it just don't fits it's overflowing content.
CSS3 calc can do this.
#content {width: calc(100% - 250px);}
#sidebar {width: 250px;}
Make sure that the browsers you need support this property. Here are the supported browsers. and don't forget the browser-specific prefixes. Like so:
#content {
width: 700px; /* Fallback for older browsers */
width: -webkit-calc(100% - 250px);
width: -moz-calc(100% - 250px);
width: calc(100% - 250px);
}
I highly advise you to use border-box to work with calc, it makes everything a lot easier.
* {box-sizing: border-box;}
If I understand what you are looking for, you can't do it by css/html alone. I'd use javascript to get the wrapper width, then subtract the width of the fixed elements and asign that to the value of the content div. See below:
var wrapW = document.getElementById("wrapper").clientWidth;
var contW = wrapW - (sideWidth + marginWidths);
document.getElementById("content").style.width = contW+"px";
Obviously in the example above you'd be inserting a fixed value for sideWidth and marginWidths...
When you try to increase the content size.. you need to increase the size of the outermost div also. Otherwise content div and fixed div will not align smoothly. You can do it by script.
Maybe the questing had a bad wording, anyway, just I implemented with CSS.
content div can be 100%, but it's margin-right should set to (siderbar.marginLeft + sidebar.width + sidebar.marginRight). With 100% it has an explicit width, thus it will fit it's content.
See eppz.eu/blog between 660px and 960px.
I've set the background of my footer to background-repeat: repeat-x but for some reason when I zoom in, the background stops repeating... The blue bar you see should be repeating the whole width of the window according to the CSS rules (and he does, execpt when I start zooming in)
Is this normal? If yes, how can I prevent or pass by this. If not, what could be the cause?
EDIT:
I just figured out if you set the width of the body to e.g. 1,000px or 5,000px the footer starts expanding, but when I zoom out to the normal size, the site is extremely large... And width: 100% didn't work out either.
Give the footer a width of 100% and then give it a min-width equal to the width of your content. So if your content has a fixed width of 960px for example, your css would be:
#content { width: 960px; }
#footer { width: 100%; min-width: 960px; }