Ma largeur est plus grande que mon écran, mais le corps et l'html sont mis à 0 de rembourrage et de la marge et de 100% de la largeur
Après le retrait de bootstrap, j'ai rencontré ce problème avec la largeur de ma page étant plus grande que l'écran, et d'avoir une barre de défilement horizontale comme un résultat. Je pensais que le réglage de corps, html 0 de rembourrage et de la marge ainsi que 100% de la largeur serait ok, mais le problème persiste..
SOLUTION EDIT: j'avais des images qui sont plus larges que la vue, j'ai donc besoin de définir box-sizing: border-box
pour contenir les images dans le parent. Ensuite, j'ai hérité de ce pour tous les éléments. Alors maintenant, du haut de mon CSS est:
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
}
* {
box-sizing: inherit;
}
html:
@{
ViewBag.Title = "Home Page";
}
<div class="main">
<div class="content">
<div id="welcome" class="page">
<h1>asasd</h1>
<p>
test3
</p>
</div>
<div id="asdasd" class="page" data-original="/Images/asdh.jpg">
<h1>asdasd</h1>
<p>
test2
</p>
<div class="vfd"></div>
<div class="measurment"></div>
</div>
<div id="test2" class="page" data-original="/Images/test.jpg">
<h1></h1>
<p>test
</p>
</div>
</div>
</div>
CSS:
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.main {
width: 100%;
height: 100%;
}
.content {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0;
height: 300vh;
}
.page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
position: relative;
width: 100%;
text-align: center;
vertical-align: middle;
font-size: 18px;
padding-left: 25%;
padding-right: 25%;
}
InformationsquelleAutor J.Doe | 2017-05-24
Vous devez vous connecter pour publier un commentaire.
Sont vos images ce qui est de faire votre largeur de l'écran de débordement? Vous pouvez toujours utiliser box-sizing pour aider à la compensation des marges et padding: https://css-tricks.com/box-sizing/
Utilisation
box-sizing: border-box;
de sorte que votre rembourrage sont inclus dans la largeur. Sinon, votre véritable largeur est 100% + 25% + 25% = 150%.CSS:
HTML:
box-sizing: border-box
résolu ces deux problèmes, le rembourrage et img, bonne chance =DIl suffit de remplacer cette partie dans votre CSS et le défilement horizontale aura disparu:
Mais je ne comprends pas vraiment ce que vous essayez d'accomplir avec ces codes CSS.