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.
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;
}
So basically when I shrink the page to say 1000px wide, enough for the x-axis scrollbar to appear. When I scroll to the right the navbar stops filling the 100% width, rather just the viewable width when you shrink the window.
I have had a fiddle around and cannot work out why it is doing this.
Here is the page:
http://astrodeer.com.au/habbonauts/test/index.php
Any help is appreciated.
100% of the width is 100% of the width of the parent (which is the screen size). You can scroll to the right, because the header is wider than that, but the bar still won't fill that width.
The easiest fix, without modifying the HTML, is adding this style to your CSS. Doing so will make the nav-bar background at least 1180px, which is the same size as the header.
.nav-bar {
min-width: 1180px;
}
Alternatively, you can put the nav-bar inside the header, so it will grow to 100% of the header width.
Add this style, it works fine.
body{ float:left; min-width:100%;}
or
body{ display:inline-block; min-width:100%;}
Body will not automatically stretch to 100%; so we add these.
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.
I’m trying to achieve a specific layout which I’ve tried to show here: http://tmp.grytoyr.net/layout/
Basically I am trying to have multiple absolutely positioned elements with their own scrollbars. The challenge is to get the height of the elements correct, so that the scrollbars look natural. Another requirement is that left and right should always occupy 50% of the main content area.
In Chrome and Safari on Mac it works as expected, but in Firefox the scrollbars for the scrollable elements that have been pushed down by the headers (menu, left, right) extend below the viewport.
I am guessing this is because Firefox interprets height: 100% on an absolutely positioned element with some content above it a little differently than Webkit browsers do.
Is there any way to achieve the desired layout in all modern browsers?
Edit: I’ll answer my own question since I just figured it out.
I had added "box-sizing: border-box" which I thought Firefox supported by now, but it turns out I needed to add "-moz-box-sizing: border-box" too.
Edit2: But be sure to check out the answer by rgthree, since that is a much better way to achieve the layout I wanted.
Yes, you cannot use height of 100% in this case, as that will be the height of the container and you have additional elements/padding/offset that is contributing to your overflow.
For instance, if a container's height is set to 500px, and you have a child content element with a height of 100%, its height will also be 500px. But if you start that child element under another element that is 50px (say, like a header in your example), then the total height is 550px (50px header + 500px "100%" content).
What you can do for your example, since everything is layed out absolutely, is use top/right/bottom/left. Here's the concept:
/* The container -- height/width doesn't matter */
.container {position:relative; height:500px; width:500px;}
/* A 50px tall header -- notice no width is set, but left/right is set to 0 */
.container > .header {
position:absolute;
top:0px;
left:0px;
right:0px;
height:50px;
}
/* The content under the header -- notice no height or width is set */
.container > .content {
position:absolute;
top:50px; /* 50px top to be below the header */
left:0px;
right:0px;
bottom:0px; /* Bottom is 0 so it will stretch the rest of the height */
overflow:auto;
}
Now, just apply this technique to all your nested items and you'll be in business.
Sorry to ask a really obvious question I'm sure it has a really simple answer, I just can't figure it out.
Very simply I want to place images inside of divs, where the images fill 100% of the height of the div.
CSS
.container{
height:100%;
float:left;}
img {
height:100%;}
HTML
<div class="container">
<img src="xyz.jpg" />
</div>
The result is as expected but with a large amount of whitespace to the right of the image (within the div) when viewed in any non-webkit browser.
In my layout I want to have many of these divs lined up (by float) in a row so its essential that the div's width shrinks to that of the image.
http://jsfiddle.net/osnoz/VzrnT/
By default, a div without specified height dimensions only expands enough to encompass its contents. Without a specified width, the div will expand to the width of its parent. So until you specify the width, the div's width will not shrink down to the image.
Your div is set to 100% height, which is in relation to its container height, not its contents.
You also do not need to specify 100% on the image itself. This will only make the image stretch to 100% of its container's height. Unless, you specify a container height, this is pointless.
I don't know if I understood the question right, but here it goes:
.container { display: inline-block; height: 100%; }
.container img { height: 100%; }
See the example at jsfiddle.net/erxLv/2