How to make a div fill its container with 100% width and height?

Question

I am creating a text editor, and I am working on the sizing of my div. Unfortunately, it does not take up the whole page. Its width and height are set to 100%. Here is the CSS:

html, body {
    position:absolute;
    z-index:1;
    top:0px;
    left:0px;
}

If you would like to view the page, you can see it here. Thank you all so much for your help.

I would recommend you create a jsfiddle or at least a complete snipped with the div's markup and css. Also, im almost sure this has been answered before. — Ernesto, Dec 11 '15 at 16:54

score 2 · Accepted Answer · answered Dec 11 '15 at 20:56

2

The reason it's not taking up the entire height is because the parent objects are most likely not 100% as you would like. Place the following code before the container style:

 html,body{
width: 100%;
height: 100%;
}

answered Dec 11 '15 at 20:56

wizkid

38
5

score 0 · Answer 2 · answered Dec 11 '15 at 16:46

0

Be sure to include margin: none; and padding: none; in your initial declarations for html and body:

html, body {
    position:absolute;
    z-index:1;
    top:0px;
    left:0px;
    margin: none;
    padding: none;
}

answered Dec 11 '15 at 16:46

Rounin

27,134
9
83
108

score 0 · Answer 3 · answered Dec 11 '15 at 16:46

0

Give a height to editBox as well which is equal to the difference from the height of above element. Set the margin, padding to 0 for the html and body elements for avoiding overflow.

#editBox {
  height: calc(100% - 30px);
}

html, body {
  margin: 0;
  padding: 0;
}

answered Dec 11 '15 at 16:46

m4n0

29,823
27
76
89

Hmm. there is a bit of overflow when I embed it... – Zooza S Dec 11 '15 at 16:50

score 0 · Answer 4 · answered Dec 11 '15 at 16:54

I've changed it up a little bit

html,
body,
.container {
  position: absolute;
  margin: 0;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
}

.header {
  height: 30px;
  vertical-align: middle;
  border: 1px solid black;
  border-bottom: 0px;
}

#editBox {
  height: calc(100% - 33px);
  border: 1px solid black;
  font-family: 'Open Sans';
  overflow: scroll;
}

img.icon {
  width: 15px;
}

Here it is

http://jsfiddle.net/link2twenty/y9esbeLc/

How to make a div fill its container with 100% width and height?

4 Answers4