Question

我最近有一个Ubuntu服务器来开始运行Web服务器，因此我正在构建一个页面来填充它。我最近遇到了一些尴尬的div行为，但是找不到任何文档或任何说明。我有4个单独的非子级div，它们隐藏在屏幕的左侧，第一个似乎正确采用了100％的height属性，而其他似乎没有。我试图使divs在屏幕上显示不同的长度无济于事。我怀疑这个问题是一些错误的CSS，但也可能与JQuery绑定。另外，css中的空白条件是wesite的一部分，我还没有开始做。

可以在此处找到需要修改的材料：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{

}

带有JQuery的JS：

$(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");
         });
    });

Answer 1

我知道了。对于也有此问题的任何人，您都希望隐藏的div具有绝对位置。否则，它们只会在页面中一个接一个地堆叠。

非子级div不会占用100％的屏幕，但是一个会吗？

1 个答案: