0
右上のメニューボタンを押すと、何かが左から右のフルスクリーン（フルの高さと幅）にスライドし、それ以外は消えます。 ここで問題になるのは、スクロールしてメニューボタンをクリックすると、上に表示されるだけでは表示されません。 プラス、私はかなり理解していないもの、高さと幅があります。私がページ全体をカバーするもの、または私たちに見える高さと幅だけを望むなら、どうやってそのようなことをしますか？このために、私は100％の高さと幅を置いてページの目に見える部分です。ページ全体を何かで覆いたいのであればどうしますか？ 高さと幅の仕組みは？ボタンを押したときに、完全な高さと幅のメニューバーを作成する
$("#side-button").click(function(){
if ($("#side-bar").css("display") == "block"){
$("body").css("overflow","auto");
$("#side-bar").animate({width: "0%"},400,function(){
$("#side-bar").css("display","none");
});
}
else{
$("#side-bar").css("display","block").animate({width: "100%"},400,function(){
$("body").css("overflow","hidden");
});
}
});html{
height:100%;
width:100%;
}
body{
position: relative;
height:100%;
width:100%;
}
#side-bar{
position: absolute;
width:0%;
background: black;
height: 100%;
z-index: 100;
display:none;
}
#side-button{
display:flex;
position:fixed;
right:10px;
top:10px;
z-index: 100;
width:30px;
height:30px;
justify-content: space-around;
flex-direction: column;
}
#side-button div{
width:100%;
height:4px;
background-color: gray;
display:block;
}
#side-button:hover #first{
transform: rotate(1turn);
transition: 1s transform;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap.css"/>
</head>
<body>
<div id="side-bar">
<div class="page-header text-center header1">
<h1>THIS IS A HEADER</h1>
</div>
</div>
<div id="side-button" >
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</div>
<div class="container" style="padding-bottom:20px;">
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
<div class="jumbotron ">
<h1>This is a jumbotron !</h1>
<p>The jumbotron makes a big fat div :p </p>
</div>
</div>
<script src="bootstrap.js"></script>
</body>
</html>
はい！あなたは幅と高さについての部分を説明できますか？何かをフルページの高さの100％にしたい場合は、ページの可視部分の高さの100％にしたい場合、どのようにして幅と高さがCSSで動作するか –