CODEWITHSUNDEEP
csshtmlmargin
supergiox
supergiox

Reputation: 1596

Fixed bottom margin

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?

Upvotes: 1

Views: 4945

Answers (3)

PinoSan
PinoSan

Reputation: 1508

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:

  1. Set the content height to 100%
  2. 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.

Upvotes: 1

Johno
Johno

Reputation: 1959

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.

Upvotes: 1

SMacFadyen
SMacFadyen

Reputation: 3165

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

HTML

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

Upvotes: 1

Related Questions