时间戳

首页 > 解决方案 > 尽管 body 和 html 设置为 100%，但我无法让元素占据整个屏幕

javascript - 尽管 body 和 html 设置为 100%，但我无法让元素占据整个屏幕

问题描述

单击按钮时，我无法让我的侧栏元素填充整个页面。当我单击该按钮时，它会打开并且似乎是整个页面，但可能会延伸到正文之外或 HTML 与其重叠。不知道为什么。

html {
    font-size: 62.5%;
    width: 100%;
    height: 100%;
    margin: 0px;
}

body {
    font-size: 1rem;

    width: 100%;
    height: 100%;
    margin: 0px;
}

.sidebar {
    background-color: var(--bacgroundColor);
    color: #fff;
    display: none;
}

.sidebar.open {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: initial;
    padding-left: 0px;
}

.menu-button {
    z-index: 1000;
    position: fixed;
    top: 0;
    right: 0;
    background: var(--bacgroundColor);
    border: transparent;
}

.menu-button svg {
    width: 25px;
    height: 50px;
}
line {
    stroke: var(--hambugerColor);
}

.nameDiv {
    margin-top: 30px;
    display: flex;
    font-family: var(--headline-font);
}

.firstName {
    margin-bottom: 0px;
    font-size: 2.8em;
}
.lastName {
    margin-bottom: 0px;
    font-size: 2.8em;
    padding-left: 3px;
}

.white {
    color: var(--textColor);
    font-family: var(--headline-font);
}

.blue {
    font-family: var(--headline-font);

    color: var(--nameBlue);
    padding-left: 0.3em;
}

.paragraph {
    color: var(--textColor);
    font-size: 2rem;
}

.catagories {
    display: flex;
}

.links {
    color: var(--linkColor);
    font-family: var(--textColor);
}

.links a svg {
    stroke: var(--linkColor);
}

.bigName {
    font-size: 5rem;
    padding-left: 0em;
}

.enter {
    text-align: center;
    padding-left: 0em;
}

.enterDiv a {
    text-decoration: none;
}

.container {
    margin-left: 36px;
    margin-right: 36px;
    width: 100%;
    height: 100%;
}

.workHistory {
    color: #575159;
    margin-left: 16px;
    margin-right: 16px;
    font-family: var(--headline-font);
}

.business {
    font-family: OpenSans-LightItalic;
    font-style: italic;
}

.workParagraph {
    font-size: 1.8rem;
    font-family: OpenSans-Regular;
}

.connect {
    font-family: var(--headline-font);
    font-size: 3.8rem;
    margin-left: 16px;
    margin-right: 16px;
    color: #575159;
}

.connect2 {
    display: none;
}

.svgs svg {
    fill: #1c4ca4;
}

.svgs {
    margin-left: 16px;
    margin-right: 16px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.youtube {
    height: 30px;
    width: 30px;
    order: -2;
}

.instagram {
    height: 35px;
    width: 35px;
    order: -1;
}

.twitter {
    height: 35px;
    width: 35px;
}

.linkedin {
    height: 35px;
    width: 35px;
}

.titleDiv {
    font-size: 2rem;
}

input {
    width: 100%;
    height: 60px;
    font-size: 2rem;
}

textarea {
    width: 100%;
    height: 131px;
    font-size: 2rem;
    padding: 20px;
}
form {
    /* margin-top: 126px; */
    margin-left: 16px;
    margin-right: 16px;
    color: #575159;
    z-index: 500;
}

.messageDiv {
    padding-top: 40px;
}

.buttonDiv {
    padding-top: 40px;
}

.sendButton {
    background: var(--bacgroundColor);
    width: 100%;
    height: 64px;
    font-size: 2.6rem;
    font-family: OpenSans-Bold;
    color: var(--textColor);
}
<body>

    <div class="workHistory">

        <h1 class="headLine">EXPERIENCE</h1>
        <div class="workInfo">
            <div class="imageDiv "></div>
            <div class="jobTitle">
                <h2 class="position">Independent Project Manager</h2>
                <div class="business">JoenathanWatson Home Imrpovment</div>
                <div class="business">June 2004 – Present</div>
            </div>
        </div>
        <p class="workParagraph">
            Coordinate project plans and specification to keep the task on schedule. Obtain required permits, requests, and certifications to complete projects. Oversee all issues during project construction and completion stage. Record, request, and receive all deliveries of materials and machinery required for all job sites.
        </p>
    </div>

    <div class="connect"> LETS CONNECT</div>
    <div class="connect2">CONNECT WITH ME </div>
    <p class="workHistory workParagraph">

        We are in the best profession and we know networking is the best way to keep in touch!
        Please feel free to use one of the following:

    </p>

    </div>

    <form>
        <div class="formWrapper">
            <div class="titleDiv">
                What is your email Adress
            </div>
            <div class="email">
                <label>
                    <input class="email" type="text" placeholder="foo@example.net" />
                </label>
            </div>
            <div class="titleDiv messageDiv">
                What do you want to discuss?
            </div>
            <div class="message">
                <label>
                    <textarea class="message" rows="4" cols="50" placeholder="Enter message Here"></textarea>
                </label>
            </div>
            <div class="buttonDiv">
                <button class="sendButton">SEND</button>
            </div>
        </div>
    </form>

    <!--Navigation Bars: aka--hamburger nav -->
    <button class="menu-button js-menu-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="3" y1="12" x2="21" y2="12"></line>
            <line x1="3" y1="6" x2="21" y2="6"></line>
            <line x1="3" y1="18" x2="21" y2="18"></line>
        </svg>
    </button>

    <div class="sidebar js-sidebar">

        <div class="container">
            <div class="nameDiv">
                <h1 class="firstName white">JOENATHAN</h1>
                <h1 class="lastName blue">WATSON</h1>
            </div>
            <p class="paragraph">I am JoeNathan Watson, preferred to be called Joe. I am currently in the process of obtaining my certification in Coding and Web Development, while obtaining my Bachelor Degree in ITI at Rutgers University. I crave for challenges that requires me to think outside the box; tasks which allows me to utilize my technological skills and knowledge. My love for technology drive me to figure out, on my own, how to create websites, cartoons and games, using programs like HTML/CSS, JavaScript, jQuery, and GitHub to accomplish my work. Apart from thinking outside the box; I am a quick learner, I possess strong leadership abilities, and know how to understand and articulate strategic visions; translating them into projects. My Certs in this field will permit me to have a better understanding of systematic structures and algorithms, especially with Social Media Sites; creating and designing websites, bring ideas to reality via animation and creating platforms where people can share their work.</p>
            <div class="title catagories">
                <h1 class="white">RELEVANT</h1>
                <h1 class="blue">COURSEWORK</h1>
            </div>
            <h2 class="white">Web Design 1</h2>
            <p class="paragraph">
                Identify and apply basic and advanced principles and techniques of web design. Publish documents on the World Wide Web using HTML, CSS, Javascript, and various styling languages and tools, and with content tailored to a target audience
            </p>

            <h2 class="white">Advanced Web Design</h2>
            <p class="paragraph">
                Build a website or web application that incorporates front-end interactivity through the use of interface behaviors, data manipulation, templating, and asynchronous data transfer (AJAX). Manipulate, aggregate, and make relationships between data from various sources to produce results in an interactive website or application not otherwise possible using single data sources alone.
            </p>

            <div class="title catagories">
                <h1 class="white">MY</h1>
                <h1 class="blue">PORTFOLIO</h1>
            </div>
            <h2 class="white">Roots of our Tree</h2>
            <p class="paragraph">
                Social media site featuring React JS, Node js, express, socket IO, React Router, React Hooks
            </p>
            <h1 class="links">
                <a href="https://roots-v1.herokuapp.com/">SEE THE LIVE PROJECT
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <g fill="none" fill-rule="evenodd">
                            <path d="M18 14v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8c0-1.1.9-2 2-2h5M15 3h6v6M10 14L20.2 3.8" />
                        </g>
                    </svg>
                </a>
            </h1>
            <h1 class="links">
                <a href="https://github.com/Jaydanasara">SEE THE CODE ON GITHUB
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <polyline points="16 18 22 12 16 6"></polyline>
                        <polyline points="8 6 2 12 8 18"></polyline>
                    </svg></a>
            </h1>
        </div>
    </div>
    <div class="svgs">
        <!-- Code-->

        <!-- Link out-->

        <!-- LinkedIn-->
        <svg class="linkedin" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000">
            <path d="M22.23 0H1.77C.8 0 0 .77 0 1.72v20.56C0 23.23.8 24 1.77 24h20.46c.98 0 1.77-.77 1.77-1.72V1.72C24 .77 23.2 0 22.23 0zM7.27 20.1H3.65V9.24h3.62V20.1zM5.47 7.76h-.03c-1.22 0-2-.83-2-1.87 0-1.06.8-1.87 2.05-1.87 1.24 0 2 .8 2.02 1.87 0 1.04-.78 1.87-2.05 1.87zM20.34 20.1h-3.63v-5.8c0-1.45-.52-2.45-1.83-2.45-1 0-1.6.67-1.87 1.32-.1.23-.11.55-.11.88v6.05H9.28s.05-9.82 0-10.84h3.63v1.54a3.6 3.6 0 0 1 3.26-1.8c2.39 0 4.18 1.56 4.18 4.89v6.21z" />
        </svg>

        <!-- YouTube-->
        <svg class="youtube" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000">
            <path d="M12.04 3.5c.59 0 7.54.02 9.34.5a3.02 3.02 0 0 1 2.12 2.15C24 8.05 24 12 24 12v.04c0 .43-.03 4.03-.5 5.8A3.02 3.02 0 0 1 21.38 20c-1.76.48-8.45.5-9.3.51h-.17c-.85 0-7.54-.03-9.29-.5A3.02 3.02 0 0 1 .5 17.84c-.42-1.61-.49-4.7-.5-5.6v-.5c.01-.9.08-3.99.5-5.6a3.02 3.02 0 0 1 2.12-2.14c1.8-.49 8.75-.51 9.34-.51zM9.54 8.4v7.18L15.82 12 9.54 8.41z" />
        </svg>

        <!-- Twitter-->
        <svg class="twitter" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000">
            <path d="M24 4.37a9.6 9.6 0 0 1-2.83.8 5.04 5.04 0 0 0 2.17-2.8c-.95.58-2 1-3.13 1.22A4.86 4.86 0 0 0 16.61 2a4.99 4.99 0 0 0-4.79 6.2A13.87 13.87 0 0 1 1.67 2.92 5.12 5.12 0 0 0 3.2 9.67a4.82 4.82 0 0 1-2.23-.64v.07c0 2.44 1.7 4.48 3.95 4.95a4.84 4.84 0 0 1-2.22.08c.63 2.01 2.45 3.47 4.6 3.51A9.72 9.72 0 0 1 0 19.74 13.68 13.68 0 0 0 7.55 22c9.06 0 14-7.7 14-14.37v-.65c.96-.71 1.79-1.6 2.45-2.61z" />
        </svg>

        <!--Instagram-->
        <svg class="instagram" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#000">
            <path d="M16.98 0a6.9 6.9 0 0 1 5.08 1.98A6.94 6.94 0 0 1 24 7.02v9.96c0 2.08-.68 3.87-1.98 5.13A7.14 7.14 0 0 1 16.94 24H7.06a7.06 7.06 0 0 1-5.03-1.89A6.96 6.96 0 0 1 0 16.94V7.02C0 2.8 2.8 0 7.02 0h9.96zm.05 2.23H7.06c-1.45 0-2.7.43-3.53 1.25a4.82 4.82 0 0 0-1.3 3.54v9.92c0 1.5.43 2.7 1.3 3.58a5 5 0 0 0 3.53 1.25h9.88a5 5 0 0 0 3.53-1.25 4.73 4.73 0 0 0 1.4-3.54V7.02a5 5 0 0 0-1.3-3.49 4.82 4.82 0 0 0-3.54-1.3zM12 5.76c3.39 0 6.2 2.8 6.2 6.2a6.2 6.2 0 0 1-12.4 0 6.2 6.2 0 0 1 6.2-6.2zm0 2.22a3.99 3.99 0 0 0-3.97 3.97A3.99 3.99 0 0 0 12 15.92a3.99 3.99 0 0 0 3.97-3.97A3.99 3.99 0 0 0 12 7.98zm6.44-3.77a1.4 1.4 0 1 1 0 2.8 1.4 1.4 0 0 1 0-2.8z" />
        </svg>
    </div>

</body>

标签： javascripthtmlcss

解决方案

给身体一个100vh的最小高度

推荐阅读