I can't get the divs to cover the full image height, but when i resize it doesn't cover the full height of the image.
width:50%;
height:100%;
Width works but the height doesn't.
Instead of using 100% in height you can replace it with 100vh.
height:100vh;
You have to set a 100% height on all your parent elements
Related
I have a large document (i.e. 5000px : 3000px) and I need to display it centered in a 800px : 600px div with potential margins. I decided to use:
translate:scale(0.15) translateX(-50%);
left:50%;
But the parent div is still expanded to the height of 3000px. When I set parent height or/and max-height on 600px and it do resize to given height, but browser window is still 3000px height.
Does any body have a solution to fit the window to its content?
set height and add overflow:hidden to your css, This wil fix your issue
.parent {
height:400px;
overflow:hidden;
}
I want to add background-image to the div element so it would act like a baclground-image in the body (here is an example http://plnkr.co/edit/gFZZgPmSKMDu3gZEp1H0?p=preview ) - it changes its width and height depending on screen size. And when i add the same code to the div element it does not work.
Example look of how it should work http://thegreatdiscontent.com/
If I'm understanding you correctly, you need to give the div element a percentage width and auto height.
.imageContainer {
width:100%;
height:auto;
}
This will make sure the image retains its ratio as the browser window is resized.
I have a header image which is 1358 × 218. On larger screens, it doesn't fit the width of the screen. I want it to scale the image, keeping aspect ratio, so the width always fills 100% of the width of the browser. Here is the code I currently have:
http://jsfiddle.net/qD5n5/
How can I achieve this?
On modern browsers (IE >= 9 and other browsers) you can use background-size: cover. Otherwise you would need to change the markup, possibly by displaying the image with an <img> tag instead of a CSS background.
You can't modify a background-image size. You would have to it like this:
<div id="header" style="oveflow: hidden; height: 50px /*your fixed height*/">
<img src="background.jpg" style="max-width: 100%" />
</div>
this will stretch the image to the 100% keeping the aspect ratio and the overflow: hidden will let you keep a fixed height.
here's the fiddle: http://jsfiddle.net/kumiau/qD5n5/1/
just remove the height , if you set width and no height , the broswer will keep aspect ration
#header {
background-image:url('http://i.imgur.com/RvQdH.jpg');
width:100%;
margin-left:auto;
margin-right:auto;
background-position:center;
background-repeat:no-repeat;
}
use these css settings for the actual <img> tag , not a div for the browser to resize properly
I am having problems getting my main content div to stretch to full height, the other container is able to stretch to full height.
http://westcountrycreamteas.co.uk/test.html
Is the page I am trying to stretch down and the div that is having problems is inner.
Remove
height: auto !important
from your container div #outer.
Should fix the issue.
You could try
#para {
margin-left: 10%;
height:999px;
overflow:hidden;
}
but i think,the content area shallstretch depending on the content.
Fiddle http://jsfiddle.net/CPfyL/
There is a bug in your outer div. You have set its height using a percentage, but heights can only be set using px. What should you do:
Set the outer div height to a desirable amount, eg: height: 900px;
Set the height of the div you're talking about the same as the outer's one.
i think you want max-height :
div{
height:100%;
}
Alrighty,
I'm going to try to explain what I have going on. Let me know if you need more information.
Basically, I have a div container, and I have it styled at height:100%; It will do 100% but it will only be 100% for the current browser/window size.
For example: if I maximize the browser, the container will do 100%, but if I scroll down, that container's height only goes as much as whatever the browser height was.
Another example: if I minimize the browser to a certain size and refresh the page, the container will go 100% again to the window size only. So if I maximize the browser, the height container will still be the same height has if the browser was minimize.
So if I have a long page, the container doesn't go all the way down to the page, the container only goes so far as the window's height size when the page loads.
I'm trying to get the container to go all the way 100% till the bottom of the page, even if I have a footer or header, the container should be 100% between the two.
So I'll try to post up the most relevant code:
body,html
{
display:block;
position:relative;
}
#container_100percent
{
overflow-x:hidden;
position:relative;
overflow-y:auto;
width:20%;
min-height:100%;
height:100%;
float:right;
}
<div>
<div id="container_100percent">
<!-- some stuff !-->
</div>
</div>
The height of 100% is the height of his parent.
This means: if the parent div-container has no height, the height will be set to 100%, too and same for body. This is why your div has the height of your window.
So you need to give your div wrapper a height and the inner div will take on this height.
If you want the container to be as high as its contents, don't set the height property. It's as simple as that.
If, however, you want it to have a minimum height (i.e. you never want to let it be less high than the window) set the min-height property.