个人中心
gpt4 book ai didi

javascript - 非子 div 没有占据 100% 的屏幕，但是有一个可以吗？

转载 作者：行者123 更新时间：2023-11-28 00:54:40 24 4
gpt4 key购买 nike

我最近有一台 Ubuntu 服务器开始运行网络服务器，所以我正在构建一个页面来填充它。不过，我最近遇到了一些尴尬的 div 行为，而且我找不到任何文档或任何内容来解释它。我有 4 个单独的非子 div，它们隐藏在屏幕左侧，第一个似乎正确地采用了 100% 高度属性，而其他的似乎只是没有。我试图让屏幕外的 div 具有不同的长度，但无济于事。我怀疑这个问题是一些错误的 css，但它也可能与 JQuery 相关。此外，css 中的空白条件是我还没有开始制作漂亮的网站的一部分。

可以在此处找到 Material 以根据需要进行修补:https://codepen.io/ClaytonSchrumpf/pen/zmepwy

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel = "stylesheet" href = "../css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat|Roboto+Condensed" rel="stylesheet">
    <title>Clayton Schrumpf</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
</head>
<body>
    <div id="mainContent">
        <div id="header">
            <h1 id="name">Clayton Schrumpf</h1>
            <hr>
        </div>
        <div id="aboutMeContainer">
            <button class="linkStart" id="aboutMe">About Me</button>
        </div>    
        <div id="resumeContainer">
            <button class="linkStart" id="resume">My Resume</button>
        </div>
        <div id="pastProjectsContainer">
            <button class="linkStart" id="pastProjects">Past Projects</button>
        </div>
        <div id="contactContainer">
            <button class="linkStart" id="contact">Contact Me</button>
        </div>
    </div>
    <div class="subpage" id="aboutMePage">
        <button class="back">Back</button>
    </div>
    <div class="subpage" id="resumePage">
        <button class="back">Back</button>
    </div>
    <div class="subpage" id="pastProjectsPage">
        <button class="back">Back</button>
    </div>
    <div class="subpage" id="contactPage">
        <button class="back">Back</button>
    </div>  
    <script src="../js/buttonMove.js"></script>
</body>

CSS:

html,
body{
    width:100%;
    height=100%;
    position:fixed;
    top:0;
    bottom:0;
}

#mainContent{
    width:100%;
    height=100%;
    position:fixed;
    z-index: 0;
    top:0;
    bottom:0;
    background-color:rgb(225, 225, 225, 225);
    color:#000000;
    display:grid;
    grid-template-rows: auto;
    grid-template-rows: auto;
    grid-template-areas:
        ". gHead gHead ."
        "gButton1 gButton1 gButton1 gButton1"
        "gButton2 gButton2 gButton2 gButton2"
        "gButton3 gButton3 gButton3 gButton3"
        "gButton4 gButton4 gButton4 gButton4";
}

.back{
     background:none;
    color: #000000;
    padding:0!important;
    font:inherit;
    position: relative;
    margin-top:0px;
    cursor:pointer;
    border: 0px!important;
    font-size:4vmin;
    float: right;
    margin-right:2vmin;
    font-family: 'Montserrat', sans-serif;
}

.linkStart{
    background:none;
    color: #000000;
    padding:0!important;
    font:inherit;
    position: relative;
    height: 100%;
    width: 100%;
    margin-top:0px;
    cursor:pointer;
    border: 0px!important;
    font-size:4vmin;
    text-align: left;
    font-family: 'Montserrat', sans-serif;
    border:solid black;
}

#name{
    text-align:center;
    font-size:8vmin
}

#header{
    grid-area:gHead;
    align-self:center;
    width:100%;
    height:100%;
    font-family: 'Roboto Condensed', sans-serif;
}

#aboutMeContainer{
    grid-area: gButton1;
    height:100%;
    width:100%;
    position:relative;
    z-index: 2;
    border:1px solid;
}
#aboutMe{
    background:rgba(200, 172 , 178);
}

#resumeContainer{
    grid-area:gButton2;
    height:100%;
    width:100%;
    position:relative;
    border:1px solid;
}
#resume{

}

#pastProjectsContainer{
    grid-area: gButton3;
    height:100%;
    width:100%;
    position:relative;
    border:1px solid;

}
#pastProjects{
    background:rgba(161, 172, 200);
}

#contactContainer{
    grid-area: gButton4;
    height:100%;
    width:100%;
    position:relative;
    border:1px solid;

}
#contact{
}

.subpage{
    overflow:hidden;
    z-index: 2;
    position:relative;
    background-color:rgb(200,172,178);
    height:100%;
    width:1px;
    left:-1vmin;
}
#aboutMePage{

}

#resumePage{

}

#pastProjectsPage{

}

#contactPage{

}

JS 与 JQuery:

$(document).ready(function() {
    var selectedBut;
    var selectedDiv;

     $(".linkStart").click(function(event) {
            $(this).animate({left: "+=100%"}, 750);
             selectedBut = (event.target.id);
             if(selectedBut === "aboutMe"){
                 selectedDiv = "#aboutMePage";
                 selectedBut = "#aboutMe";
             } else if(selectedBut === "resume"){
                 selectedDiv = "#resumePage";
                 selectedBut = "#resume";
             } else if(selectedBut === "pastProjects") {
                 selectedDiv = "#pastProjectsPage";
                 selectedBut = "#pastProjects";
             } else if(selectedBut === "contact"){
                 selectedDiv = "#contactPage";
                 selectedBut = "#contact"
             }
             $(selectedDiv).css("left", "1vmin")
             $(selectedDiv).animate({"width":"100%"},  750);

         });

         $(".back").click(function() {
            $(selectedDiv).animate({"width":"1px"});
            $(selectedBut).animate({left:"-=100%"});
             $(selectedDiv).css("left", "-1vmin");
         });
    });

最佳答案

我想通了。对于也遇到过此问题的任何人，您都希望隐藏的 div 具有绝对位置。否则它们只是一个接一个地堆叠在页面下方。

关于javascript - 非子 div 没有占据 100% 的屏幕，但是有一个可以吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53011755/

24 4 0
文章推荐： html - 在最后一行调整 flex 元素的大小
文章推荐： javascript - 使用 Javascript 的 HiddenFields 中的空值
文章推荐： jquery - Python数据库动态可视化
文章推荐： javascript - 如何使用 java 脚本隐藏文本并显示另一个文本和由 php 触发的整个 java 脚本代码？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com