Home/ Questions/Q 7703513
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T23:28:36+00:00

I’ve a page like this: <html> <head> <style type=text/css> #mainDiv{ height: 100%; } #myDiv{

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0