删除 Bootstrap 后,我遇到了这个问题,我的页面宽度比屏幕大,结果有一个水平滚动条。我认为将 body、html 设置为 0 填充和边距以及 100% 宽度是可以的,但问题仍然存在。
解决方案编辑:我的图像比 View 宽,所以我需要设置 box-sizing: border-box
以包含父图像。然后我为所有元素继承了这个。所以现在我的 CSS 的顶部是:
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%;
}
最佳答案
是您的图像导致屏幕宽度溢出吗?您始终可以使用 box-sizing 来帮助清除边距和填充:https://css-tricks.com/box-sizing/
关于html - 我的宽度比我的屏幕大,但 body 和 html 设置为 0 padding 和 margin 以及 100% 宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44146881/