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;
}
Related
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
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.
Related questions do not contain helpful answers.
I'm trying to create a headerbar for a website that has a width of 2000 pixels (so wide enough to cover most large screens), but which is centered, but I also do not want the parent container div (which is positioned left 50%) to cause the browser to overflow horizontally.
I can't just "overflow hidden" on the html or body tags, as I am not declaring a specific width (and declaring 100% doesn't hide the overflow).
The code I have looks like this:
<body>
<div id="navbgout">
<div id="navbg"></div>
</div>
#navbgout {
width:2000px;
height:60px;
position:relative;
left:50%;
}
#navbg {
width:2000px;
height:80px;
position:relative;
left:-50%;
background-image:url("images/header_bg.png");
}
I've tried putting another parent container around it to provide an overflow:hidden, but nothing works. If I set that parent to 100% width, it doesn't mask. If I set it to a fixed value in pixels, it isn't reflexively sized.
This is particularly vexing as the iPad's mobile Safari will read this "overflow" width as true width and zoom the page out extra far to account for it.
You don't need to declare the width as 2000px to cater for screensizes. If you set the width as 100% then it will always adjust to the width of the viewport.
Ideally you would set the width as 100%, then add a container class with e.g. max-width: 1200px; and margin: 0 auto; This will then make the navbar always the width of the viewport but also allow the content to be centered on the screen.
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.
When I have a table with a width of 800px and an image within it with a width of 1000px, the table will expand to encompass the image. When I have a div with a width of 800px and the same image within it, the div will remain at 800px and the image will cross over the div's border. How do I get a div to replicate this expand-when-necessary nature of a table?
Set the width to auto and the min-width to 800px if you don't have to support IE6.
Like this
#mydiv {
width:auto;
min-width:800px;
}