I have a div under body whose width:100% and height:100%,
now when i try to set min-width and min-height to my mainDiv, its not appling to div tag
.mainDiv{
width:100%;
min-width:100%;
height:100%;
min-height:100%;
position:relative;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
Now used to this
body, html{
height:100%;
}
than give your
div{
min-height:100%;
}
Live Demo
Related
So, I have a two column layout and can't seem to get the height to work like I want. These both have content that needs to grow and cause the page to be scrollable - so fixed and absolute values are out. However, when using relative on these columns (and their containing div) and min-height percentages (i.e. minimum of 100% so it always at least fills screen if no content present). However, it isn't working. The min-height isn't getting recognized and I get no height unless there is content.
I realize I could have a div that's in a fixed position and solely for background. However, because sometimes within the same page (tabs) the column layout could change, I would rather not use this approach.
Anywhere here is a fiddle: http://jsfiddle.net/hpAbc/80/
And some sample code from the fiddle:
html, body{
width:100%;
height:100%
}
#container {
width:100%;
min-height:100%;
padding-top:40px;
position:relative;
}
#nav {
background:#222222;
width:500px;
height:40px;
position:fixed;
top:0;
z-index:100;
}
#content{
background:#aaaaaa;
width:500px;
height:100%;
position:relative;
}
#main-content{
background:#e1e1e1;
width:300px;
height:100%;
float:left;
}
#side-bar{
background:#d1d1d1;
width:200px;
height:100%;
float:left;
}
.stuff{
background:yellow;
margin:10px;
width:50px;
height:50px;
position:relative;
}
You could use "display:table-row" and "display:table-cell" using your existing markup to get the effect you are looking for.
#content{
background:#aaaaaa;
width:500px;
height:100%;
position:relative;
display:table-row;
}
#main-content{
background:#e1e1e1;
width:300px;
height:100%;
display:table-cell;
}
#side-bar{
background:#d1d1d1;
width:200px;
height:100%;
vertical-align:top;
display:table-cell;
}
Updated fiddle:
http://jsfiddle.net/PQPrW/
Alternately, if you are willing to change your markup, you can use nested divs to get the same effect. There is an article that explains it here:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
I'm working on the following layout structure:
<div id="wrapper">
<div id="header"></div>
<div id="pageContainer"></div>
<div id="footer"></div>
</div>
With the following CSS I set the footer to the bottom of the page:
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#pageContainer {
padding:10px;
padding-bottom:60px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px;
background:#6cf;
}
If the content in the 'pageContainer div' is small, I don't want to show the scroll bars in the div but attach the footer to the bottom of the 'pageContainer div' (right not the footer is always at the bottom of the viewport)
If the content of the 'pageContainer div' is long I need the footer to remain visible in the viewport (at the bottom) and show the scroll bars in the 'pageContainer div'.
How do I do this? Any ideas? thanks!
PS: I need a solution that doesn't use JS.
If I read you correctly, you're describing behavior where positioning switches from relative to fixed, depending on the size of an element relative to the real-estate available in the viewport.
Quite certainly, you cannot achieve this without JavaScript.
But a solution where the footer is always at the bottom of the viewport is fairly common and easy to do without JavaScript. In case you do not already know how to do that:
#header, #pageContainer, #footer{
position:fixed;
left:0px;
right:0px;
}
#header{
top:0px;
height:100px;
background:#ff0;
}
#pageContainer {
top:100px;
bottom:60px;
overflow:auto;
}
#footer {
bottom:0px;
width:100%;
height:60px;
background:#6cf;
}
I guess you could do something like this:
#header {
background:#ff0;
padding:10px;
height: 15%;
}
#pageContainer {
padding:10px;
max-height: 70%;
overflow: auto;
}
#footer {
bottom:0;
width:100%;
height:15%;
background:#6cf;
}
Note that you need to specify your heights in percentages. Also padding might be an issue.
I'm trying to create a HTML CSS Layout using div tag.
Code here
Now it display a vertical bar. I want to avoid this vertical bar, and would like to display only if the content is big.
May you wnt an Sticky Footer than put your footer outside the #container.
Check this http://jsbin.com/ujemaq/17
EDIT:
Ok your actual problem arises with the height ambiguity, see these line:
#container{
min-height: 100%;
width:100%;
height:100%; /* this causes container to a 100% height of body*/
}
#header{
width:100%;
height:55px; /* this takes 55px of container height*/
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px; /* this takes another 20px of container height*/
/*border:2px solid;*/
}
#left-nav{
width:20%;
height:100%;
float:left;
/*border:2px solid;*/
}
#content{
height:100%; /*You thinking of getting full height of container but the 75px height is already grabbed by header and menu, so while expanding content to 100% height a vertical scrollbar appears */
/*border:2px solid;*/
}
apply this css
body,html{
height:100%;
}
#container{
min-height: 100%;
width:100%;
height:100%;
}
#header{
width:100%;
height:55px;
/*border:2px solid;*/
}
#menu{
width:100%;
height:20px;
/*border:2px solid;*/
}
#left-nav{
width:20%;
float:left;
/*border:2px solid;*/
}
#content{
height:85%;
/*border:2px solid;*/
}
#footer{
background-color:#FFA500;text-align:center;
}
</style>
I have a middleContent div which has two sub-divs acting as columns. The middleMain div works fine, the middleRight div doesn't show unless I fill it with some content or use absolute positioning.
This is a picture of my page:
http://imageshack.us/photo/my-images/403/tempzk.jpg/
With the following CSS:
#middleContent
{
position:relative;
min-height:500px;
height:auto;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:absolute;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
}
However, I need it to work with relative positioning since the height expands depending on the content in middleMain. MiddleRight doesn't have any content in it (but needs the capability to add content so I can't just use a picture), so I basically need to display an empty div (but with background color) that takes up the height of the whole page.
change your CSS to :
#middleContent
{
position:relative;
min-height:500px;
height:auto;
overflow: hidden;
}
#middleMain
{
float:left;
height:100%;
left:0;
right:auto;
}
#middleRight
{
position:relative;
float:right;
width:100px;
height:100%;
right:0;
background-color:Orange;
top: 0px;
padding-bottom: 9000px;
margin-bottom: -9000px;
}
http://jsfiddle.net/fXHqL/1/
Add this line to #middleRight
display:block;
it should work.
Here is the HTML Code:
<div id="header">
</div>
<div id="container">
<div id="leftbar">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
And here is what I want to achieved, even though it's not valid CSS, but I think you will understand my point:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
}
#footer
{
width:100%;
height:10px;
}
#container
{
width:100%;
height:100%-100px-10px; /* I want #container to take all the screen height left */
}
#leftbar /*fixed width, the height is always the same as the screen height*/
{
height:100%;
width:200px;
}
#content
{
height:100%;
width:100%-200px; /* take all the screen width left except the leftbar */
overflow:auto;
}
Someone just put this as an example:
http://limpid.nl/lab/css/fixed/header-and-footer
I do not think using <body>padding to exclude the header and footer is a good way to go, because I would like all the scroll bars appear inside the div#content, not for the whole <body> tag.
The normal width of a block element is 100% so all you should need to do is add a margin as appropriate. If I'm understanding your question properly.
Have you considered using position:fixed for the framework elements? Or are you stuck supporing IE6?
the horizontal bit can be achieved quite easily
#content {margin-left:200px;}
#left-bar {float-left;width:100px;}
The vertical bit is trickier as there is no vertical equivalent of float. A close approximation that might work is:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
position:absolute;
top:0;
left:0;
}
#footer
{
width:100%;
height:10px;
position:absolute;
bottom:0;
left:0;
}
#container
{
width:100%;
height:100%;
margin-top:100px;
margin-bottom:10px;
}
#leftbar
{
height:100%;
width:200px;
float:left;
}
#content
{
height:100%;
margin-left:200px;
overflow:auto;
}
You could use calc(), e.g.:
#container {
...
height: calc(100% - 100px - 10px);
}
And you could either use margins or fixed positioning to set the position of it to between the header and footer.
As for the scrollbars, just apply overflow: hidden to body and div#container and apply overflow: auto to div#content.