Question

我在调整大小时遇到问题。当我更改浏览器大小时，其中的所有内容也会更改，包括底部的文本和表格。我如何保持位置，以使调整大小不会改变？我唯一想到的是位置：绝对；与图片类，这不会动，但其他所有动作。

https://codepen.io/CaptainMattyP/pen/mdJRKpo？


<html>
 <main>
  <body>
   <nav id="navbar">
     <ul>
      <li><a href="">About</a></li>
      <li><a href="">Skills</a></li>
      <li><a href="" class="projects">Projects</a></li>
      <li><a href="#footer">Contact</a></li>
      <li><a href="https://www.freecodecamp.org/fccef50e112-0b35-4195-878f-e76ad4931e3d" id="profile-link" target="_blank">FCC Profile</a></li>
     </ul>
   </nav>
    <div id="welcome-section">
      <h1>Hi, I'm Matt.  <br>Future Front-End Developer.</h1>  

      <img class="picture" src="https://i.ibb.co/71rD5ND/picture.png">

    </div>

    <section id="projects">
      <div class="project-tile">
        <a href="https://codepen.io/CaptainMattyP/pen/yLNgPwR">Survery Project </a>
      </div>
    </section>

    <section id="footer">
      <form style="display: block" id="contact-info"> 
       <label for="email" class="white">E-mail Address:
         <input id="email" type="email" name="emailaddress" class="block">
       </label>
       <label for="inquiry" class="white">Comments or Inquiries:
         <textarea rows="8" cols="25" style="resize: none" class="block">
         </textarea>
       </label>
       <button type="submit">Submit</button>
     </form> 
        <div id="footer-info1">
        Matthew Paciello <br><br>
        561-305-5761<br>
        Boca Raton, FL<br>
        mpaciell@gmail.com
      </div>
        <div id="copyright">
        @Matthew Paciello
      </div>
    </section>
  </body>  
 </main

body {
 height: 800px;
 width: 100%;
 margin: 0px; 
 background-image: url("https://wallpaperplay.com/walls/full/d/8/b/329997.jpg");
 background-attachment: fixed;
 font-family: 'Ubuntu Condensed';
}

h1 {
  text-align: center;
  padding: 25vh 0px 0px 920px;
}

#navbar {
  height: 50px; 
  width: 100%;
  background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
  background-color: rgb(80, 80, 86);
  border-bottom: solid;
  border-width: 1px;
  border-color: black;
  position: fixed;
  top: 0px;
  z-index: 5
}

a, .white {
  text-decoration: none;
  color: white;
}

a:hover {
  color: limegreen;
}

ul {
  text-align: right;
}

li {
  color: white;
  display: inline;
  padding: 30px;
}

#welcome {
  padding: 50vh 0px 0px 70vw;
}

#welcome-section {
  height: 800px;
}

.picture {
  margin: 0px 0px 0px 1250px;
  border-radius: 50%;
  position: absolute;
  z-index: 1; 
  box-shadow: 10px 10px 10px grey;
  border-style: solid;
  border-width: 1px; 
}

#footer {
  height: 230px;
  width: 100%;
  background-image: url("https://www.setaswall.com/wp-content/uploads/2018/02/Grey-Abstract-Wallpaper-16-1920x1080.jpg");
  border-top: solid;
  bottom: 0;
  border-width: 1px;

}

#footer-info1 {
  color: white; 
  padding: 80px 0px 0px 10vw;
}

#copyright {
  color: white;
  padding: 0px 0px 0px 48vw;
}

#contact-info {
  float: right;
  padding: 20px 10vw 0px 20px;
}

.block {
  display: block;
}

#projects {
  margin: 0px 0px 0px 77vw;
}

@media (max-height: 100%) {
#welcome-section {
  height: 800px;
}
}```

停止调整浏览器大小时元素的大小

0 个答案: