CODEWITHSUNDEEP
htmlcss
mvf4z7
mvf4z7

Reputation: 23

Div elements are not expanding to size of their parent container

I am attempting to create a simple webpage using React. I want to have a fixed navbar at the top of the screen and then content below it. My general structure is one in which there is a single div in the body, which is where the React application is "injected". The application itself consists of a top-level "app" div, and various child components.

<html>
  <head>
   <title>Sample App</title>
  </head>
  <body>
    <div id="react">
    </div>
  </body>
  <script src="/build/bundle.js"></script>
</html>

The issue Im having is that the div with the id 'react' is not filling the entire body of the html page. Therefore any content I have inside of my application div overflows outside of the 'react' div.

This code pen illustrates my problem: http://codepen.io/anon/pen/xGNejM

You can see at the bottom of the page that the lime background applied to the html tag is bleeding through. It is as if the body tag is not filling the whole screen. I thought setting height to 100% on html and body would handle this, but apparently not.

Upvotes: 2

Views: 3471

Answers (2)

zer00ne
zer00ne

Reputation: 43880

Try an implicit measurement on the body:

body { height: 100vh; width: 100vw; }

vh and vw viewport height and viewport width are like ems on steroids.

UPDATE

http://arcx.s3.amazonaws.com/test.html

So according to what I've gathered, you need the content to be displayed from the #react > #app and the #react > #app itself must expand according to it's content #child. I did a couple of things:

  • got rid of all the position: relative
  • replaced the height: 100% with height: 100vh
  • left no dimensions on html,body and added position: fixed
  • added a footer#foot at the bottom with position:relative so there's padding at the bottom to prevent the content #child from being cutoff from the display.
  • as suggested by @m1crdy I added overflow: scroll (I chose scroll over auto I don't like jumping scrollbars) to the #child but I didn't need to apply overflow: hidden to anything since I made the other components "static".

The content is editable, so type and hit enter key 100,000 times and it'll still expand without cutoffs or text jumping over borders. When you inject content inside, you might need a <br> or \n at the end for good measure.

Upvotes: 0

m1crdy
m1crdy

Reputation: 1401

100% height on html and body is filling the whole screen on startup, but not if the content is longer. Set your outer divs to overflow:hidden and your inner div to overflow: auto.

I have modified your fiddle.

Upvotes: 1

Related Questions