2

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%;
}

screenshot


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/

Zanon
  • 29,231
  • 20
  • 113
  • 126
Ronen Festinger
  • 2,260
  • 1
  • 23
  • 32

2 Answers2

1

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/

Joe Sager
  • 787
  • 4
  • 9
  • Sorry, the fiddle wasn't up to date, see my edit jsfiddle.net/ob1g0752/4 – Ronen Festinger Dec 30 '14 at 22:27
  • well yeah the border is going to overflow, the height is 100% and it is below another element, so the overflow will be equal to the element it is below. If you can't edit the `height` you can set `position: absolute` and `top: 0`. Make sure you also add `position: relative` to the parent element and add `padding-top: 20px` to the yellow bordered element if you want the contents to display below the previous element. Make the padding equal to the height of the pink bordered element. Fiddle: http://jsfiddle.net/ob1g0752/5/ – Joe Sager Dec 31 '14 at 15:49
  • The problem is the div above can be displayed or not displayed and in both cases I want the bottom div to take the rest of the container space. Also in your fiddle, the bottom container top border overlaps the top one and is not beneath it. – Ronen Festinger Dec 31 '14 at 19:05
  • check out this question http://stackoverflow.com/questions/11225912/make-div-height-occupy-parent-remaining-height I think the third answer supplies what you are looking for. And in my example, the elements do overlap, but the bottom one has `padding-top` to push its content down so the content itself will not overlap – Joe Sager Dec 31 '14 at 20:21
  • Thanks, I will try to look at it although they require the top div to be static height. I know you set the padding, but I need to display the borders of the element too, :(. – Ronen Festinger Dec 31 '14 at 20:51
  • Okay, I dont think there is a way to have one div take up a variable space and then another take up the rest of the space with just css, you will probably have to use javascript. With jquery you can pretty easily detect the height of the top div and parent div then set the bottom div's height to the difference. You may be able to do it using tables, but that isn't good practice and should be avoided – Joe Sager Dec 31 '14 at 21:56
0

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.

Kylos
  • 1,888
  • 14
  • 24