gpt4 book ai didi

html - 元素高度锁定到浏览器高度

转载 作者:太空宇宙 更新时间:2023-11-04 05:20:48 24 4
gpt4 key购买 nike

这一定是一个以前回答过的问题,但我找不到涵盖它的答案。

下面的 html/css 做了一些我觉得很奇怪的事情,它在 FF4/5、Chrome 12 和 Safari 5 中都做了,所以至少这种奇怪在浏览器中是一致的。

有问题的奇怪之处:<​​/p>

  • body 元素,高度为:100%,停在浏览器底部 window 。向下滚动显示灰色下方的白色 <正文>.​​
  • 蓝色的 也停在浏览器窗口的底部。

尽管它们都包含在 DOM 中,但它们都在高度为 100% 的元素中。如果这个问题已经得到回答,我深表歉意,并感谢您指导我对这里发生的事情进行描述性解释。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>simple height test</title>
<style type="text/css">
html, body {
border: 0px;
margin: 0px;
height: 100%;
}
html {
background-color: #FFFFFF;
}
body {
background-color: #999999;
}
#contentBorder {
width: 20px;
height: 100%;
background-color: #666699;
float: left;
}
#contentContainer {
width: 200px;
height: 1000px;
background-color: #333333;
}
</style>
</head>

<body>
<div id="contentBorder"></div>
<div id="contentContainer"></div>
</body>
</html>

最佳答案

bodyhtml 的高度指定为 100% 会将它们设置为浏览器窗口高度的 100%。如果您希望背景填满页面的整个垂直高度,那么如果您从第一个 CSS block 中删除 height: 100% 应该会起作用。

关于html - 元素高度锁定到浏览器高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6621543/

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