http://magicdynamic.com/fit/
in this demo page i have 2 problems:
1) My footer (I followed those guidelines http://ryanfait.com/sticky-footer/) is causing a scrollbar to appear on Firefox only, and I can't understand the reason
2) div#containerTop is used by the footer css and it fits the whole page height
min-height: 100%; height: auto !important; height:100%
the problem is that I would like to have div#rightContainer with a certain height, i would like it to stretch for almost the whole page, (leaving some pixel between it and the footer). Obviously i tried with height in % and it didn't work.
I tried some CSS i found around but those didnt work too, probably because div#rightContainer is already inside a div container using itself a css height trick.
What can I do without recurring to javascript?
if you want to use % as height you have to put that in every parent element:
<body style="height: 100%;">
<div style="height: 100%;"></div>
</body>
maybe you could set the container absolute, but that not really a proper coding style.
First set div's parent height and width to 100% and set overflow in html tag to hidden as:
html{
width: 100%;
height: 100%;
overflow: hidden;
}
body{
width: 100%;
height: 100%;
}
and then set your div's width and height accordingly......
Here overflow property does the task. If now body exceeds the width/height of actual window size then reduce the size of body tag accordingly.
But this will surely remove the scrollbars.
It worked for me.
Related
I have made a page where I have set all parent elements their height to 100% including the app root. Still once I get to a component in the body it seems to ignore my height. If I use my dev tools it shows that the direct parent of ".main-container-employee" has 100% height. I have set the styles of the ".main-container-employee" inline to avoid any issue to shadow-dom but still no avail. Any help will be appreciated!
In styles.scss I have set the following code
:root,
html,
body {
height: 100%;
min-height: 100%;
}
.main-container-employee {
min-height: 100%;
height: 100%;
display: block;
}
In App.component I have madethe following html
<div class="main-container-employee" style="height: 100%; min-height: 100%; display: block;">
<div class="header-box">
<abf-logo-bar></abf-logo-bar>
<abf-navbar [routeList]="navbarRoutes"></abf-navbar>
</div>
<div class="content-container">
test
</div>
</div>
You're not understanding HTML right. You are giving your main-container-employee div a 100% height and that makes sense. The problem is, inside that you have two other divs.
The header-box div is wrapping the content you're putting inside it, thus its height is calculated through that.
The content-container div, which seems to be the problem you're pointing out is doing the same. It's wrapping the content you're putting inside, thus it does not expand to full height.
In order to expand the content-container div, you need to explicitly set its height to 100%.
I've created a demo with code similar to yours. Check it out.
#banner {
background: url(http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg) no-repeat center center/contain;
height: auto;
max-width: 100%;
<div id="banner"></div>
img {
height: auto;
max-width: 100%;}
<img src="http://www.lazarangelov.com/wp-content/uploads/2015/12/lazar1-1920.jpg" alt="">
I have running always into the problem with the responsive images,and i did not find an answer to clarify the problem.
The problem is with image
image {
height:auto;
width:100%;
}
when i add a simple image and style it, it works. when i start a project more complex with a lot of divs and I set the same properties doesn't work anymore. What's the purest explanation for this.
This is because when you add the <img> to the html directly, the browser sets the height of the element to the height of the image you provided (unless otherwise specified). When you add the image as a background of a <div> and set the height to auto, it tries to size the div to the height of the content. However, in this case, there is no content -- only a background that will be the background once the div has some height. An empty div has no height. Therefore, if you want the image to be the background of the <div>, it must either contain some content, or have its height set manually.
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!
In css when i give my div height a percentage value the div completely disappears, heres what im doing
<html>
...
...
<div id="logcontainer">
<div><div>
<div></div>
</div>
this is not the actual html but it sums up what im trying to do, heres my CSS
#logcontainer {
width:100%;
min-height:100%;
margin: 0px;
padding: 0px;
background-color: #7f7f7f;
}
whenever the height has a percentage value the div disappears, the width works but no height?, when I use ems or rem it works perfectly, any ideas?
I think all you need is html, body { height: 100% }, if i'm understanding your question correct
Set height of body 100%, then it will work. Since you need to set a 100% height on your parent element, in this case your body. The div tag is a container, but it is contained in the body tag... the body tag, unfortunately is not treated the same on all browsers... in some it is sized to fit the browser's available space... in some browsers the body tag is sized to fit the minimum height required to fit the current contents.... So a div tag set to 100% would size differently on each...in fact if empty, the div tag might not even show up on some browsers, since an empty body would be, potentially, 0px high...
html, body
{
height: 100%;
width: 100%;
margin: 0;
}
Here is the solution :
html, body { height: 100%; }
but it just a solution you need to understand why is happened , this happened because your element is a block level element which wrap up your whole content width and height width as a 100%
but this is not the case with height you need to specify the related to content to give a height in percentages like as above body has given 100%
enter link description here
i want to make the height of the aspx page auto. So i have fixed main div height:auto. But it is not working.
Code:
<div id='Div1' style="background-color: #F5F5F4; width: 100%; height:auto; padding: 15px;">
only top portion of the div is showing the background color.
it has to be overflow: auto in the style attribute, which will render a scrollbar if the content is more than the pre-defined height
You have height: 550px specified on your div, so it will always be 550 pixels high no matter how much content it has. If you would like its height to depend on its content instead, remove this declaration.