2

<div>をベースとしたWebデザインを制作しています。ヘッダー用に 1 つの div、コンテンツ用に 1 つの div、フッター用に 1 つの div を作成しました。ソース コードでは、コンテンツ div が最初に来て、表示中はヘッダーがページの上部に表示されるようにしたいと考えています。

CSSでこれをどのように実現できますか?

4

2 に答える 2

2

ヘッダーdivpositionを設定しますabsolute 

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.nin
{
width:940px;
margin:auto;
}
.heade
{
background: none repeat scroll 0 0 #E0E0E0;
border-radius: 5px 5px 5px 5px;
height: 50px;
position: absolute;
top: 0;
width: 940px;
}
.heade h1   {  line-height: 0; }
.fod
{
height:50px;
border-radius:5px;
background:#E0E0E0;
}
.mid
{
margin-top:75px;
height:500px;
    background:#FFFFFF;
border-style:solid;
border-radius:5px;
border-width:2px;
}
.left
{
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 2px;
float: left;
height: 343px;
margin-left: 5px;
margin-top: 5px;
width: 450px;
}
.right {
border-radius: 5px 5px 5px 5px;
border-style: solid;
border-width: 2px;
float: right;
height: 125px;
margin-right: 5px;
margin-top: 220px;
width: 461px;
}
.bottom
{
border-radius: 5px 5px 5px 5px;
border-style: dashed;
border-width: 2px;
height: 135px;
margin-left: 2px;
margin-top: 356px;
width: 925px;
}
</style>
</head >
<body>
<div class="nin">

<div class="mid">
<div class="left"> 
    <ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</div>
<div class="right"> 

<p>It is a coontent box one</p>
</div>
<div class="bottom">
<p>It is a content box two</p>
  <a href="http://www.iprofile.net/">Iprofile</a>
</div>
</div>
<div class="heade">
<h1>
<p style="text-align:center">This is header</p>
</h1>
</div>
<div class="fod">
<div>
<h1>
<p style="text-align:center">This is footer</p>
</h1>
</div>
</div>
</div>
</body>
</html>
于 2012-11-09T08:13:25.353 に答える
2

  1. ヘッダーの高さと同じになるように要素を設定padding-topします。<body>これにより、コンテンツが<div>下に移動し、ヘッダーに十分なスペースが残ります。

    ヘッダーの高さがピクセル単位で固定されていないem場合は、ユーザーがフォント サイズを変更した場合に適応するため、上部パディングに代わりに s を使用できます。ただし、ヘッダーにどのようなコンテンツが含まれ、どのくらいの高さになるかについては、まだ十分に把握しておく必要があります。

  2. ヘッダー<div>をに設定position: absolute; top: 0;して通常のレイアウト フローから削除し、ページの上部に配置します。おそらく値も設定したいでしょうleftが、それは特定のレイアウトに依存します。

于 2012-11-09T08:22:04.997 に答える