How to prevent table height from overflowing container div?

Question

I need the table to be contained inside its container div.

Styling width works perfectly, but height is completely unresponsive.

I've searched dozens of similar posts. I've tried table-layout:fixed, relative positioning the container, max/min-height, and nothing seems to work.

    <!DOCTYPE html>
<html>

  <head>
    <title> Aisha-Flix </title>
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
    <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Prompt:300,600" rel="stylesheet"> 

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">




    <style>

    html{height:100%}

    body{
      padding: 0;
      margin: 0;
      color: #f5f5f5;
      font-family: 'Prompt', sans-serif;
      height: 100%;
    }


    #content{
      height: 100vh;
      border: 1px solid black;
      position: relative;
      background-color: black;

    }

    #movieContainer{
      position: absolute;
      width: 100%;
      height: 50vh;
      top: 33vh;
      background: url(giphy3.gif);
      background-size: 100% 100%;
      border: 1px solid green;
    }

    table{
      width: 100%;
      height: 90%;
      border: 1px solid red;
      table-layout: fixed;

    }

    #number{
      font-size: 16vh;
      padding-top: 16vh;

    }

    #number span{
      font-size: 30vh;
      font-family: Gill Sans;
    }

    td{
      border: 1px solid orange;
    }

    .anim{
      background: url(static.gif) !important;
      background-size: cover !important;
      background-repeat: no-repeat;

    }

    td:nth-child(2){
      vertical-align: top;
    }

    p:first-child{
      font-family: Gill Sans;
      font-size: 1.7em;
    }

    #rating{
      text-align: right;
      vertical-align: top;
    }




    </style>
  </head>

  <body>

    <div id="content">
      <button id="test"> </button>

      <div class="col-xs-12" id="movieContainer">
        <table>
               <tr>
          <td id="number" width="66%" rowspan="2">#<span>7</span></td>
          <td>
            <p> 2001: A Space Odyssey</p>
            <p><b>Director</b></p>
            <p style="margin-top: -10px;"> Stanley Kubrick - 1968</p>
            <p><b>DP </b></p>
            <p style="margin-top: -10px;"> Geoffrey Unsworth </p>
          </td>
        </tr> 

            <tr> <td id="rating"> <p> &#11088 &#11088 &#11088 </p></td></tr>

        </table>
      </div>

      <div id="addMovie"></div>
    </div>

    <div id="footer"> </div>


     <script type="text/javascript">

        var windowHeight =  $(window).height();

        $("#landingPage").height(windowHeight + "px"); 

        $("#test").click(function(){
          $("#movieContainer").addClass("anim");
        });




      </script>


  </body>


</html>

JSBIN: http://output.jsbin.com/zafodepozu

Answer 1

The problem is happening because the div .movieContainer has a fixed height If change its height to auto it will work

  var windowHeight = $(window).height(); $("#landingPage").height(windowHeight + "px"); $("#test").click(function() { $("#movieContainer").addClass("anim"); });

  html { height: 100% } body { padding: 0; margin: 0; color: #f5f5f5; font-family: 'Prompt', sans-serif; height: 100%; } #content { height: 100vh; border: 1px solid black; position: relative; background-color: black; } #movieContainer { position: absolute; width: 100%; height: auto; top: 33vh; background: url(giphy3.gif); background-size: 100% 100%; border: 1px solid green; } table { width: 100%; height: 90%; border: 1px solid red; table-layout: fixed; } #number { font-size: 16vh; padding-top: 16vh; } #number span { font-size: 30vh; font-family: Gill Sans; } td { border: 1px solid orange; } .anim { background: url(static.gif) !important; background-size: cover !important; background-repeat: no-repeat; } td:nth-child(2) { vertical-align: top; } p:first-child { font-family: Gill Sans; font-size: 1.7em; } #rating { text-align: right; vertical-align: top; }

  <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" /> <script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Prompt:300,600" rel="stylesheet"> <body> <div id="content"> <button id="test"> </button> <div class="col-xs-12" id="movieContainer"> <table> <tr> <td id="number" width="66%" rowspan="2">#<span>7</span></td> <td> dgdsgdsg </td> </tr> <tr> <td id="rating"> &#11088 &#11088 &#11088 </td> </tr> </table> </div> <div id="addMovie"></div> </div> <div id="footer"> </div>

How to prevent table height from overflowing container div?

Question

1 answers

solution1
0 ACCPTED 2016-07-03 00:09:58

How to prevent table height from overflowing container div?

Question

1 answers

solution1 0 ACCPTED 2016-07-03 00:09:58

solution1
0 ACCPTED 2016-07-03 00:09:58