html本文は画面のフルサイズではありません

サイドバーメニューのサイドバーアイコンをクリックすると、html本文は画面のフルサイズではありません

$body { 
    background:url('https://lostandtaken.com/wpcontent/uploads/2010/04/141-1560x1170.jpg'); 
}

を使用して設定しても問題ありません。しかし、サイドバーメニューがポップアップするとすぐに消えます。私はサイドバーとbodyタグの関係を見てみましたが、体の高さは画面のサイズよりも小さく、要素の80％があふれていることに気付きました。私はボディの高さを100％に設定しようとしましたが、動作しませんでした。何らかの理由でクロムがオーバーフローするように手動で設定しても見えなくても、プッシュ可能なクラスが作成されます。私は、ブラウザに応じて身体の高さを示すためのスクリーンショットを含んでいます：フルハイトの15％または20％のようです。ここでは、ここでは私のコードの重要な部分であるサイドバーでHERE

YOUはCODEご覧になりたい方JSFIDDLEは次のとおりです。https://jsfiddle.net/bmb45L3p/

HTMLコード

<!--=================================================================================================== --> 
    <body> 
    <div class="ui borderless inverted fixed menu trial " style=" z-index: 10; font-family: 'IM Fell Double Pica', serif; font-size: 16px;"> 
    <a class="item icon "> <i class=" wide sidebar big icon" id="mysidebar"></i></a> 
    <a class=" item" style="font-family: 'IM Fell Double Pica', serif; font-size: 20px; font-weight: bold;"> MENU </a> 
    <div class= " right menu"> 
    <a class="item" id="logospot"></a> 
    </div> 
    </div> 

<div class ="ui sidebar compact inverted labeled icon vertical menu" id="theirsidebar" style="z-index: 99;">  
     <a class ="active item"> 
      <i class="home icon"></i>Home</a> 
     <a class ="item"> 
      <i class="info icon"></i>About SLIDE</a> 
     <a class ="item"> 
      <i class="user circle outline icon"></i>Meet the Staff</a> 
     <a class ="item"> 
     <i class="users icon"></i>Meet SLIDERS</a> 
     <a class ="item"> 
     <i class="block layout icon"></i>Committees</a> 
     <a class ="item"> 
      <i class="announcement icon"></i>Events</a> 
     <a class ="item"> 
      <i class="image icon" ></i>Pictures</a> 
     <a class ="item"> 
     <i class="write icon"></i>Apply</a> 
     <a class ="item"> 
     <i class="mail outline icon" ></i>Contact us</a> 
     <a class = "item"> 
     <i class="user icon"></i>Member Login 
    </a> 
    <a class = "item"> 
     <i class="user circle icon"></i>Staff Login 
    </a> 
</div> 

<div class="ui pusher"> 
<!--+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --> 

<div class="ui container" style="display: block ; padding-top: 120px;"> 
<h3 style= "font-family: 'IM Fell Double Pica', serif; font-size: 60px;" class = "ui header center aligned">MEET OUR '17-'18 STAFF</h3>

を

CSS

出典

2017-12-31 Pape Traore

にCSSを追加することができますあなたはスクリーンショットを追加します – aje

身体から画像CSSを削除し、bg_img

<body> <div id="bg_img">    </div> </body>

と呼ばイドを追加し、この

を試してみてくださいID

html,body{margin:0;padding:0;height:100%;} 
#bg_img{ 
    background:url('http://www.theriversouth.org/wp-content/uploads/2016/01/Light-Grey-Background-Tumblr-8.jpg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
    width: 100%; 
    height: auto; 
    background-position: center; 
    min-height:100%; 
}

出典

2017-12-31 06:30:12

固定してくれてありがとうございましたが、サイドバーのトグル方法に問題があります。私はそれをクリックするとサイドバーが現れ、一番上のバーは右に移動しますが、もう一度クリックすると上のバーが左に移動し、サイドバーは静止しています。私はそれが実際に正しく動作するように働くために何回もクリックする必要があります –

html本文は画面のフルサイズではありません

答えて

関連する問題