1

この質問がいくつかのサイトで何度か尋ねられていることを完全に認識しています. 私はHTMLとCSSに比較的慣れていないので、見落としている単純なものかもしれません。

ここに私の問題があります。ヘッダーとコンテナー div、次にフッター div があります。フッター div をウィンドウの下部に固定したままにしたいのですが、ウィンドウのサイズが変更されたときに、コンテナー div と重ならないようにします。

フッター div をブラウザーの下部に固定することはできますが、明らかな絶対位置と下部 0 CSS では問題ありませんが、明らかにコンテナー div とのオーバーラップの問題が発生するため、調査を行い、相対変数を追加しようとしましたbody タグに配置し、フッター div をウィンドウの下部ではなく、コンテナー div の下部に移動します。ここで私の問題のミニシミュレーションを作成しました：

最初に体の相対位置なし:

http://www.klstuff.com/test1

次に、体の相対位置で：

http://www.klstuff.com/test2

基本的に、ボックス 2 をウィンドウの下部に貼り付けたいのですが、ウィンドウのサイズを変更したときにボックス 1 と重ならないようにします。また、min-height および height 100% 属性を body タグと container タグに追加しようとしましたが、まったく何もしていないようです。ここにtest2のコードがあります（相対位置属性を使用すると、少し正しいと思います。）

<?xml version="1.0" encoding ="utf-8"?>
<!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" >
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<head>
<title>HTML/CSS Test Site</title>
<meta name="description" content="HTML/CSS testing page.">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>


<body>


<div id="Box1">
    <p>BOX 1</p>
</div>

<div id="Box2">
    <p>BOX 2</p>
</div>

</body>
</html>

body {
height: 100%;
position: relative;
}

#Box1 {
width: 980px;
background-color: blue;
color: #fff;
margin: auto;
text-align: center;
padding-bottom: 150px;
padding-bottom: 150px;
margin-top: 200px;
}

#Box2 {
width: 100%;
background-color: red;
text-align: center;
padding-bottom: 50px;
padding-bottom: 50px;
position: absolute;
bottom: 0;
left: 0;
}
4

1 に答える 1

0

Wahooはついにこれをやった! 少し時間がかかりました。

まず最初に、両方のボックスを囲む div を作成します。本体の高さを 100% に設定してから、コンテナーの最小高さを 100% に設定します。コンテナーの位置を絶対に設定し、幅を 100% に設定します。

次に、フッターの高さを設定し、同じ値の margin-bottom をメイン コンテンツ (ボックス 1) に設定します。コードに従って：

HTML:

<div id="container">
   <div id="Box1">
       <p>BOX 1</p>
   </div>

   <div id="Box2">
       <p>BOX 2</p>
   </div>
</div>

CSS:

body {
  height: 100%;
  padding: 0px;
  margin: 0px;
}

#Box1 {
  width: 980px;
  background-color: blue;
  color: #fff;
  margin: auto;
  text-align: center;
  height: 150px;
  margin-bottom: 100px;
  margin-top: 200px;
}

#Box2 {
  width: 100%;
  background-color: red;
  text-align: center;
  position: absolute;
  bottom: 0;
  height: 100px;

}

#container {
  width: 100%;
  min-height: 100%;
  position:absolute;
}

お役に立てれば。わたしにはできる。

于 2012-08-02T17:20:17.007 に答える