Question

我正在使用语义ui作为我的框架创建一个网站，一切看起来都不错，除非我点击边栏菜单弹出的侧边栏图标，背景图像消失，我已经设置

$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

Answer 1

试试这个

从正文中删除图片CSS并添加名为bg_img

的ID

<body>
    <div id="bg_img">

    <!--menu code here-->
    <!--main content-->
    <!--footer-->

    </div>
</body>

将css添加到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%;
}

html主体不是屏幕的完整大小

1 个答案: