Machen div gehen unter auf dem kleinen Bildschirm

Question

Ich habe ein Problem, meine Chatbox unter dem Video gehen, wenn die Bildschirmgröße klein werden. Wie kann ich das Video auf einem kleineren Bildschirm nicht verkleinern? Ich möchte, dass es reagiert.

<div class="container-fluid" > 
    <!-- style="height: 90%; width: 60%; float:left;" height="100%" width="49%" align="left" --> 
    <div class="youtube-video" id="video"> 
    <!-- for live video --> 
    <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2F1277805348996425%2Fvideos%2F<?php echo $liveID; ?>%2F&show_text=0&width=476" width="476" height="476" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe> 
    <!-- <iframe class="embed-responsive-item" src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2F<?php echo $liveID; ?>%2Fvideos%2F1277978488979111%2F&show_text=1&width=560" width="560" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe> --> 
    <!-- <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2F1277805348996425%2Fvideos%2F1278782988898661%2F&show_text=1&width=560" width="560" height="475" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe> --> 
    <!-- for embbedded facebook video (test purposes) --> 
    <!-- <iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2FDota2BestYolo%2Fvideos%2F<?php echo $liveID; ?>%2F&show_text=1&width=560" width="560" height="451" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe> --> 

    <!-- youtube embed video --> 
    <!-- <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/live_stream?channel=UCJaiEVEFaen5QC28rJp0fEw"></iframe> --> 
    </div> 

    <div class="chat row" > 
    <div id="messages" class="chat-area"></div> 
     <?php 
      if (loggedin()) { ?> 
       <table> 
        <tr> 
        <td> 
         <textarea style="padding: 10px;" rows="3" cols="50" class="entry row" placeholder="Type your message here..." name="msg" id="txtBox"></textarea> 
        </td> 
        </tr> 
       </table> 
       <?php } else { ?> 
        <table> 
        <tr> 
        <td style="width: 400px;"> 
         <textarea style="" id="message" rows="3" cols="50" class="entry row" placeholder="Type your message here..." name="msg"></textarea> 

         <!-- Modal --> 
         <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> 
          <div class="modal-dialog" role="document"> 
          <div class="modal-content"> 
           <div class="modal-header"> 
           <h5 class="modal-title" id="exampleModalLabel">Please Login</h5> 
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
            <span aria-hidden="true">&times;</span> 
           </button> 
           </div> 
           <div class="modal-body"> 
           <p>You must first login before you can join the conversation.</p> 
           </div> 
           <div class="modal-footer"> 
           <input type="button" class="btn btn-primary" value="Login" onclick="location.href='login.html'"/> 
           <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button> 
           </div> 
          </div> 
          </div> 
         </div> 
        </td> 
       </tr> 
       </table> 
      <?php } ?> 
</div> 

</div><!-- end of container --> 

enter image description here Dies ist, was ich erreichen will.

enter image description here Aber das ist, was ich bekomme.

Answer 1

Sie können die CSS-Eigenschaft flex-wrap verwenden, um die Arbeit zu erledigen. Wenden Sie die flex-wrap-Eigenschaft auf das übergeordnete Element an, das sowohl Video- als auch Chat-Elemente enthält.

Versuchen Sie, die Demo auf dieser Seite https://css-tricks.com/almanac/properties/f/flex-wrap/ zu überprüfen, um zu sehen, wie es funktioniert. Verändern Sie die Größe Ihres Browser-Bildschirms, um die gelben Kacheln entsprechend zu sehen.

Answer 2

Sie können flexbox verwenden, um dies zu lösen. Verwenden Sie flex-wrap: wrap, um den Chat unten auf einem kleineren Bildschirm und flex-shrink: 0 zu erhalten, damit Video seine Größe nicht reduziert.

Führen Sie dieses Snippet aus, um zu verstehen.

.parent { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    background-color: yellow; 
 
} 
 

 
.video { 
 
    flex-shrink: 0; 
 
    background-color: red; 
 
    width: 200px; 
 
} 
 

 
.chat { 
 
    width: 100px; 
 
    background-color: orange; 
 
    flex-shrink: 0; 
 
}

<div class="parent"> 
 
    <div class="video"> 
 
    VIDEO 
 
    </div> 
 
    <div class="chat"> 
 
    CHAT 
 
    </div> 
 
</div>

Lassen Sie mich wissen, ob es hilft.

Answer 3

Ich werde Ihre Frage beantworten, vorausgesetzt, Sie verwenden Bootstrap 4 für Ihr Layout. Es ist einfach, Responsive Layouts von BS zu verwenden. Hier ist der Code, können Sie versuchen:

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <!-- Required meta tags --> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
 

 
    <!-- Bootstrap CSS --> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container-fluid"> 
 
     <h1>Sample testing</h1> 
 
     <div class="row"> 
 
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
       <div class="embed-responsive embed-responsive-16by9"> 
 
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe> 
 
       </div> 
 
      </div> 
 
      <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
 
       <div class="container"> 
 
        <p>Your chat component will come here.</p> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>