I'm using the ASP.NET template and trying to set my content to take the full height of my window, but I can't achieve it. I have one container and 2 sibling divs inside it. Setting the bottom div to height 100% causes it to overflow the container.
I am using Bootstrap too.
I can only lower it's height percentage to lower value, but isn't there a better way?
I added a screenshot and a fiddle:
http://jsfiddle.net/ob1g0752/
HTML:
<div style="height:100%; width:100%; border-style:solid; border-width:2px; position:absolute;">
<div style="margin:5px; width:100%; border-style:solid; border-width:2px; border-color:pink;">
test
</div>
<div style="height:100%;width:100%; border-style:solid; border-width:2px; margin:5px; border-color:yellow;">
test
</div>
</div>
<footer style="display:block;">footer</footer>
CSS:
body
{
min-height:100%;
min-width:100%;
}
html
{
height:100%;
}
EDIT
Sorry, I published an old version of the fiddle, this is the updated one. Watch the yellow border overflows the container.
http://jsfiddle.net/ob1g0752/4/
Removing the margin and padding will help, you can also add box-sizing: border-box; to account for borders and padding when setting widths. Also I'm not sure if you wanted to make your footer stick to the bottom of the page, but I did that along with the other fixes in this fiddle:
http://jsfiddle.net/ob1g0752/2/
You need to add
margin: 0px;
padding: 0px;
to html and body.
Also, your div's have a 2-pixel border and 100% width. This forces a horizontal scroll-bar.
Related
Please see this pen in Chrome: codepen example
html:
<div class='flexbox'>
<div class='static'>ddd
</div>
<div class='flex'>
<div class='flex-child'>
<div class='container'>
*** very long text here *** ...</div>
</div>
<div class='flex-child'>hhh
</div>
<div class='flex-child'>hhh
</div>
</div>
<div class='static'>ddd
</div>
</div>
css:
html,body{
margin:0;
padding:0;
overflow:hidden;
}
.flexbox{
position:absolute;
background:black;
width:100%;
height:100%;
display: flex;
flex-direction:column;
}
.flex{
background:blue;
flex:1;
display:flex;
position : relative;
}
.flex-child{
background:red;
width:100%;
display:block;
color:white;
position : relative;
}
.static{
background:transparent;
width:100%;
color:yellow;
}
.container{
position : relative;
background:magenta;
height:100%;
}
I believe the example is almost selfexplanatory.
The question is: How to do it, to have the .container div ready to host any kind of content, unknown at the moment, and not to overlap over the footer.
try to remove background colors. the text from .container is visually mixed with the text of the .static footer. How to arrange it and have the .content div and its text not to overlap the footer?
edit:
The footer should be at the bottom of the viewport.
No explicit sizes or dimensions are allowed to be set in css.
Please take my question as an example, an experiment.
My concern is not to use any explicit sizes or dimensions e.g. header height 50px, I want to have the layout as general as possible. so if I formulated my question in other words:
pls in my original codepen delete all the text from the .container and then check the .container height via developer tools. It will be 0, but I would expect it to be the same height as it's parent .flex-child is.
I know that it probably would not be following the specification, but how to achieve this?
edit 2:
I described my problem in more detail in another question, with codepen and picture. Thank you for your ideas. https://stackoverflow.com/questions/32114925/header-flexible-body-with-nested-flexible-columns-footer-concrete-layout
thank you
Your actual requirements are a little unclear as to the actual position of the footer.
Option 1.
The footer should be at the bottom of the viewport and so the whole page must be contained within the viewport.
In this case the content of the main element can be any size and a scrollbar is added when content will overflow the height of the element.
Codepen Demo
Option 2.
The footer should be at the bottom of the page/document and the page can be any height (presumably with a minimum of the viewport height).
In this case the content of the main element can be any size and the page/dicument will increase in size to accomodate it
Codepen Demo
I've got the following problem:
I want to have a relative container element that contains some child elements each with margin.
If i dont set the height of the container, it resizes height / width by its containing children.
Problem is that it seems to ignore the margin on them.
here some code:
css:
.container{
position:relative;
}
.child {
position:relative;
float:left;
width:200px;
height:50px;
margin-bottom:20px;
}
html:
<div class="container">
<div class="child">hello world</div>
</div>
The container should now resize height to 50+20 = 70px,
so if i put another element below it should be ok but it isn't.
Margin seems not to resize containers height, how to change this?
Not getting your question quiet well but you are probably missing to clear your floats...
Demo
.container{
position:relative;
border: 1px solid #f00;
overflow: hidden;
}
Alternatively you can also use clear: both;
Demo
Depending on the effect you are trying to achieve, either:
1) Add 'overflow:hidden' to the .container div
or
2) Use padding-bottom instead of margin-bottom on the .child div
<div id="container">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="clear"></div>
</div>
#container{
width:200px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
}
#top{
width:200px;
height:20px;
border:medium ridge #FFF;
}
#left{
float:left;
width:50px;
height:20px;
border:medium ridge #FFF;
}
#right{
float:right;
width:40px;
height:20px;
border:medium ridge #FFF;
}
#clear{
clear:both;
}
Why the #right and #top are not right aligned?
Its because the top element is actually overflowing the bounds of the container, while the floated element right is being restricted to it. The top element is overflowing the container because the border is not included in the width. So top is actually occupying 204px.
Problem Illustrated via Example: http://jsfiddle.net/KhJ6e/2/
To fix, adjust top to account for the 2px border on each side. (subtract 4 from width of container) or specify width as auto depending on your intentions.
#top{
width:196px;
height:20px;
border:medium ridge #FFF;
}
Example: http://jsfiddle.net/KhJ6e/1/
The top is wider than it's parent container
#top{
width:auto;
}
The problem is how the width is calculated for the box model. All elements on the screen have 4 components (inner to outer): content, padding, border, margin. By default, the width includes only the content. By adding the borders, top becomes larger than 200 pixels. Using the developer tools in chrome, it was rendering as 206px.
There are two possible solutions, one is fudge the widths, or two modify the box model. The first will work, but it is difficult to maintain. Any small change can mess up the alignment.
A better solution is to use box-sizing: border-box. By adding that CSS style, the width attribute will include content, padding, and border. So, originally padding and border wrap around the outside, but with border-box, the encroach on the inside.
Original: http://jsfiddle.net/deafcheese/Gv5BZ/
Corrected (using
boz-sizing: border-box): http://jsfiddle.net/deafcheese/Gv5BZ/1/
box-sizing reference: http://css-tricks.com/box-sizing/
I am using php to dynamically create webpages. As such I have things more objectified. My generic page creates a header, a mainbody and a footer. The content is the placed inside of my mainbody.
Mainbody has a min-height of 600px.
A div inside of mainbody for one page acts as a menu on the left side of mainbody. I want this div to be 100% of the height of the mainbody.
The div (menu) is floating left, and the rest of the mainbody content is generated dynamically by the php.
What doesn't Work:
height:100%; (It just ends up being the height of the content I have inside the menu, not the height of the mainbody)
min-height:600px; (It just stays 600px, even when mainbody gets larger)
Haven't played with it enough, but position absolute, absurdly large height, and a negative z index, and mainbody overflow...not successful with the little bit I tried.
Any ideas? I'm totally open to doing any kind of weird manipulation, so long as it looks natural.
Here's example code: jsfiddle.net/TButx
http://jsfiddle.net/TButx/56/
The solution is to pad the bottom of the column and hide overflow.
#html{width:400px; height:100%; margin-left:auto; margin-right:auto; background-color:yellow;}
#mainbody {min-height:300px; height:100%; overflow: hidden;}
#menu {width:100px; height:inherit; background-color:blue; float:left; padding-bottom: 700px;margin-bottom: -700px;}
#content {height:100%; width:300px; background-color:red; float:right; padding-bottom: 500px;margin-bottom: -500px;}
#clear {clear: both;}
<div id="html">
<div id="mainbody">
<div id="menu"></div>
<div id="content"></div>
<div id="clear"></div>
</div>
</div>
There must be an error in your code. As you describe it, everything should work.
Like here: http://jsfiddle.net/VxSA3/
HTML:
<div id="Mainbody">
<div id="menu">menu content</div>
<p>some text in the main-body</p>
</div>
CSS:
#Mainbody{height:600px;outline:1px solid green;}
#menu{height:100%;outline:2px solid red;float:left;width:100px;}
A common problem with this is that your main body div isn't wrapping around your floating elements. You have to have a div in it with clear:both and the body div will stretch.
As an alternative method, you can use absolute position to control the stretch of the menu div.
For the main body div:
position:relative;
For the left floated div (no longer left floated in this case):
position:absolute;
left:0px;
bottom:0px;
top:0px;
width:...
I have a setup that looks like this:
<html><head><style>
table{
height:100%;
width:100%;
padding:0 20px 20px 20px;
min-height:540px;
min-width:720px;
}
tr.head{
height:35px;
background:black;
}
td.left-bar{
background-color:green;
width:220px;
}
td.spacer{
width:10px;
}
td.right-bar{
background-color:blue;
}
div.sb-top{
height:20px;
background-color:red;
}
div.sb-bottom{
height:100%;
background-color:yellow;
padding:10px;
}
</style></head><body>
<table>
<tr class="head"><td colspan='3'></tr>
<tr>
<td class="left-bar"><div class="sb-top"></div><div class="sb-bottom"></div></td>
<td class="spacer"></td><td class="right-bar"></td>
</tr>
</table>
</body></html>
However, when I do this both the height and padding on sb_bottom cause it to overflow past the cell. I'm not so concerned about the right/left overflow, but I absolutely must fix the bottom overflow. How can I do this? Thank you!
You could always put an inner wrap inside of sb_bottom and give that the padding. That way it won't overflow.
How about moving the padding to the body instead of the table?
If that does not work, you can put the table in a div and give the div the appropriate margins instead of a padding.
get rid of your height and width 100% requirements... it will spread on its own. also, your min-heights and widths may be playing factors here... you can get rid of those too
This is probably just a hack, but I added padding-bottom to the left-bar and it looks okay.
td.left-bar{
background-color:green;
width:220px;
padding-bottom:40px;
}
I loaded up the sb-bottom div with text and it scrolled off the screen, but I wasn't sure if you wanted the height to be fixed or to be scrollable.
All you need is box-sizing: border-box; on div.sb-bottom.
This would make sure height:100% includes the padding as well in the parent content height. Otherwise, actual height or the div will be height of the parent + padding which will always go beyond the parent content height.