1

ブラウザー ウィンドウのサイズが変更されると、上に移動してコンテンツに重なる絶対配置フッターがあります。

ここにHTMLがあります

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

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>FOO</title>
<link href="../stylesheet/typo.css" rel="stylesheet" type="text/css">  
<link href="../stylesheet/main.css" rel="stylesheet" type="text/css">

</head><body>

<div id="header">
<h1><br>Blah Blah</h1>
&nbsp;&nbsp;
<h5 style="overflow:hidden">Foo</h5>
</div>

<div id="container">
<div class="loginbox">
<div class="innerlogin" align="left">
<span wicket:id="topPanel"> 
<h3>Please Login</h3>
<br><br>
<form style="margin:0">
<label for="name">Username</label><br>
<input type="text" name="name" class="styledinput" /><br>
<label for="password">Password</label><br>
<input type="password" class="styledinput" /><br><br>
<input type="submit" value="Login" class="login" />
</form>

 </span></div>
 </div>


<div class="contentbox">
<div class="rightcont">
<div id="content" align="left">LoremIpsum </div>


 <img src="../images/imageright.png" style="margin-left:70px">
 </div>
 </div>
 </div>
 <div id="clearfix"></div>
 <div id="footerhome">1400Labs&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 Legal&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Privacy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 About&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Terms&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Help</div>
 </body>
 </html>

そして、CSS

 body {
margin: 0px;
padding-bottom: 100px;
border-width: 0px;
height: 100%;
background: #e1d8d8;
    }



     #header {
width: 100%;
margin: 0px auto;
padding-left: 12.85%;
background-color: #205081; /*#4f4f4f#205081*/
position: relative;
height: 80px;
    }

    #footerhome {
position: absolute;
bottom: 0;
float: left;
width: 100%;
height: 100px; /* Height of the footer */
background: #fff;
font-size: 10px;
text-align: center;
margin-top: auto;
clear: both;
    }

   /*Heading Spans*/
    h1 {
font-family: Arial;
color: #FFF;
margin: 0;
padding: 0;
    }

    h5 {
font-family: Arial;
color: #FFF;
margin: 0;
padding: 0;
    }

   h3 {
color: #205080;
font-family: Arial;
   }
     /*Menu Table*/
    #menutable {
margin-top: 10px;
border-spacing: 25px;
background: #4f4f4f;
   }
  /*Content Divs*/
 .loginbox {
width: 30.666%;
margin-top: 15%;
float: right;
margin-right: 12.5%;
display: inline;
  }

   .contentbox {
width: 30.666%;
margin-top: 15%;
float: left;
margin-left: 12.5%;
     }

    .rightcont {
position: relative;
width: 30em;
height: 18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -20em border:  2px solid #ccc;
background: transparent padding-bottom:0px;
padding-top: 10px;
    }

   .innerlogin {
position: fixed width:30em;
height: 18em;
margin-top: -9em; /*set to a negative number 1/2 of your height*/
margin-left: -15em border:  2px solid #ccc;
padding-bottom: 0px;
background: transparent;
padding-top: 100px;
padding-left: 100px;
     }
     /*Form Elements*/
    .login {
background: #205080;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
color: #FFF;
font-weight: bold;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px
    rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px
    rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px
    rgba(0, 0, 0, 0.2);
height: 25px;
width: 60px;
"
    }

 label {
font-size: 12px;
font-family: Arial;
color: #205080;
text-align: left;
  }

.styledinput {
border-radius: 4px
}
/*content*/
#content {
color: #205080;
font-size: 14px;
width: 320px;
margin-left: 100px;
}

#container {
width: 1000px;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 20px;
clear: both;
margin-bottom: 100px;
}

#clearfix {
clear: both;
}

@media screen and (max-width: 1000px) {
.contentbox {
    width: 30.666%;
    margin-top: 15%;
    float: left;
    margin-left: 0%;
}
.loginbox {
    width: 30.666%;
    margin-top: 15%;
    float: right;
    margin-right: 12.5%;
    margin-left: 0;
    display: block;
}
#container {
    width: 1000px;
    margin: 0 auto;
    padding-top: 30px;
    padding-bottom: 20px;
    clear: both;
    margin-bottom: 100px;
    margin-bottom: 100px;
}
}

フッター提供: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

jsFiddle: http://jsfiddle.net/anirudhvarma/JLZzs/ 明確にしていただければ幸いです

4

4 に答える 4

1

HTMLタグを適切にフォーマットしていません。

divをcontainerdivの親にしfooterhome、それに応じてCSSを調整します。

このように:デモ

于 2013-01-21T10:03:11.890 に答える
0

あなたはそれを支えたいかもしれません

html {
  height: 100%;
}

それが役立つかどうかを確認します。

また、フッターに対応するために、下部にパディングがあるラッパーdivを導入します

<div id="wrapper">

<div id="header">
<h1><br>Blah Blah</h1>
&nbsp;&nbsp;
<h5 style="overflow:hidden">Foo</h5>
</div>

<div id="container">
<div class="loginbox">
<div class="innerlogin" align="left">
<span wicket:id="topPanel"> 
<h3>Please Login</h3>
<br><br>
<form style="margin:0">
<label for="name">Username</label><br>
<input type="text" name="name" class="styledinput" /><br>
<label for="password">Password</label><br>
<input type="password" class="styledinput" /><br><br>
<input type="submit" value="Login" class="login" />
</form>

 </span></div>
 </div>


<div class="contentbox">
<div class="rightcont">
<div id="content" align="left">LoremIpsum </div>


 <img src="../images/imageright.png" style="margin-left:70px">
 </div>
 </div>
 </div>
 <div id="clearfix"></div>
 <div id="footerhome">1400Labs&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 Legal&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Privacy&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 About&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Terms&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Help</div>

</div> /* end wrapper */

css:

#wrapper {
  position:absolute;
  top:0px;
  left:0px;
  padding-bottom:100px;
}
于 2013-01-21T07:41:34.603 に答える
0

#footerhome から削除するposition: absolute; か、に変更できますposition: relative;

于 2013-01-21T07:45:57.260 に答える
0

この方法で試してみてください

<body>

<div id="wrapper">
    <div id="header">
        <h1> Header</h1>
        <div id="content">
            <p> text for content </p>
        </div>
    </div>
        <div id="footer">
            <p> text for footer </p>
        </div>
</div>
</body>

CSS


body, html {
    height: 100%;
    }

p {
    -moz-column-count:3;
    -moz-column-width: 200px;
}

#wrapper {
    margin:0 auto;
    width: 75%;
    height: 75%;
    background: yellow;
    }


#header {
    min-height: 100%;
    margin-bottom: -200px;
    }


#footer {
    background: red;
    height: 200px;
    }
于 2013-01-22T05:31:09.577 に答える