Fixed bottom margin

Question

I've a page like this:

<html>
<head>
<style type="text/css">
  #mainDiv{
  height: 100%;
  }

  #myDiv{
  overflow: auto;
  width: 400px;
  }
</style>
</head>
<body>
  <div id="mainDiv">
  <div id="myDiv">content</div>
  </div>
</body>
</html>

I wish mainDiv was entirely contained in the screen (without scrollbars). This div contains myDiv and myDiv height depends on the screen height in such a way that its bottom border has a 30px margin from the screen bottom (or mainDiv bottom). What can I do?

score 1 · Answer 1 · answered Mar 23 '12 at 15:44

1

#mainDiv {
   width: 100%;
   height: 100%;
}
#mydiv {
  width: 100%;
  height: 100%;
  margin-bottom: 30px;
}

HTML

   <div id="mainDiv">
       <div id="mydiv">content</div>
  </div>

answered Mar 23 '12 at 15:44

SMacFadyen

3,145
2
25
37

score 1 · Answer 2 · answered Mar 23 '12 at 15:45

1

You could try:

#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }

The padding of #mainDiv should give the effective margin that you're hoping for on #mydiv.

To make sure there are no scroll bars, you may need to remove padding etc from the body too.

answered Mar 23 '12 at 15:45

Johno

1,959
1
15
15

With this code I've a 30px margin "under" the screen bottom, so there's the scrollbar... Can you explain me again your suggestion? – supergiox Mar 23 '12 at 15:56

score 1 · Accepted Answer · answered Mar 24 '12 at 18:44

1

Like @Johno suggested the solution should be

#mainDiv { width: 100%; height: 100%; padding-bottom: 30px; }
#mydiv { width: 100%; height: 100%; }

but when you try this solution you get a scrollbar because the content height is bigger than that of the window.

You get this because I think that the margin is added to the height of the content (that is 100%). So the order of the rules evaluation is:

Set the content height to 100%
Add a border of 30 px to the current height.

I tried to set a fixed height to the content, that is the window height minus 30 px, and I got the correct result.

answered Mar 24 '12 at 18:44

PinoSan

1,508
16
27

Yes, I think too. But I can't use a fixed height in px, calculated according to my window size. I wish something like `100%-30px` so there will be a 30px border in any screen, but unfortunately css doesn't accept this kind o measure. – supergiox Mar 25 '12 at 02:43
2

I found a duplicate question. Here you are a correct answer. http://stackoverflow.com/a/485887/680740. I tried and I think it's what you are looking for. – PinoSan Mar 25 '12 at 11:28
I didn't found this answer and it works perfectly. thank you very much! – supergiox Mar 25 '12 at 12:01

Fixed bottom margin

3 Answers3