0

絶対的なヘッダーdivがあるので、静的にしたいのですが、そうすると、ウィンドウのサイズ変更時に内部のコンテンツの位置が変わり始めます。ウィンドウのサイズ変更時にコンテンツを移動しない静的ヘッダーを実現するには、どのようなトリックがありますか？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
"http://www.w3.org/TR/html4/strict.dtd"> 
<head>
<title>Client  </title>

<style type="text/css">
.heading {position:fixed; visibility:show; width:100%;  left: 0px; top: 0px; z-index:3;
 border-bottom:5px solid #ccc; } 
 header{
 position:absolute;
     width: 100%;
    height: 60px !important;
    z-index:7;
    top: 0px;
}

/*My div position*/
.positioning-container{position:relative; 
width:1000px;  margin:0 auto 0 auto;
 black solid; padding:0px;

   padding:60px 0 30px 0; 
  border-bottom:0px; padding:0px;
 background:#eee;}

.inner-container{position:relative; 
 background:#fff; padding:0px;
   padding:60px 0 30px 0; }
/*My div position*/
</style>
</head>
<body>
<div class="positioning-container">
<div class="inner-container" align = "center">
<header>
<div class= "heading" style="width:100% ; height:50px; background-color:#00A5C6">
<table id ="headertable" align="left"><tr><td>
<a href="index.php"><h2 class= "logo">Client Review</h2><td>&nbsp;</td></a></td><td>
<label>Search</label><input typ= "text"></td>
<td><a href="index.php" class="button middle">search</a></td>
<td><a href="login.php" class="button middle">Login</a></td>
<td><a href="register.php" class="button middle">Add Client</a></td>
<td><a href="logout.php" class="button middle">Logout</a></td>
<td align="left" class="profile"><img src="bhubezi/images/logos/nopic.png" width="50" 

height="40"></td>

</tr>
</table>
</div>
</header>
<div class="content">
content
</div>
</div>
</div>
4

2 に答える 2

1

相対位置と絶対位置に固執します。アイテムを絶対位置に配置すると、最も近い相対位置に対して絶対位置になることに注意してください。 

<div class="relative" style="position: relative">
<div class="absoluteItem" style="position: absolute; bottom: 0;">
this content will sit on the bottom line of it's parent div (relative)
</div>

</div>

このコンテンツは、ブラウザをズームインおよびズームアウトしても固定されたままになります。

于 2013-02-15T15:30:32.973 に答える
1

静的は要素のデフォルトの位置です。コンテナに固定のピクセル幅を割り当てることで、ウィンドウのサイズ変更時に移動しないようにすることができます。流動的であれば、シフトします。固定されている場合は、そうではありません。

于 2013-02-15T15:44:50.540 に答える