Question

我有一个问题，其中div id =＆＃34; about＆＃34;调整窗口高度时移动。因此，如果我要获取浏览器窗口，并使其缩短（即不填充整个监视器），那么#about div会随着调整大小的窗口移动（不会自行调整大小），这样它就会与其他div重叠，而且我会这样做。我不知道如何解决这个问题。任何帮助表示感谢，谢谢。

HTML代码

<body>
<div id="header">
    <h1>Name Surname</h1>
    <p>Musician · Photographer</p>
</div>

<img id="face" src="images/face.png" style="width:150px; height:150px">

<div id="welcome">
    <h2>Hello, World!</h2>
    <p>Lorem Ipsum</p>

    <div id="subdomains">
        <a href="music.domain.me">Music</a>
        <a href="photography.domain.me"> Photography</a>
    </div>
    <div id="icons">
        <a href="https://www.facebook.com"><img src="images/facebook.png" style="width: 35px; height: 35px"></a>
        <a href="https://twitter.com"><img src="images/twitter.png" style="width: 35px; height: 35px"></a>
        <a href="https://linkedin.com"><img src="images/linkedin.png" style="width: 35px; height: 35px"></a>
    </div>
</div>
<div id="about">
    <div id="personal-info">
        <ul class="information">
            <li class="title">Education</li>
            <li class="content">Currently Studying MSc</li>
            <li class="content">BSc</li>
        </ul>
        <ul class="information">
            <li class="title">Past Work</li>
            <li class="content">Systems Administrator</li>
            <li class="content">Systems Administrator</li>
        </ul>
        <ul class="information">
            <li class="title">Skills</li>
            <li class="content">C · C++</li>
            <li class="content">HTML · CSS · Javascript</li>
            <li class="content">Adobe Photoshop · Adobe InDesign</li>
        </ul>
    </div>
    <div id="contact">
        <header>
            Contact Me
        </header>
        <section>
            <a href="mailto:" target="_blank">Send Me an Email</a>
            <a href="mailto:" target="_blank">Request My CV</a>
        </section>
    </div>
</div>

CSS代码

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

body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #FFFFFF;
    color: #FFFFFF;
    font-family: 'Hind', sans-serif;
    font-size: 14px;
}

#header {
    height: 400px;
    background-image: url(images/background.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 0 -50px;
}

#header > h1 {
    margin: 0;
    padding-top: 40px;
    font-size: 150px;
    text-transform: uppercase;
    clear: both;
    letter-spacing: 5px;
    text-align: center;
    font-family: 'Raleway', sans-serif;
}

#header > p {
    text-align: center;
    font-size: 22px;
    margin-top: -20px;
}

#face {
    display: block;
    position: absolute;
    top: 325px;
    margin: 0 auto;
    left: 0;
    right: 0;
    border: 5px solid #FFFFFF;
    border-radius: 100px;
}

#welcome {
    margin: 0;
    padding: 0;
    color: #000000;
    text-align: center;
    margin-top: 120px;
    font-size: 20px;
    height: calc(100% - 520px);
}

#welcome > p {
    margin-left: 300px;
    margin-right: 300px;
    margin-top: -20px;
}

#subdomains {
    margin-top: 100px;
}

#subdomains > a {
    text-decoration: none;
    padding: 0 10px 0 10px;
    color: #000000;
    font-size: 20px;
}

#icons {
    margin: 30px auto 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

#icons > a {
    text-decoration: none;
    color: #000000;
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#icons > a > img {
    border: 1px solid #000000;
    border-radius: 200px;
    padding: 5px;
}

#about {
    height: 700px;
    width: 100%;
    color: #FFFFFF;
    background-color: #2d3744;
    text-align: center;
}

#personal-info {
    margin: 0;
    padding: 0;
    float: left;
    height: 700px;
    width: 600px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #424e5c;
    display: fixed;
}

.information {
    margin-top: 50px;
    list-style-type: none;
    padding: 0;
    margin: 30px 0 30px 0;
}

.title {
    font-size: 25px;
    padding: 0;
}

.subtitle {
    font-size: 20px;
    padding: 0;
}

.content {
    font-size: 15px;
    padding: 0;
}

#contact {
    float: left;
    margin: 0;
    padding: 0;
    height: 700px;
    width: calc(100% - 600px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#contact > header {
    text-align: center;
    font-size: 30px;
}

section {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

section > a {
    text-decoration: none;
    font-size: 20px;
    color: #FFFFFF;
}

Div移动窗口调整大小，重叠其他Div

0 个答案: