gpt4 book ai didi

javascript - 让 div 填满屏幕

转载 作者:太空宇宙 更新时间:2023-11-04 15:23:01 25 4
gpt4 key购买 nike

我有一件非常简单的事情要做,但它不起作用。我在正文元素中有一个 div,它应该是浏览器屏幕的宽度和高度(减去正文的边距)。但相反,div 只是 1 行的高度(但具有正确的宽度)。

我做错了什么?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }

body { text-align: center; background-color: RGB(255, 255, 255); margin: 20px; height: 100%; width: 100%; }

#outerContainer { background-color: #DCFF9A; height: 100%; width: 100%; }

-->
</style>

<script type="text/javascript">
<!--

-->
</script>

</head>
<body>

<div id="outerContainer"> <!-- Why doesn't this div have the height & width of the whole screen? It's height appears to be one line -->
<p id="testData"> abcd </p>
</div>


</body>
</html>

最佳答案

这里限制你的是 html 元素的高度。 body 元素被设置为 100% 的高度,但由于它的容器 (html) 没有指定高度,所以 body 只会是 html 什么都不是的高度

正如 Ravan (+1) :) 之前建议的那样,您需要将 html 高度设置为 100%。我通常也会在这里添加填充、边距和宽度“重置”

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}

关于javascript - 让 div 填满屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6501441/

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