gpt4 book ai didi

html - 100% 高度和奇怪的问题

转载 作者:行者123 更新时间:2023-11-28 13:16:31 26 4
gpt4 key购买 nike

所以我查看了以下过去的问题,但我仍然无法弄清楚为什么会这样:

XHTML HTML element with 100% height causing scrollbars

Body height 100% displaying vertical scrollbar

这是我的 jsfiddle:http://jsfiddle.net/G4kgW/5/

CSS

body {
background-color:#ccc;
height:100%;
overflow:hidden;
}

div {
display:block;
position:relative;
}

html {
background-color:#f00;
height:100%;
overflow:hidden;
}

.uslt-wrapper {
height:100%;
overflow:auto;
width:100%;
}
.uslt-content {
background-color:#00f;
height:100%;
margin:0px auto;
width:90%;
}

.uslt-footer, .uslt-header {
background-color:#24427c;
height:68px;
width:100%;
}

.uslt-logo {
color:#fff;
height:68px;
margin:0px auto;
width:230px;
}

HTML

<div class="uslt-wrapper">
<div class="uslt-header">
<div class="uslt-logo">
<h1>Logo</h1>
</div>
</div>
<div class="uslt-content">
</div>
<div class="uslt-footer">
<div class="uslt-logo">
<h2>Logo</h2>
</div>
</div>
</div>

我正在尝试实现(没有 HTML5/CSS3)如果窗口对于页面来说太大,中间区域将扩展以占用额外空间的地方。

但我遇到了一个问题,无论窗口大小如何,我都会看到滚动条,即使当前没有内容,只有 CSS 样式。 (请注意 jsfiddle 链接有 CSS 重置)

最佳答案

你的类(class),uslt-content , 继承 <HTML> 的 100% 高度元素,它具有视口(viewport)高度。所以.uslt-wrapper溢出。

一种可能的解决方案——让页眉和页脚重叠在内容之上(jsFiddle Demo):

.uslt-content {
background-color:#00f;
height:100%;
margin: -68px auto;
width:90%;
}

.uslt-footer, .uslt-header {
background-color:#24427c;
height:68px;
width:100%;
position: relative;
z-index: 1;
}

关于html - 100% 高度和奇怪的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17372711/

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