0

私は高校のマンチームのページに取り組んでおり、まだデザインを行っておらず、個々のパーツを機能させようとしています.

私が今立ち往生しているのは、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;
}

ただし、ページが読み込まれると、「コンテンツ」div の境界線のみが表示されます。ページの残りの部分に展開されないのはなぜですか? ありがとう。

4

1 に答える 1

0

個人的には、JavaScriptを使用してこのようなスタイルを操作することはありません。

ただし、スクリプトの問題は、を持っていることです- document.getElementById("top")。

#top差し引く必要があるのは要素の高さであると指定していません。

于 2012-11-18T18:19:20.000 に答える