Wie verhindert man, dass die Tischhöhe überläuft?

Ich brauche den Tisch in seinem Container Div enthalten sein.Wie verhindert man, dass die Tischhöhe überläuft?

Styling-Breite funktioniert perfekt, aber die Höhe reagiert nicht mehr.

Ich habe Dutzende ähnlicher Beiträge gesucht. Ich habe versucht Tisch-Layout: fest, relative Positionierung der Container, Max/Min-Höhe, und nichts scheint zu funktionieren.

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

Quelle

2016-07-03 Sean Cobb

Das Problem geschieht, weil die div .movieContainer eine feste Höhe hat Wenn seine Höhe es zu Auto ändern funktioniert

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>

Quelle

2016-07-03 00:09:58 Kld

Dank ! Würde es Ihnen etwas ausmachen zu erklären, warum das so ist? Ich kann meinen Verstand begreifen, warum es überfüllt war, denke ich. Aber warum ist es nicht einmal möglich, die Höhe des Tisches zu ändern, wenn sein Elternteil eine feste Höhe hat? –

@SeanCobb das war eine Lösung, Sie haben viele andere Möglichkeiten, wie die Höhe ändern, damit die Tabelle passen kann, oder die Tischhöhe auf die gleiche Höhe des Elternteils ändern. – Kld

Wie verhindert man, dass die Tischhöhe überläuft?

Antwort

Verwandte Themen