如何防止table高度溢出容器div？

Question

我需要将 table 包含在其容器 div 中。

样式宽度完美，但高度完全没有反应。

我搜索了几十个类似的帖子。我试过 table-layout:fixed，相对定位容器，max/min-height，但似乎没有任何效果。

    <!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

出现问题是因为 div .movieContainer 具有固定高度如果将其高度更改为自动，它将起作用

    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>

如何防止table高度溢出容器div？

How to prevent table height from overflowing container div?

html

css

layout

html-table

css-tables