我正在为我们的高中团队工作,并且还没有完成任何设计,只是试图使各个部分工作。
我现在所困扰的是使用JavaScript让我的内容div填充其余页面垂直高度。
这是我的HTML,也许我刚刚完成它,但似乎所有内容都标记正确并且应该有效。
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>NCHS MUN</TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
<script>
function resize()
{
document.getElementById("content").style.height = (document.body.clientHeight - document.getElementById("top"));
}
</script>
</HEAD>
<BODY onLoad="resize()">
<div id="top">
<header><a href="index.html" class="title">NCHS Model UN</a></header>
<ul class="nav">
<li><a href="#">Updates</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">The Team</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
</div>
</BODY>
</HTML>
这是我的CSS,同样,一切都应该有用。
HTML, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: arial;
background-color: #D0D0D0;
}
header {
display: block;
background-color: #0000FF;
color: #FFFFFF;
width: 100%;
}
a.title {
display: block;
width: 100%;
text-align: center;
color: #FFFFFF;
text-decoration: none;
text-align: center;
padding-top: 2px;
font-size: 72px;
}
ul.nav {
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
ul.nav li {
display: inline;
float: left;
background-color: #FFA500;
width: 20%;
border: 1px solid black;
box-sizing: border-box;
}
ul.nav li a {
display: block;
padding: 5px;
color: #000000;
text-decoration: none;
text-align: center;
}
ul.nav li a:hover {
font-weight: bold;
}
#content {
display: block;
overflow: auto;
background-color: #FFFFFF;
width: 960px;
margin: 0 auto;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid black;
box-sizing: border-box;
}
但是,当页面加载时,只会显示“content”div的边框。为什么不扩展到页面的其余部分?感谢。
答案 0 :(得分:0)
就个人而言,我不会使用JavaScript来操纵这样的风格。
然而,您的脚本存在的问题是您已经- document.getElementById("top")
。
您尚未指定它是需要扣除的#top
元素的高度。