Maison > interface Web > tutoriel CSS > css control div corrigé au bas de l'exemple de code du navigateur

css control div corrigé au bas de l'exemple de code du navigateur

高洛峰
Libérer: 2017-03-27 17:23:12
original
1995 Les gens l'ont consulté

div de contrôle CSS corrigé en bas du navigateur

Remarque : cette fonctionnalité n'est utilisée que pour les pages avec une hauteur de page plus petite.

css control div corrigé au bas de lexemple de code du navigateur

Le code est le suivant :

<html>
<head>
<style type="text/css">
body{
  margin:0px;
}
#main{
  width:100%;
  height:50px;
  position:absolute;
  top:100%;
  margin-top:-50px;
  background:#360;
  color:white;
}
</style>
</head>
<body>
<div style="border:1px solid #f00;width:500px;height:1800px"></div>
<div id="main">bottom</div>
</body>
</html>
Copier après la connexion

J'en ai trouvé un meilleur en ligne :

Quand la fenêtre du navigateur se rétrécit à l'infini, déplacer vers la droite Faire glisser la barre de défilement ne crée pas d'espace vide.

css control div corrigé au bas de lexemple de code du navigateur

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>ie6层固定</title>
<style type="text/css">
<!--
.bookbox {
background-color: #09C;
height: 30px;
width: 100%;
position: fixed;
bottom: 0px;
left: auto;
right: auto;
line-height: 30px;
text-align: center;
_POSITION: absolute;/*兼容IE6*/
_TOP: expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight);/*兼容IE6*/
}
.bookbox a{color: #FFF;}
-->
</style>
</head>
<body>
<div style="border:1px solid #f00;width:500px;height:2000px;">这个例子是实现层固定在浏览器窗口的最下面,兼容IE6.<br />
<br />
往下看,看页面的最下面</div>
<div class="bookbox">测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
</body>
</html>
Copier après la connexion

Eh bien, j'ai l'impression que celui ci-dessus n'est pas très bon, j'en ai trouvé un en ligne, il est assez pratique :

css control div corrigé au bas de lexemple de code du navigateur.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body {
    height: 100%;
    overflow-y: auto
}
body, div, p, ul, ol, li, form, input {
    padding: 0; margin: 0;
}
body{
    position:relative;
    background: #fff;
}
#wp {
    border:1px solid #00f;
    height: auto;
    min-height: 100%;
    _height: 100%;
}
#ft {
    border:1px solid #f00;
    margin-top: -157px;
    padding: 50px 0 0;
}
#sc {
    border:1px solid #f00;
    width: 580px;
    margin: 0 auto;
    padding-left: 20px;
    padding-bottom: 157px;
}
#s {
    border:1px solid #f00;
    position: relative;
    height: 33px;
    z-index:9
}
</style>
</head>
<body>
    <div id="wp">
        <div id="sc">
            <div id="s"></div>
        </div>
    </div>
    <div id="ft">
               
    </div>
</body>
</html>
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal