Sean Cobb Sean Cobb - 4 months ago 12
CSS Question

table height overflowing container div

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

Kld Kld
Answer

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>


 

 

Comments