文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么当我调整页面的高度时，我的英雄和关于部分之间有一个空格？

问为什么当我调整页面的高度时，我的英雄和关于部分之间有一个空格？
EN

Stack Overflow用户

提问于 2022-01-22 00:28:32

回答 1查看 170关注 0票数 0

我是相当新的作出响应css，我还没有做很多。如果您在全屏打开下面的代码并更改选项卡的高度，那么高度越小，我的英雄和about部分之间的差距就越大。我希望所有设备的缺口保持不变。希望你能帮忙谢谢。

body {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  background-color: rgb(255, 255, 255);
  overflow-x: hidden;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#header {
  border-radius: 15px;
  margin-top: -0.8%;
  background-image: url(./images/DJI_0410-Enhanced.jpg);
  background-size: cover;
  background-position: right;
  width: 98.5%;
  height: 94%;
}

#title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 8%;
}

h1 {
  color: #f7f4f7;
  margin-top: 10%;
  font-size: 4.5vw;
  font-weight: 700;
  margin-bottom: 0;
}

#subTitle {
  color: white;
}

h2 {
  font-size: 3.6vw;
  font-weight: 600;
  margin-top: 10%;
}

button {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  width: 7.5rem;
  height: 3rem;
  border-radius: 10px;
  cursor: pointer;
}

.bookNow {
  background-color: #f8f8f8;
  color: #2B3758;
  margin-right: 0.4rem;
  transition: 200ms linear;
  border: none;
}

.bookNow:hover {
  background-color: #e6e3e6;
  color: #2B3758;
}

.learnMore {
  background-color: #2B3758;
  color: #f7f4f7;
  margin-left: 0.4rem;
  transition: 200ms linear;
  border: none;
}

.learnMore:hover {
  background-color: #4e6090;
  color: #f7f4f7;
}

#navBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 2% 8% 0% 8%;
}

.logo {
  width: 18%;
  height: 18%;
}

li a {
  text-decoration: none;
}

.page {
  color: white;
}

.otherPages {
  color: #585858;
  transition: 200ms linear;
}

.otherPages:hover {
  color: white;
}

.bookNow {
  margin-right: 8%;
  overflow: hidden;
}

.nav__links {
  list-style: none;
}

.nav__links li {
  display: inline-block;
  padding: 0px 20px;
  font-weight: 400;
}

.bookNowNav {
  background-color: rgba(255, 255, 255, .3);
  overflow: hidden;
  border-radius: 15px;
  border: 2.5px solid white;
  padding: 0px;
  transition: 200ms linear;
  color: white;
  margin-left: 25px;
}

.bookNowNav:hover {
  background-color: rgba(230, 230, 230, 0.5);
}

#about {
  position: absolute;
  margin-top: 860px;
  left: 50%;
  transform: translateX(-50%);
  width: 82.5%;
}

#aboutImage {
  display: inline-block;
  background-image: url(./images/DJI_0216.jpg);
  background-size: cover;
  background-position: center;
  width: 47.8%;
  height: 475px;
  border-radius: 15px;
  margin-right: 2%;
}

#aboutInfo {
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 47.8%;
  margin-left: 2%;
  padding-top: 10px;
  margin-top: -38px;
}

h2 {
  position: justify;
  margin-bottom: 30px;
}

.info {
  color: rgb(140, 140, 140);
  line-height: 30px;
  text-align: justify;
  height: 240px;
  font-weight: 300;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
  <title>Above Photography</title>

</head>

<body>

  <div id="header" class="center">

    <div id="navBar">

      <img class="logo" src="./images/AbovePhotographyLogo.png" alt="Logo">

      <nav>

        <ul class=n av__links>

          <li><a class="page" href="#">Home</a></li>
          <li><a class="otherPages" href="#">Photography</a></li>
          <li><a class="otherPages" href="#">Videography</a></li>
          <li><a class="otherPages" href="#">Contact</a></li>
          <a href="#"><button class = "bookNowNav">Book Now</button></a>

        </ul>

      </nav>



    </div>

    <div id="title">

      <h1>Above <br>Photography</h1>
      <h2 id="subTitle">Taking The<br>Perfect Picture</h2>
      <button class="bookNow">Book Now</button>
      <button class="learnMore">Learn More</button>

    </div>

  </div>

  <div id="about">

    <div id="aboutImage"></div>

    <div id="aboutInfo">

      <h2 class="">
        About
      </h2>

      <p class="info">
        My name is Max Herczeg and I'm a Grade 8 student from Toronto, Ontario. I have been flying drones for over 4 years and I've taken several photography courses as well. My passion for both of these interests has led me to create Above Photography. My age
        allows me to provide clients with an affordable cost for a high-end final product. Above Photography has a creative and fun approach to each project. My company uses the high-end DJI Air 2S Drone. It shoots 5.4K video resolution and 20 mega pixel
        pictures. This means that both photos and videos will look outstanding.
      </p>

      <button class="seeWork">Learn More</button>

    </div>

  </div>

html

css

responsive-design

responsive

回答 1

Stack Overflow用户

发布于 2022-01-22 03:09:50

正如Ouroborus在评论中提到的，这里没有简短的答复，原因有几点：

将标题( position: absolute. ) (.center)和#about div设置为

绝对定位从正常文档流中移除元素，并有几个副作用。

您的标题的高度被设置为百分比值&它没有设置高度的相对定位父容器。 因此它从<body>获得它的高度，这同时也是您的视图的高度。换句话说，如果您的视图改变高度，您的#header也会改变.

。

您正在为#about部分设置一个固定的margin-top: 860px，但您的#header维度不是固定的，如第2点.

中所解释的

因此，把所有这些放在一起意味着，无论什么时候，当您使视区比860px短的时候，about部分的边距保持在860 at，但是您的标题会随着视口缩小。因此，为什么高度越短，两者之间的差距就越大。这就是它的工作原理。

注:如果您使您的窗口更高，因为标题是94%的身体高度，它实际上将重叠有关的部分。*例如，通过将background-color设置为#header并将窗口设置为1600 by，可以清楚地看到这一点。同样，当您这样做时，您的#title将垂直地在文档中居中.可能与标题的内容不合适，甚至与about图像(或任何其他内容)重叠。

我的建议是：

离开绝对位置，除非复杂的内部布局严格需要。您不需要头容器或即将成为absolute.
Before试图进行响应性布局，请确保您理解CSS box-model、display和position的工作原理。以及柔性盒和/或网格布局(如果您想像以前那样学习的话，甚至浮动)。

https://www.w3schools.com/css/是一个很好的起点。编码愉快。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70809024

复制

相似问题

问为什么当我调整页面的高度时，我的英雄和关于部分之间有一个空格？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么当我调整页面的高度时，我的英雄和关于部分之间有一个空格？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么当我调整页面的高度时，我的英雄和关于部分之间有一个空格？
EN