I have a div with 100% width, which fills the screen (horz) fine, but when I manually resize the browser window (horizontally) until it hits my fixed width wrapper (so scrollbar appears) and then scroll to the right the 100% width div does not fit 100% any more. Probably sounds more complicated than it is.
Example here : link
Set the min-width of the page body to the same width as your fixed width wrapper, for example:
body {
min-width: 900px;
}
See this example: http://jsfiddle.net/XLHqN/
Related
I have a fixed DIV container size : 375px * 667px for phone. How this DIV and all element inside (img,text,etc) will auto enlarge when user using a desktop browser?
original fixed div
auto enlarge
The trick would be to add height: 100% to all elements in the dom-tree that are around the div that needs to be 100% of height.
Don't forget the body, tag, as for most browsers, your body is not bigger as the content in it.
Some browsers even need to have it set on the HTML-tag.
Please check this example that I made:
HTML:
<body class="pcon">
<div class="ccon">
</div>
</body>
CSS:
.pcon{
border:solid;width:100%;background-color:pink;
}
.ccon{
width:2000px;height:300px;background-color:green;
}
https://jsfiddle.net/fpv3tfu6/4/
This is for the site that I am making, I have a div with a fixed size that might not be accommodated by the parent div if the user decided to resize the window, since I am using a width of 100% and my div has a fixed size of 1200px and if the user decided to resize the window, the same scenario happens since the parent will have to adapt to the new width.
To emulate what the scenario is, I have a parent div with 100% on width and it has a child with a div width of 2000px. As we see, the border doesn't completely "cover" the green box. What should i do to make the parent's border contain the div with a bigger size due to possible resizing?
The solution that I thought of is to use min-width (since the parent's width will be bigger than the pre-specified div's width).
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.
I have my website that is 1000px wide and centered. I have a div, inside the centered 1000px div, that is 500px left and 700px width. The div overflows out of the 1000px div to the right by 200px.
Everything looks great but on smaller monitors the overflowing div creates a scroll bar on the bottom.
Is it possible to mark this overflowing div as something like "do not add to scrollable area"?
I only want the overflowing part of this div to be visible if there is enough room on the screen.
**Added a Picture to help describe the issue.
**Added js fiddle here << had to use bit.ly cause it won't let me post jsfiddle
You should use height and width in percentage. By using this it will work on every resolution and div never get scrolled.
Like
div.body{
width: 100%
margin: 0 auto;
}
Could you let me know what is exactly your HTML DOM structure?
Add this CSS to your overflowing div. Anything that spills out of the div will not show in smaller monitors.
overflow: hidden;
Add overflow:visible; to the div with 1000px width. This will make the portion of the 700px width div to extend to right over the yellow div.
To prevent the scrollbar give overflow:hidden; to the body tag. But if the screen width is less than 1200px, the right portion will get cut. Try this anyway.
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.