Javascript 高度:自动导致移动设备底部出现空白
html代码Javascript 高度:自动导致移动设备底部出现空白,javascript,html,jquery,css,twitter-bootstrap,Javascript,Html,Jquery,Css,Twitter Bootstrap,html代码 <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
<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>
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");
}
});
let styleBgBox=parseInt($(“.bg”).css(“height”);
让styleOuterBox=parseInt($(“.outerbox”).css(“height”);
if($(窗口).outerWidth()>=768){
$(“.outer box”).addClass(“固定高度”);
}否则{
$(“.outer box”).removeClass(“固定高度”);
}
if(styleBgBox<547&&styleOuterBox==507){
$(“车身”).addClass(“自动高度车身”);
$(“.bg”).addClass(“自动高度bg”);
}else if(styleBgBox>547&&styleOuterBox>507){
$(“车身”).addClass(“自动高度车身”);
$(“.bg”).addClass(“自动高度bg”);
}else if(styleBgBox<547&&styleOuterBox>507){
$(“车身”).addClass(“自动高度车身”);
$(“.bg”).addClass(“自动高度bg”);
}否则{
$(“主体”).removeClass(“自动高度主体”);
$(“.bg”).removeClass(“自动高度bg”);
}
$(窗口)。调整大小(函数(){
if($(窗口).outerWidth()>=768){
$(“.outer box”).addClass(“固定高度”);
}否则{
$(“.outer box”).removeClass(“固定高度”);
}
styleBgBox=parseInt($(“.bg”).css(“高度”);
styleOuterBox=parseInt($(“.outerbox”).css(“height”);
if(styleBgBox<547&&styleOuterBox==507){
$(“车身”).addClass(“自动高度车身”);
$(“.bg”).addClass(“自动高度bg”);
}else if(styleBgBox>547&&styleOuterBox>507){
$(“车身”).addClass(“自动高度车身”);
$(“.bg”).addClass(“自动高度bg”);
}else if(styleBgBox<547&&styleOuterBox>507){
$(“车身”).addClass(“自动高度车身”);
$(“.bg”).addClass(“自动高度bg”);
}否则{
$(“主体”).removeClass(“自动高度主体”);
$(“.bg”).removeClass(“自动高度bg”);
}
});
当我将使用calc()计算的现有高度替换为height:auto时,在移动设备中查看时,底部会出现一个空白。在代码中是否可以使用“高度:自动”选项。我尝试使用vh而不是%来使用overflow属性,但没有成功?这两个都是问题所在
html {height: 100%;}
body {height: 100%;}
html和正文的100%高度是视口的高度,而不是整个文档的高度。内部元素使普通高度高于视口,它可以使您所拍摄的图像更清晰
已更新
完全删除自定义的脚本。我将只写下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;
}
}
这两个是问题所在
html {height: 100%;}
body {height: 100%;}
html和正文的100%高度是视口的高度,而不是整个文档的高度。内部元素使普通高度高于视口,它可以使您所拍摄的图像更清晰
已更新
完全删除自定义的脚本。我将只写下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个)。
同时移除最小高度:507px在css中,从两个外部框中选择code>
将html
和body
css更改为如下内容。这将确保您的元素包含在body标记和body by html标记中:
html,body{
margin: 0;
padding: 0;
}
我用我提到的修改尝试了你的代码,有JS和没有JS,但似乎没有什么不同。如果您使用对css的修改并希望删除页面底部的空白,那么您的JS似乎并不是真正需要的。参见JSFiddle
您修改的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;
}
}
从css部分的每个.bg
中删除height
属性(我总共计算了3个)。
同时移除最小高度:507px在css中,从两个外部框中选择code>
将html
和body
css更改为如下内容。这将确保您的元素包含在body标记和body by html标记中:
html,body{
margin: 0;
padding: 0;
}
我用我提到的修改尝试了你的代码,有JS和没有JS,但似乎没有什么不同。如果您使用对css的修改并希望删除页面底部的空白,那么您的JS似乎并不是真正需要的。参见JSFiddle
您修改的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;
}
}
因为与第一个答案相隔30分钟后,答案几乎相同。几乎是一本。没有新的想法来解决问题。我不得不不同意。第一篇文章只讨论了html和body标记。这个答案涉及O.P.代码的其他部分。如果您没有更改html、body标记,但仍然更改了css中的.bg和最小高度,那么问题仍然会得到解决。我也不确定是不是相反。更正html、正文标记是否确保内容在正文中,但不会修复空白问题。可能在某个时候您是对的。如果你编辑你的答案(无论如何)-我可以修正我的标记(因为我的投票被锁定,除非这个答案被编辑。)@ArjunSethi在大屏幕上,我希望内容在视口中可见,这意味着除非在较小的设备上查看,否则不应该引入滚动条,然后我可以引入滚动条。我希望你得到我想要的meant@ArjunSethi出于这个原因,我在.bg类中使用了height属性,因此它可以相应地计算高度,并适合在大屏幕中没有滚动条的可见视口中的位置。因为与第一个答案相隔30分钟后,答案几乎相同。几乎是一本。没有新的想法来解决问题。我不得不不同意。第一篇文章只讨论了html和body标记。这个答案涉及O.P.代码的其他部分。如果您没有更改html、body标记,但仍然更改了css中的.bg和最小高度,那么问题仍然会得到解决。我也不确定是不是相反。更正html、正文标记是否确保内容在正文中,但不会修复空白问题。可能在某个时候您是对的。如果你编辑你的答案(无论如何)-我可以修正我的标记(因为我的投票被锁定,除非这个答案被编辑。)@ArjunSethi在大屏幕上,我希望内容在视口中可见,这意味着没有滚动条