html 본문이 화면의 전체 크기가 아닙니다.

사이드 프레임 메뉴의 사이드 바 아이콘을 클릭하면 배경 이미지가 사라져 버리는 것을 제외하고는 모든 프레임 워크가 의미있는 UI를 사용하여 웹 사이트를 만들고 있습니다.html 본문이 화면의 전체 크기가 아닙니다.

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

을 사용하여 설정하면 정상적으로 작동합니다. 사이드 바 메뉴가 나타나 자 마자 사라집니다. 사이드 바와 바디 태그 사이의 관계를 살펴 보았지만 신체 높이가 화면의 크기보다 작아서 요소의 80 %가 범람했다는 것을 알게되었습니다. 나는 본체 높이를 100 %로 설정하려고 시도했으나 작동하지 않았고 어떤 이유로 든 크롬을 수동으로 숨김 상태로 설정해도 볼 수 있도록 오버플로를 설정하고 밀어 넣을 수있는 클래스도 만듭니다. 나는 전체 높이의 15 % 또는 20 %와 같은 브라우저에 따라 신체의 높이를 보여주는 스크린 샷을 포함합니다. 와 여기 여기 내 코드의 중요한 부분 사이드 바 여기

귀하가 코드보고 싶은 경우 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

수 스크린 샷을 추가하십시오. – aje

ID로 CSS를 추가 bg_img

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

로 불리는 ID를 몸에서 이미지 CSS를 제거이

을 시도하고 추가

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 본문이 화면의 전체 크기가 아닙니다.

답변

관련 문제