html code
<nav>...</nav>
<div class="bg">
<div class="outer-box">
<div class="inner-box">
<div class="dev-image">
<img
src="img/ronak-dev-ux-ui-design-project-image@3x.webp"
alt="Profile Picture"
/>
</div>
<div class="dev-name">Ronak Radadiya</div>
<div class="dev-profession">Lorem Ipsum</div>
<div class="dev-content">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quasi sed cumque voluptatem repudiandae illo dolor nihil, ducimus eaque voluptatibus ex perspiciatis deleniti corrupti repellendus reiciendis rem expedita laudantium, velit dicta?
</div>
<div class="reach">
<img
src="img/ronak-dev-ux-ui-design-line@3x.webp"
alt="Reach out"
/>
<p>Reach Out to me</p>
<img
src="img/ronak-dev-ux-ui-design-line@3x.webp"
alt="Reach out"
/>
</div>
<div class="social-icons">
<a
href="#"
target="_blank"
>
<img
src="img/ronak-whatsapp-product-ui-ux-design@3x.webp"
alt="whatsapp"
/>
</a>
<a href="https://github.com/ronakradadiya" target="_blank">
<img
src="img/ronak-github-product-ui-ux-design@3x.webp"
alt="github"
/>
</a>
<a
href="https://www.linkedin.com/in/ronak-radadiya-506861167"
target="_blank"
>
<img
src="img/ronak-linkedin-product-ui-ux-design@3x.webp"
alt="Linkedin"
/>
</a>
<a href="https://twitter.com/ronakradadiya98" target="_blank">
<img
src="img/ronak-twitter-product-ui-ux-design@3x.webp"
alt="twitter"
/>
</a>
</div>
</div>
</div>
</div>
<footer>... </footer>
云服务器代码
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
margin: 0;
padding: 0;
}
/* Navbar */
.actives {
color: #ff4060 !important;
}
.active {
color: #ff4060 !important;
}
nav.bg-dark {
background-color: var(--main-bg1-color) !important;
height: 53px !important;
}
nav.shadow {
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
-moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
}
nav .nav-color {
color: var(--main-text-color) !important;
}
nav .navbar-nav .nav-link {
font-family: ProximaNovaA;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.35px;
margin: 0rem 0.6rem;
}
/* Introduction */
.bg {
height: calc(100% - 117px);
width: 100%;
background-color: var(--main-bg2-color);
display: flex;
justify-content: center;
align-items: center;
}
.fixedHeight {
height: 507px;
}
.autoHeightBody {
height: auto;
}
.autoHeightBg {
height: auto;
}
.outer-box {
max-width: 700px;
width: 100%;
border-radius: 4px;
background-color: var(--main-bg1-color);
padding: 12px;
margin: 20px;
}
.inner-box {
width: 100%;
border-radius: 4px;
}
.dev-image {
max-width: 96px;
max-height: 96px;
margin-top: 26px;
margin-bottom: 12px;
margin-left: auto;
margin-right: auto;
}
.dev-image img {
width: 100%;
height: 100%;
}
.dev-name {
font-family: Roboto;
font-size: 30px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 1.24px;
color: #ffffff;
text-align: center;
margin-bottom: 12px;
}
.dev-profession {
font-family: Roboto;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.58px;
color: #ff4060;
text-align: center;
margin-bottom: 24px;
}
.dev-content {
max-width: 545px;
width: 100%;
font-family: Roboto;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: 0.4px;
text-align: center;
color: #aeaeae;
margin-left: auto;
margin-right: auto;
margin-bottom: 32px;
}
.reach {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 24px;
}
.reach img {
max-width: 150px;
width: 100%;
height: 1px;
}
.reach img:nth-child(1) {
margin-right: 15px;
}
.reach p {
font-family: Roboto;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.35px;
text-align: center;
color: #ffffff;
margin-bottom: 0;
margin-right: 15px;
}
.social-icons {
display: flex;
justify-content: center;
margin-bottom: 41px;
}
.social-icons img {
width: 24px;
height: 24px;
}
.social-icons img:nth-child(1),
.social-icons img:nth-child(2),
.social-icons img:nth-child(3) {
margin-right: 32px;
}
.footer {
background-color: #111111;
height: 64px;
display: flex;
align-items: center;
}
.footer-adjust {
display: flex;
justify-content: space-between;
}
.footer-left-content p {
font-family: Roboto;
font-size: 14px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.35px;
color: #aeaeae;
margin-bottom: 0;
padding-top: 4px;
}
.footer-right-content {
display: flex;
}
.footer-right-content div a {
font-family: Roboto;
font-size: 14px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.35px;
color: #aeaeae;
text-decoration: none;
}
.footer-right-content div:nth-child(1) a,
.footer-right-content div:nth-child(2) a {
margin-right: 40px;
}
@media (min-width: 576px) and (max-width: 767px) {
.bg {
height: calc(100% - 161px);
}
.outer-box {
min-height: 507px;
}
.footer {
height: 108px !important;
padding-top: 24px;
padding-bottom: 24px;
}
.footer,
.footer-adjust {
display: block !important;
}
.footer-left-content p {
text-align: center;
margin-bottom: 16px;
}
.footer-right-content {
justify-content: center;
}
}
@media (min-width: 0px) and (max-width: 575px) {
.bg {
height: calc(100% - 161px);
}
.outer-box {
min-height: 507px;
}
.reach img {
width: 50px;
height: 1px;
}
.footer {
height: 108px !important;
padding-top: 24px;
padding-bottom: 24px;
}
.footer-right-content div:nth-child(1) a,
.footer-right-content div:nth-child(2) a {
margin-right: 30px;
}
.footer,
.footer-adjust {
display: block !important;
}
.footer-left-content p {
text-align: center;
margin-bottom: 16px;
}
.footer-right-content {
justify-content: center;
}
}
JS代码
let styleBgBox = parseInt($(".bg").css("height"));
let styleOuterBox = parseInt($(".outer-box").css("height"));
if ($(window).outerWidth() >= 768) {
$(".outer-box").addClass("fixedHeight");
} else {
$(".outer-box").removeClass("fixedHeight");
}
if (styleBgBox < 547 && styleOuterBox == 507) {
$("body").addClass("autoHeightBody");
$(".bg").addClass("autoHeightBg");
} else if (styleBgBox > 547 && styleOuterBox > 507) {
$("body").addClass("autoHeightBody");
$(".bg").addClass("autoHeightBg");
} else if (styleBgBox < 547 && styleOuterBox > 507) {
$("body").addClass("autoHeightBody");
$(".bg").addClass("autoHeightBg");
} else {
$("body").removeClass("autoHeightBody");
$(".bg").removeClass("autoHeightBg");
}
$(window).resize(function () {
if ($(window).outerWidth() >= 768) {
$(".outer-box").addClass("fixedHeight");
} else {
$(".outer-box").removeClass("fixedHeight");
}
styleBgBox = parseInt($(".bg").css("height"));
styleOuterBox = parseInt($(".outer-box").css("height"));
if (styleBgBox < 547 && styleOuterBox == 507) {
$("body").addClass("autoHeightBody");
$(".bg").addClass("autoHeightBg");
} else if (styleBgBox > 547 && styleOuterBox > 507) {
$("body").addClass("autoHeightBody");
$(".bg").addClass("autoHeightBg");
} else if (styleBgBox < 547 && styleOuterBox > 507) {
$("body").addClass("autoHeightBody");
$(".bg").addClass("autoHeightBg");
} else {
$("body").removeClass("autoHeightBody");
$(".bg").removeClass("autoHeightBg");
}
});
当我使用 calc(( 计算的现有高度替换为 height：auto 时，在移动设备中查看时底部会出现一个空白区域。代码中是否有任何替代高度：自动的替代方法。我尝试使用vh而不是%使用溢出属性，但它不起作用？
这两个是问题所在
html {height: 100%;}
body {height: 100%;}
HTML 和正文的 100% 高度是视口的高度，而不是整个文档。内部元素使公共高度比视口更多，它可以使您正在拍摄的白痉挛。
更新
完全删除您的自定义script。我只会写下 CSS 类，我进行了更改。更换，它将起作用。
html {
height: 100%;
margin: 0;
padding: 0;
}
body {
position: relative;
min-height: 100%;
margin: 0;
padding: 0;
background-color: #111111;
}
nav.bg-dark {
background-color: var(--main-bg1-color) !important;
height: 53px !important;
position: absolute;
left: 0;
right: 0;
top: 0;
z-index: 2;
}
.bg {
min-height: 100vh;
padding: 53px 0 60px 0;
box-sizing: border-box;
width: 100%;
background-color: var(--main-bg2-color);
display: flex;
justify-content: center;
align-items: center;
z-index: 1;
position: relative;
}
.footer {
background-color: #111111;
height: 64px;
display: flex;
align-items: center;
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 2;
}
@media (min-width: 576px) and (max-width: 767px) {
.bg {
padding: 53px 0 156px 0;
}
}
@media (min-width: 0px) and (max-width: 575px) {
.bg {
padding: 53px 0 156px 0;
}
}
从 css 部分的每个.bg中删除height属性(我总共数了 3 个(。 还要从 css 中的两个.outer-box中删除min-height: 507px;。
将html和bodycss 更改为如下所示。这将确保您的元素包含在您的 body 标签和 body by html 标签中：
html,body{
margin: 0;
padding: 0;
}
我用我提到的修改尝试了你的代码，有没有你的JS，它似乎没有区别。如果您使用对 css 的修改并希望删除页面底部的空格，似乎真的不需要您的 JS。请参阅 JSFiddle https://jsfiddle.net/s97htk0p/
您修改后的 CSS 代码：
html,body{
margin: 0;
padding: 0;
}
/* Navbar */
.actives {
color: #ff4060 !important;
}
.active {
color: #ff4060 !important;
}
nav.bg-dark {
background-color: var(--main-bg1-color) !important;
height: 53px !important;
}
nav.shadow {
-webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
-moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5) !important;
}
nav .nav-color {
color: var(--main-text-color) !important;
}
nav .navbar-nav .nav-link {
font-family: ProximaNovaA;
font-size: 14px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.35px;
margin: 0rem 0.6rem;
}
/* Introduction */
.bg {
width: 100%;
background-color: var(--main-bg2-color);
display: flex;
justify-content: center;
align-items: center;
}
.fixedHeight {
height: 507px;
}
.autoHeightBody {
height: auto;
}
.autoHeightBg {
height: auto;
}
.outer-box {
max-width: 700px;
width: 100%;
border-radius: 4px;
background-color: var(--main-bg1-color);
padding: 12px;
margin: 20px;
}
.inner-box {
width: 100%;
border-radius: 4px;
}
.dev-image {
max-width: 96px;
max-height: 96px;
margin-top: 26px;
margin-bottom: 12px;
margin-left: auto;
margin-right: auto;
}
.dev-image img {
width: 100%;
height: 100%;
}
.dev-name {
font-family: Roboto;
font-size: 30px;
font-weight: bold;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 1.24px;
color: #ffffff;
text-align: center;
margin-bottom: 12px;
}
.dev-profession {
font-family: Roboto;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.58px;
color: #ff4060;
text-align: center;
margin-bottom: 24px;
}
.dev-content {
max-width: 545px;
width: 100%;
font-family: Roboto;
font-size: 16px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: 1.5;
letter-spacing: 0.4px;
text-align: center;
color: #aeaeae;
margin-left: auto;
margin-right: auto;
margin-bottom: 32px;
}
.reach {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 24px;
}
.reach img {
max-width: 150px;
width: 100%;
height: 1px;
}
.reach img:nth-child(1) {
margin-right: 15px;
}
.reach p {
font-family: Roboto;
font-size: 14px;
font-weight: normal;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.35px;
text-align: center;
color: #ffffff;
margin-bottom: 0;
margin-right: 15px;
}
.social-icons {
display: flex;
justify-content: center;
margin-bottom: 41px;
}
.social-icons img {
width: 24px;
height: 24px;
}
.social-icons img:nth-child(1),
.social-icons img:nth-child(2),
.social-icons img:nth-child(3) {
margin-right: 32px;
}
.footer {
background-color: #111111;
height: 64px;
display: flex;
align-items: center;
}
.footer-adjust {
display: flex;
justify-content: space-between;
}
.footer-left-content p {
font-family: Roboto;
font-size: 14px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.35px;
color: #aeaeae;
margin-bottom: 0;
padding-top: 4px;
}
.footer-right-content {
display: flex;
}
.footer-right-content div a {
font-family: Roboto;
font-size: 14px;
font-weight: 500;
font-stretch: normal;
font-style: normal;
line-height: normal;
letter-spacing: 0.35px;
color: #aeaeae;
text-decoration: none;
}
.footer-right-content div:nth-child(1) a,
.footer-right-content div:nth-child(2) a {
margin-right: 40px;
}
@media (min-width: 576px) and (max-width: 767px) {
.footer {
height: 108px !important;
padding-top: 24px;
padding-bottom: 24px;
}
.footer,
.footer-adjust {
display: block !important;
}
.footer-left-content p {
text-align: center;
margin-bottom: 16px;
}
.footer-right-content {
justify-content: center;
}
}
@media (min-width: 0px) and (max-width: 575px) {
.reach img {
width: 50px;
height: 1px;
}
.footer {
height: 108px !important;
padding-top: 24px;
padding-bottom: 24px;
}
.footer-right-content div:nth-child(1) a,
.footer-right-content div:nth-child(2) a {
margin-right: 30px;
}
.footer,
.footer-adjust {
display: block !important;
}
.footer-left-content p {
text-align: center;
margin-bottom: 16px;
}
.footer-right-content {
justify-content: center;
}
}