J'ai essayé d'ajouter un en-tête sur mon site Web, mais je ne peux pas obtenir le conteneur d'adapter la largeur complète de l'écran, malgré la largeur définie sur HTML: P> 100% code> ou ou auto code>. Il a toujours environ une marge d'environ 5 pex sur la gauche et la droite, même avec la marge et le rembourrage à la fois réglé sur 0. body div#header{
width: 100%;
margin: 0;
padding: 0;
background-color: #c0c0c0;
}
7 Réponses :
Ajouter
body, html{
margin:0;
padding:0;
}
@SideTracking Check Out CSSRESET.COM pour certains feuilles de style General CSS Réinitialiser. L'utilisation d'une réinitialisation CSS équivaut à l'apparence de votre site sur la plupart des navigateurs!
Oui, d'accord. L'utilisation d'un fichier de réinitialisation CSS est définitivement une bonne idée à long terme.
Merci à tous répondit, je l'ai eu maintenant. Et merci pour les indicateurs, aide beaucoup pour un débutant!
Assurez-vous d'accepter cette réponse si cela a permis de résoudre votre problème :)
Mettez une marge zéro sur vos balises corporelles / HTML dans votre CSS. Voir si cela aide.
Vous devrez ajouter une réinitialisation telle que:
html, body, div {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
C'est parce qu'il est en train d'être rembourré par son parent. L'avez-vous contenue dans un autre div? Ou peut-être avez-vous une propriété de rembourrage / marge sur le corps du document? Veuillez fournir votre CSS complet. Si vous ne le faites pas, c'est parce que le navigateur l'ajoutez pour vous, alors l'expliciteur l'a défini à l'aide de:
body {
margin: 0;
padding: 0;
}
html, body, div {
margin:0;
padding:0;
border:0;
outline:0;
background:transparent;
}
Essayez ceci, j'espère que cela aide:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Header & Footer</title>
<style type="text/css">
/* Global */
* {
margin: 0;
}
html, body {
height: 99%;
}
/* Header */
.container{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
width:100%;
font-family:Segoe UI;
color:#fff;
}
.container-header{
padding-top:5px;
padding-left:20px;
}
/* Footer */
.footer{
background-color:#333030;
width:100%;
font-family:Segoe UI;
color:#fff;
}
.footer img{
padding-left:15px;
}
/* Page Content */
.content{
height: auto !important;
}
.container p{
font-size:12pt;
font-weight:bold;
}
</style>
</head>
<body>
<!-- Header Div -->
<div class="container">
<table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
<tr></tr>
<tr>
<td></td>
<td>
<div style="padding-left:100px;font-size:36px;">Header</div>
</td>
</tr>
<tr></tr>
</table>
<!-- Page Content Div -->
<div class="content">
Blah Blah
</div>
</div>
<!-- Footer Div -->
<div class="footer">
<table width="100%" style="background-color:#333030;color:#FFFFFF;padding:10px">
<tr></tr>
<tr>
<td></td>
<td>
<div style="padding-left:100px;font-size:36px;">Footer</div>
</td>
</tr>
<tr></tr>
</table>
</div>
</body>
</html>
Essayez le code suivant:
<!DOCTYPE html>
<html>
<head>
<style>
body, html{
margin:0;
}
</style>
</head>
Pour référence, n'est pas une étiquette HTML valide
duplicaté possible de 100% div la largeur n'est pas vraiment 100% (Bienvenue Pour empiler Overflow ... Assurez-vous de rechercher avant de demander!)
Avez-vous trouvé une réponse pour cela, essayé avec le mien ??