使用HTML和CSS构建简历网站,无法获取正文中的div元素以跨越网站的高度

ajsxfq5m 于 2023-06-25 发布在其他

关注(0)|答案(1)|浏览(158)

我在下面插入了HTML和CSS。我尝试使用height使元素跨越整个页面：100 vh;并将其添加到HTML元素中。这不管用
我将类'left'设置为float：左;然后添加背景颜色。我希望背景颜色跨越整个高度的网页。
有什么建议吗
我知道我的CSS需要清理。我现在只是试图使一个功能和美观的网页，将清理后。

html {
   margin: 0;
   height: 100%;
   width: 100%;
}

body {
   margin: 0;
   min-height: 100%;
   width: 100%;
   background-color: #9f9f9f;
   font-family: helvetica, sans-serif;
}



.Army, .CCF, .OEM, .DRC {
    display: block;
    border-right: none;
}

.company, .role, .location, .period {
    display: inline-flex;
    border-right: 2px solid black;
    padding-right: 10px;
    padding-left: 10px;
}

.period {
    border-right: none;
}

.disclaimer {
    color: #bbbbbb;
    float: right;
    width: 70%;
    text-align: center;
}

.header {
    text-align: center;
    width: 100%;
    height: 100vh;
}

.name_top {
    margin: 10px;
}

.skills1, .skills2, .certifications {
    display: inline-block;
    align-items: center;
}

.skills2 {
    border-right: 2px solid black;
}

.skill_list2 ul, .skill_list1 ul, .cert_list ul {
    display: inline-block;
}

.skills {
    display: inline-block;
}

.skills1, .skills2 {
    width: 25%;
    align-content: center;
}

.certifications {
    width: 40%;
    border-right: none;
}


.skill_list2 ul, .skill_list1 ul {
    display: inline-block;
}

.p1 {
    margin-top: 30px;
    margin-bottom: 0;
}

.p2 {
    margin: 0;
    padding: 0;
}

.head1, .edu, .sk, .cert {
    text-align: center;
    padding-bottom: 10px;
}

.sk {
    width: 100%;
    align-items: center;
}
.phone_email {
    display: inline;
    align-items: center;
    text-align: center;
}

.contact_info {
    padding: 10px;
    display: inline;
    background-color: #191f41;

}

#ph, #em {
    padding-left: 5px;
    display: inline;
}

.socials  {
    display: inline;

}

.linked, .fb, .insta, .twitter {
    display: inline;
    padding: 5px;

}

#ph a, #em a, .socials a {
    color: white;
}

#ph {
    padding-right: 10px;
    border-right: 2px solid #191f41;
}

.left {
    float: left;
    width: 25%;
    padding: 10px;
    color: white;
    height: 100%;
    position:absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #191f41;

}

.right {
    float: right;
    width: 70%;
    padding-right: 10px;

}

.personal_statement {
    width: 100%;
    text-align: center;
}

.college, .degree, .expected_grad, .gpa, .clubs {
    padding: 0;
    margin: 0;
    border: 0;
}

.oregon, .ohio {
    padding-bottom: 10px;
}

.edu_att {
    padding: 10px;
    display: inline-table;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device_width, initial_scale=1.0">
    <meta name="description" content="My resume to help build my portfolio in coding.">
    <link rel="stylesheet" href="styles.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Frank Hodges' Resume Website</title>
</head>
<body>
<p class="disclaimer">**This resume was developed entirely in Python using HTML and CSS.
    To view the source code, please check out my portfolio.</p>
<div class="right">
    <div class="personal_statement">
        <h1>Professional Profile</h1>
        <p>Well-rounded and dedicated computer science professional with a diverse skill set. Currently attending the Oregon State University pursuing a
        post-bacc degree in computer science. Developed extensive organizational and critical thinking skills from time spent serving in the United States Army.
        Long term goals include obtaining a PhD and working in the HealthTech industry, specifically in prosthetics and AI to bridge knowledge between previously obtained
        biology degree and newly obtained CS degree. Eager to learn and grow as a young computer science professional.</p>
    </div>
    <div class="s_c">
        <div class="skills1">
            <h2 class="sk">Skills:</h2>
            <ul class="skill_list1">
                <li>Python</li>
                <li>CSS</li>
                <li>HTML</li>
                <li>Microsoft 365</li>
            </ul>
        </div>
        <div class="skills2">
            <ul class="skill_list2">
                <li>Project Management</li>
                <li>Cross-function Collaboration</li>
                <li>Critical Thinking</li>
                <li>Programming</li>
            </ul>
        </div>
        <div class="certifications">
            <h2 class="cert">Certifications:</h2>
            <ul class="cert_list">
                <li>Responsive Web Design</li>
                <li>JavaScript Data Structures & Algorithms</li>
                <li>Scientific Computing with Python</li>
                <li>Programming Fundamentals</li>
                <li>Google Project Management Fundamentals</li>
            </ul>
        </div>
    </div>
    <div class="experience">
        <div class="DRC">
            <h3 class="company">Diamond Ridge Construction Services, LLC</h3>
            <h4 class="role">Commercial Project Manager</h4>
            <h4 class="location">Cleveland, OH</h4>
            <h4 class="period">Jan 2023 - current</h4>
            <ul>
                <li>Implemented operational planning and informational meetings to coordinate and
                    communicate daily work plans to groups of 25+ individuals all working for subcontractors.
                </li>
                <li>
                    Managed anywhere from 6-10 large scale commercial jobs that ranged from $900,000 to
                    $5,000,000 in pricing which accounts for more than 50% of total company revenue.
                </li>
                <li>
                    Evaluated, processed and approved submittal packages, contracts, bid summaries, and work control documents.
                </li>
                <li>
                    Oversaw projects from development phases through construction administration and final walk-throughs
                </li>
            </ul>
        </div>
        <div class="OEM">
            <h3 class="company">Office of Emergency Management</h3>
            <h4 class="role">Strike Team Leader</h4>
            <h4 class="location">Anywhere, United States</h4>
            <h4 class="period">Sep 2021 - Feb 2023</h4>
            <ul>
                <li>
                    Acted promptly to respond to federally declared natural disasters to aid local
                    authorities in emergency operations.
                </li>
                <li>
                    Reinforced local municipalities by relieving stress on EMS Ops while cities experienced up to an 800% increase in call volumes.
                </li>
                <li>
                    Initiated communication directly to the Task Force Leader through
                    daily meetings, daily reports, weekly reports and disseminated necessary information to the team.
                </li>
                <li>
                    Communicated with local officials and authorities to optimize operations and
                    task prioritization for the project team consisting of 20 personnel and 10 ambulances.
                </li>
            </ul>
        </div>
            <div class="CCF">
            <h3 class="company">Cleveland Clinic</h3>
            <h4 class="role">Medical Assistant</h4>
            <h4 class="location">Cleveland, OH</h4>
            <h4 class="period">Jul 2020 - Sep 2021</h4>
            <ul>
                <li>Oversaw the medical treatment for up to 40 patients.</li>
                <li>Coordinated treatment and care options for patients at the direction of the physician.</li>
                <li>Documented required information and coordinated the communication between patients and medical staff up to 100 messages per day.</li>
                <li>Managed efficient patient intakes, collection of data and organization of data.</li>
            </ul>
        </div>
            <div class="Army">
            <h3 class="company">Ohio Army National Guard</h3>
            <h4 class="role">68W - Combat Medic/Health Care Specialist</h4>
            <h4 class="location">Ohio</h4>
            <h4 class="period">Jul 2014 - Nov 2020</h4>
            <ul>
                <li>Acted as the lead medic overseeing Battalion Aid Station Operations during field training overseeing 10-15 personnel.</li>
                <li>Developed training scenarios and strategic plans for specific scenarios to maintain operational readiness in accordance with unit leadership.</li>
                <li>Oversaw junior personnel new to the unit and assisted their transition to the unit.</li>
                <li>Provided excellent urgent medical care in a primary care setting to 100-300 troops depending on the environment placed.</li>
            </ul>
        </div>
    </div>
</div>
<div class="left">
    <section class="header">
        <div class="name_lo_area">
            <h1 class="name_top">Frank Hodges</h1>
            <h2 class="name_top">Computer Science</h2>
            <p class="name_top">Open to relocation and remote work</p>
        </div>
        <section class="contact_info">
            <h2 class="head1">Contact Me</h2>
            <div class="phone_email">
                <p id="ph"><a href="tel:4406389797"><i class="fa fa-phone"> Call Me</i></a></p>
                <p id="em"><a href="mailto:frnkhdgs8@gmail.con"><i class="fa fa-envelope"> Email Me</i></a> </p>
            </div>
            <div class="socials"><br><br>
                <h3>socials</h3>
                <p class="linked"><a href="https://www.linkedin.com/in/hodgesfm/"><i class="fa fa-linkedin"></i></a></p>
                <p class="fb"><a href="https://www.facebook.com/frankie.hodges.9/"><i class="fa fa-facebook"></i></a></p>
                <p class="insta"><a href="https://www.instagram.com/frankiehodges_/"><i class="fa fa-instagram"></i></a></p>
                <p class="twitter"><a href="https://twitter.com/FrankieHodges_"><i class="fa fa-twitter"></i></a></p>
                <h3 class="p1">Portfolio: </h3><br>
                <p class="p2">Coming soon!</p>
            </div>
        </section>
        <section class="education">
            <div class="oregon">
                <h2 class="edu">Education</h2>
                <h4 class="college">Oregon State University</h4>
                <h5 class="degree">B.S in Computer Science</h5>
                <ul class="edu_att">
                    <li class="gpa">GPA: 4.0</li>
                    <li class="expected_grad">Expected: May, 2024</li>
                    <li class="clubs">Extracurriculars: AI club, AppDev club, Leadership Academy, Undergraduate Student Advisory Board</li>
                </ul>
            </div>
            <div class="ohio">
                <h4 class="college">THE Ohio State University</h4>
                <h5 class="degree">B.A in Biology</h5>
                <ul class="edu_att">
                    <li class="gpa">GPA: 3.2</li>
                    <li class="expected_grad">Completed: May 2020</li>
                    <li class="clubs">Extracurriculars: PhiDE Pre-Med Frat, RallyCap Sports, Volunteer Coordinator (POINTapp), Special Events Intern(Columbus Literacy Council)</li>
                </ul>
            </div>
        </section>
    </section>
</div>

</body>
</html>

css

来源：https://stackoverflow.com/questions/76496826/using-html-and-css-to-build-a-resume-website-cant-get-div-element-within-body

1条答案

按热度按时间

c0vxltue1#

使用float是非常粗略的，float被设计用来将图像等粘贴在屏幕的某些侧面，同时将文本缠绕在屏幕周围。正因为如此，它有一些非常奇怪和古怪的规则。切勿使用浮动。
下面是我为使您的代码正常工作而做的更改

左右互换了，所以左优先
将免责声明放在右边的div中
删除了左右元素上的定位CSS
把身体做成一个网格，圆柱25%和75%

如果你想让你的网站“响应式”，考虑使用viewport units thruout，而不是硬编码px数字来填充，等等。还可以考虑使用媒体规则将左div放在移动屏幕的顶部

html {
    margin: 0;
    height: 100%;
    width: 100%;
 }
 
 body {
    margin: 0;
    background-color: #9f9f9f;
    font-family: helvetica, sans-serif;
    display: grid;
    grid-template-columns: 25% 75%;
    width: 100%;
 }
 
 .Army, .CCF, .OEM, .DRC {
     display: block;
     border-right: none;
 }
 
 .company, .role, .location, .period {
     display: inline-flex;
     border-right: 2px solid black;
     padding-right: 10px;
     padding-left: 10px;
 }
 
 .period {
     border-right: none;
 }
 
 .disclaimer {
     color: #bbbbbb;
     padding-left: 10%;
     padding-right: 10%;
     text-align: center;
 }
 
 .header {
     text-align: center;
     width: 100%;
     height: 100vh;
 }
 
 .name_top {
     margin: 10px;
 }
 .quallifications {
     padding-left: 10%;
     padding-right: 10%;
 }
 .quallifications td {
    vertical-align: baseline;
 }
 .th {
    text-align: center;
    border-bottom: 2px solid black;
    width: 70%;
    margin: auto;
 }
 
 .p1 {
     margin-top: 30px;
     margin-bottom: 0;
 }
 
 .p2 {
     margin: 0;
     padding: 0;
 }
 
 .head1, .edu, .sk, .cert {
     text-align: center;
     padding-bottom: 10px;
 }
 
 .sk {
     width: 100%;
     align-items: center;
 }
 .phone_email {
     display: inline;
     align-items: center;
     text-align: center;
 }
 
 .contact_info {
     padding: 10px;
     display: inline;
     background-color: #191f41;
 
 }
 
 #ph, #em {
     padding-left: 5px;
     display: inline;
 }
 
 .socials  {
     display: inline;
 
 }
 
 .linked, .fb, .insta, .twitter {
     display: inline;
     padding: 5px;
 
 }
 
 #ph a, #em a, .socials a {
     color: white;
 }
 
 #ph {
     padding-right: 10px;
     border-right: 2px solid #191f41;
 }
 
 .left {
     padding: 10px;
     color: white;
     background-color: #191f41;
 
 }
 
 .personal_statement {
     width: 100%;
     text-align: center;
 }
 
 .college, .degree, .expected_grad, .gpa, .clubs {
     padding: 0;
     margin: 0;
     border: 0;
 }
 
 .oregon, .ohio {
     padding-bottom: 10px;
 }
 
 .edu_att {
     padding: 10px;
     display: inline-table;
 
 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device_width, initial_scale=1.0">
    <meta name="description" content="My resume to help build my portfolio in coding.">
    <link rel="stylesheet" href="styles.css" type="text/css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Frank Hodges' Resume Website</title>
</head>
<body>
<div class="left">
    <section class="header">
        <div class="name_lo_area">
            <h1 class="name_top">Frank Hodges</h1>
            <h2 class="name_top">Computer Science</h2>
            <p class="name_top">Open to relocation and remote work</p>
        </div>
        <section class="contact_info">
            <h2 class="head1">Contact Me</h2>
            <div class="phone_email">
                <p id="ph"><a href="tel:4406389797"><i class="fa fa-phone"> Call Me</i></a></p>
                <p id="em"><a href="mailto:frnkhdgs8@gmail.con"><i class="fa fa-envelope"> Email Me</i></a> </p>
            </div>
            <div class="socials"><br><br>
                <h3>socials</h3>
                <p class="linked"><a href="https://www.linkedin.com/in/hodgesfm/"><i class="fa fa-linkedin"></i></a></p>
                <p class="fb"><a href="https://www.facebook.com/frankie.hodges.9/"><i class="fa fa-facebook"></i></a></p>
                <p class="insta"><a href="https://www.instagram.com/frankiehodges_/"><i class="fa fa-instagram"></i></a></p>
                <p class="twitter"><a href="https://twitter.com/FrankieHodges_"><i class="fa fa-twitter"></i></a></p>
                <h3 class="p1">Portfolio: </h3><br>
                <p class="p2">Coming soon!</p>
            </div>
        </section>
        <section class="education">
            <div class="oregon">
                <h2 class="edu">Education</h2>
                <h4 class="college">Oregon State University</h4>
                <h5 class="degree">B.S in Computer Science</h5>
                <ul class="edu_att">
                    <li class="gpa">GPA: 4.0</li>
                    <li class="expected_grad">Expected: May, 2024</li>
                    <li class="clubs">Extracurriculars: AI club, AppDev club, Leadership Academy, Undergraduate Student Advisory Board</li>
                </ul>
            </div>
            <div class="ohio">
                <h4 class="college">THE Ohio State University</h4>
                <h5 class="degree">B.A in Biology</h5>
                <ul class="edu_att">
                    <li class="gpa">GPA: 3.2</li>
                    <li class="expected_grad">Completed: May 2020</li>
                    <li class="clubs">Extracurriculars: PhiDE Pre-Med Frat, RallyCap Sports, Volunteer Coordinator (POINTapp), Special Events Intern(Columbus Literacy Council)</li>
                </ul>
            </div>
        </section>
    </section>
</div>

<div class="right">
    <p class="disclaimer">**This resume was developed entirely in Python using HTML and CSS.
        To view the source code, please check out my portfolio.</p>
    <div class="personal_statement">
        <h1>Professional Profile</h1>
        <p>Well-rounded and dedicated computer science professional with a diverse skill set. Currently attending the Oregon State University pursuing a
        post-bacc degree in computer science. Developed extensive organizational and critical thinking skills from time spent serving in the United States Army.
        Long term goals include obtaining a PhD and working in the HealthTech industry, specifically in prosthetics and AI to bridge knowledge between previously obtained
        biology degree and newly obtained CS degree. Eager to learn and grow as a young computer science professional.</p>
    </div>
    <table class="quallifications">
        <tr>
          <th colspan="2"><div class="th">Skills</div></th>
          <th><div class="th">Certifications</div></th>
        </tr>
        <tr>
            <td><ul>
                <li>Python</li>
                <li>CSS</li>
                <li>HTML</li>
                <li>Microsoft 365</li>
            </ul></td>
            <td><ul>
                <li>Project Management</li>
                <li>Cross-function Collaboration</li>
                <li>Critical Thinking</li>
                <li>Programming</li>
            </ul></td>
            <td><ul>
                <li>Responsive Web Design</li>
                <li>JavaScript Data Structures & Algorithms</li>
                <li>Scientific Computing with Python</li>
                <li>Programming Fundamentals</li>
                <li>Google Project Management Fundamentals</li>
            </ul></td>
        </tr>
    </table>
    <div class="experience">
        <div class="DRC">
            <h3 class="company">Diamond Ridge Construction Services, LLC</h3>
            <h4 class="role">Commercial Project Manager</h4>
            <h4 class="location">Cleveland, OH</h4>
            <h4 class="period">Jan 2023 - current</h4>
            <ul>
                <li>Implemented operational planning and informational meetings to coordinate and
                    communicate daily work plans to groups of 25+ individuals all working for subcontractors.
                </li>
                <li>
                    Managed anywhere from 6-10 large scale commercial jobs that ranged from $900,000 to
                    $5,000,000 in pricing which accounts for more than 50% of total company revenue.
                </li>
                <li>
                    Evaluated, processed and approved submittal packages, contracts, bid summaries, and work control documents.
                </li>
                <li>
                    Oversaw projects from development phases through construction administration and final walk-throughs
                </li>
            </ul>
        </div>
        <div class="OEM">
            <h3 class="company">Office of Emergency Management</h3>
            <h4 class="role">Strike Team Leader</h4>
            <h4 class="location">Anywhere, United States</h4>
            <h4 class="period">Sep 2021 - Feb 2023</h4>
            <ul>
                <li>
                    Acted promptly to respond to federally declared natural disasters to aid local
                    authorities in emergency operations.
                </li>
                <li>
                    Reinforced local municipalities by relieving stress on EMS Ops while cities experienced up to an 800% increase in call volumes.
                </li>
                <li>
                    Initiated communication directly to the Task Force Leader through
                    daily meetings, daily reports, weekly reports and disseminated necessary information to the team.
                </li>
                <li>
                    Communicated with local officials and authorities to optimize operations and
                    task prioritization for the project team consisting of 20 personnel and 10 ambulances.
                </li>
            </ul>
        </div>
            <div class="CCF">
            <h3 class="company">Cleveland Clinic</h3>
            <h4 class="role">Medical Assistant</h4>
            <h4 class="location">Cleveland, OH</h4>
            <h4 class="period">Jul 2020 - Sep 2021</h4>
            <ul>
                <li>Oversaw the medical treatment for up to 40 patients.</li>
                <li>Coordinated treatment and care options for patients at the direction of the physician.</li>
                <li>Documented required information and coordinated the communication between patients and medical staff up to 100 messages per day.</li>
                <li>Managed efficient patient intakes, collection of data and organization of data.</li>
            </ul>
        </div>
            <div class="Army">
            <h3 class="company">Ohio Army National Guard</h3>
            <h4 class="role">68W - Combat Medic/Health Care Specialist</h4>
            <h4 class="location">Ohio</h4>
            <h4 class="period">Jul 2014 - Nov 2020</h4>
            <ul>
                <li>Acted as the lead medic overseeing Battalion Aid Station Operations during field training overseeing 10-15 personnel.</li>
                <li>Developed training scenarios and strategic plans for specific scenarios to maintain operational readiness in accordance with unit leadership.</li>
                <li>Oversaw junior personnel new to the unit and assisted their transition to the unit.</li>
                <li>Provided excellent urgent medical care in a primary care setting to 100-300 troops depending on the environment placed.</li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

赞(0）回复(0）举报 2023-06-25

我来回答

使用HTML和CSS构建简历网站,无法获取正文中的div元素以跨越网站的高度

1条答案

相关问题

热门标签

最新问答