我正在使用语义 ui 作为我的框架制作一个网站，一切看起来都很好，除了当我单击侧边栏图标弹出侧边栏菜单时，背景图像消失了，我使用
$body {
background:url('https://lostandtaken.com/wpcontent/uploads/2010/04/141-1560x1170.jpg');
}
而且效果很好。但是一旦弹出侧边栏菜单，它就会消失。我试着查看侧边栏和 body 标签之间的关系，但我意识到 body 高度远小于屏幕尺寸，这意味着 80% 的元素都溢出了。我尝试将 body 高度设置为 100%，但这没有用，而且出于某种原因，chrome 将溢出设置为可见，即使我手动将其设置为隐藏只是为了查看，它还创建了一个可推送的类。我附上了一张屏幕截图，根据浏览器显示 body 的高度:大约是全高的 15% 或 20%。 
这是侧边栏
这是我的代码的重要部分
如果您想查看代码，这里有一个 JSFIDDLE:https://jsfiddle.net/bmb45L3p/
HTML code
<!--=================================================================================================== -->
<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
最佳答案
试试这个
从 body 中删除图像 CSS 并添加一个名为 bg_img
<body>
<div id="bg_img">
<!--menu code here-->
<!--main content-->
<!--footer-->
</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%;
}
关于html 正文不是屏幕的全尺寸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48040192/