gpt4 book ai didi

html 正文不是屏幕的全尺寸

转载 作者:行者123 更新时间:2023-11-28 02:24:09 25 4
gpt4 key购买 nike

我正在使用语义 ui 作为我的框架制作一个网站,一切看起来都很好,除了当我单击侧边栏图标弹出侧边栏菜单时,背景图像消失了,我使用

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

而且效果很好。但是一旦弹出侧边栏菜单,它就会消失。我试着查看侧边栏和 body 标签之间的关系,但我意识到 body 高度远小于屏幕尺寸,这意味着 80% 的元素都溢出了。我尝试将 body 高度设置为 100%,但这没有用,而且出于某种原因,chrome 将溢出设置为可见,即使我手动将其设置为隐藏只是为了查看,它还创建了一个可推送的类。我附上了一张屏幕截图,根据浏览器显示 body 的高度:大约是全高的 15% 或 20%。 enter image description here 这是侧边栏 enter image description here这是我的代码的重要部分

如果您想查看代码,这里有一个 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

的 Id
<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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com