Bootstrap-Spalten können nicht in voller Höhe erstellt werden

Ich kann meine Spalten nicht auf volle Höhe bringen. Sie sind beide etwas mehr als die Gesamthöhe und es entsteht eine vertikale Bildlaufleiste. Ich folge dieser SO thread Antwort.Bootstrap-Spalten können nicht in voller Höhe erstellt werden

Der Code unten funktioniert nicht richtig, wenn Sie es ausführen, aber dieses bootply zeigt mein Problem korrekt an. Die zwei Spalten laufen von der Seite unten ab.

Hier ist mein Code und meine bootply

Weil ich nicht, die mit Bootstrap, HTML und CSS erfahren ob es einen besseren Weg, dies zu tun, lass es mich wissen? Vielen Dank!

Mein Code-Schnipsel:

html, body, .container-fluid { 
 
      height: 100%; 
 
     } 
 

 
     .container-fluid { 
 
      display: table; 
 
      width: 100%; 
 
      margin-top: -50px; 
 
      padding: 50px 0 0 0; 
 
      box-sizing: border-box; 
 
     } 
 

 
     .row { 
 
      height: 100%; 
 
      display: table-row; 
 
     } 
 

 
     .col-sm-5 { 
 
      background: pink; 
 
      border: 1px solid purple; 
 
     } 
 

 
     .col-sm-7 { 
 
      background: yellow; 
 
     } 
 

 
     .row .no-float { 
 
      display: table-cell; 
 
      float: none; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    
 
</head> 
 
<body> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <form class="navbar-form navbar-left"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 
    
 
<div class="container-fluid wrapper"> 
 
    <div class="row"> 
 
     <div class="col-sm-5 no-float">map 
 
     </div> 
 
     <div class="col-sm-7 no-float">events 
 
     </div> 
 
    </div> 
 
</div> 
 
    
 
</body> 
 
</html>

Quelle

2016-12-24 user1186050

Mit CSS calc() den Trick. Dies wird Ihnen helfen, die vertikale Bildlaufleiste zu beseitigen. Wie:

html,body,.container { 
    height: calc(100% - 18px); 
}

Entfernen Sie auch die margin-top: -50px vom .container. Entfernen Sie stattdessen die von nav.navbar.

Werfen Sie einen Blick auf das Snippet unten (Verwendung Vollbild-Vorschau):

html,body,.container { 
 
    height: calc(100% - 18px); 
 
} 
 
nav.navbar { 
 
    margin: 0; 
 
} 
 
.container { 
 
    display: table; 
 
    width: 100% !important; 
 
    padding: 0 !important; /*set left/right padding according to needs*/ 
 
    box-sizing: border-box; 
 
} 
 

 
.row { 
 
    height: 100%; 
 
    display: table-row; 
 
} 
 

 
.col-md-3 { 
 
    background: pink; 
 
} 
 
.col-md-9 { 
 
    background: yellow; \t 
 
} 
 

 
.row .no-float { 
 
    display: table-cell; 
 
    float: none; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
    <!-- Brand and toggle get grouped for better mobile display --> 
 
    <div class="navbar-header"> 
 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand" href="#">Brand</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">One more separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
     <form class="navbar-form navbar-left"> 
 
     <div class="form-group"> 
 
      <input type="text" class="form-control" placeholder="Search"> 
 
     </div> 
 
     <button type="submit" class="btn btn-default">Submit</button> 
 
     </form> 
 
     <ul class="nav navbar-nav navbar-right"> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"> 
 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> 
 
      <ul class="dropdown-menu"> 
 
      <li><a href="#">Action</a></li> 
 
      <li><a href="#">Another action</a></li> 
 
      <li><a href="#">Something else here</a></li> 
 
      <li role="separator" class="divider"></li> 
 
      <li><a href="#">Separated link</a></li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </div><!-- /.navbar-collapse --> 
 
    </div><!-- /.container-fluid --> 
 
</nav> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-3 no-float">Navigation</div> 
 
     <div class="col-md-9 no-float">Content</div> 
 
    </div> 
 
</div>

hoffe, das hilft!

Quelle

2016-12-24 04:24:18

ja danke! Woraus besteht der 17px? – user1186050

@ user1186050 Es ist die zusätzliche Pixelhöhe, die Sie aufgrund der Navigationsleiste usw. erhalten. Refaktoriert den Code ein wenig in 5 Minuten. –

cool danke! sehr geschätzt! – user1186050

Bootstrap-Spalten können nicht in voller Höhe erstellt werden

Antwort

Verwandte Themen