0
私はStackOverflowでこれについて多くのソリューションを探していますが、誰もそれを解決していないので、誰かがこの投稿に直接私を助けてくれることを願っています。ブートストラップ。容器 - 液体オーバーフロー
私はウェブページのための簡単なネーバーバーを作っています。ブラウザウィンドウの幅をいっぱいにしたいので、クラス.container-fluidを渡して、ラップトップを使用した場合、.container流体内の要素は、このようなウィンドウをオーバーフローしかし：これはなぜ
：
それで良く見てはこれです起こっている？ボタンをラップ
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>__codekup__</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous" />
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body>
<div class="header container-fluid">
<div class="row align-items-center justify-content-between">
<div class="col-sm-2 text-center">
<h1>Pliki</h1>
</div>
<div class="col-sm-2">
<div class="row align-items-center">
<div class="col-sm-6 text-center">
Instructions
</div>
<div class="col-sm-6 text-center">
<button type="button" class="btn btn-outline-primary pull-right">
Download Game
</button>
</div>
</div>
</div>
</div>
</div>
<div class="main"></div>
<!-- Bootstrap dependencies and jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"
integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"
integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn"
crossorigin="anonymous"></script>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
SASS
@import url('https://fonts.googleapis.com/css?family=Lato');
$primary-color: rgb(118, 200, 136);
$bg-color: rgb(33, 37, 43);
.header {
background-color: $bg-color;
height: 70px;
color: $primary-color;
.row {
height: 100%;
}
h1 {
font-family: Courier, sans-serif;
}
.btn {
color: $primary-color;
border-color: $primary-color;
font-family: Lato, sans-serif;
&:hover {
color: $bg-color;
background-color: $primary-color;
}
}
}
.main {
background: black;
}
JAVASCRIPT
$(document).ready(function() {
var h = window.innerHeight;
$('.main').css('height', h + 'px');
});
なぜあなたは、デバイスと同じ高さを設定するためにJavaScriptを使用しないで変更のためのペンですか？ CSSでは 'height：100vh;'を使うことができます。 – debute