html - 无法从响应式设计 HTML/CSS 中删除右侧的空白

Question

在实现响应式设计时，我无法删除右侧的空白区域。我已经使用 flex box 来实现大部分布局。窗口准确响应，内容相应调整，但滚动时，右侧始终有空间!

类的层次结构:

---->容器

-------->侧边栏

----------------> 姓名-职业

---------------->详细信息

------------------------>联系元素

-------->内容

HTML:

* {
  margin: 0;
  padding: 0;
  font-family: Roboto;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background-color: #E5E6EA;
}

.container {
  display: flex;
  height: 100%;
}

@media screen and (max-width: 480px) {
  .container {
    flex-direction: column;
  }
}


/* Sidebar */

.sidebar {
  background-color: #FFF;
  flex: 1;
  margin-right: 20px;
  width: 400px;
  flex: initial;
}

@media screen and (max-width: 480px) {
  .sidebar {
    width: 100%;
    margin-bottom: 40px;
    margin-right: 0;
  }
}

.name-profession {
  background-color: #56b293;
  padding: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  color: #fff;
}

.name {
  font-size: 40px;
  font-weight: bold;
}

.profession {
  font-size: 20px;
}

.details {
  padding: 40px;
}

@media screen and (max-width: 480px) {
  .details {
    width: 300px;
    margin: 0 auto;
    position: relative;
  }
  .contact-item {}
}

.contact {
  margin-bottom: 20px;
}

.contact-item {
  display: flex;
  width: 400px;
  margin-bottom: 20px;
}

.contact-text {
  margin-left: 10px;
  font-size: 15px;
}


/* End Sidebar */


/* Content */

.content {
  background-color: #fff;
  flex: 2;
}

@media screen and (max-width: 480px) {
  .content {
    width: 100%;
    margin-bottom: 40px;
  }
}


/* End Content */


/* Common */

.large-heading {
  font-size: 25px;
  text-transform: uppercase;
  font-weight: bold;
}

.heading {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: bold;
}

.content-text {
  color: grey;
}

.circle-avatar {
  width: 40px;
  height: 40px;
  background-color: #56b293;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle-avatar img {
  width: 30px;
  height: 30px;
  padding: 5px;
}

.dotted-separator {
  border-top: 3px dashed #E5E6EA;
  width: 100%;
}

.content-padding {
  padding: 40px;
}

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<div class="container">
  <!--Sidebar-->
  <div class="sidebar">
    <div class="name-profession">
      <p class="name">Gurleen Sethi</p>
      <p class="profession">Software Developer</p>
    </div>

    <div class="details">
      <p class="contact large-heading">Contact</p>
      <div class="contact-item">
        <div class="circle-avatar">
          <img src="images/home.png">
        </div>
        <div class="contact-text">
          <p class="heading">Address</p>
          <p class="content-text">948 New Geeta Colony</p>
        </div>
      </div>

      <div class="contact-item">
        <div class="circle-avatar">
          <img src="images/calendar.png">
        </div>
        <div class="contact-text">
          <p class="heading">DATE OF BIRTH</p>
          <p class="content-text">18 August 1996</p>
        </div>
      </div>

      <div class="contact-item">
        <div class="circle-avatar">
          <img src="images/phone.png">
        </div>
        <div class="contact-text">
          <p class="heading">Phone</p>
          <p class="content-text">+91 72908 32506</p>
        </div>
      </div>

      <div class="contact-item">
        <div class="circle-avatar">
          <img src="images/mail.png">
        </div>
        <div class="contact-text">
          <p class="heading">Email</p>
          <p class="content-text">contactgurleensethi@gmail.com</p>
        </div>
      </div>

      <div class="contact-item">
        <div class="circle-avatar">
          <img src="images/world.png">
        </div>
        <div class="contact-text">
          <p class="heading">Website</p>
          <p class="content-text">www.thetechnocafe.com</p>
        </div>
      </div>
    </div>
  </div>

  <!--Content-->
  <div class="content">
    <div class="about content-padding">
      <p class="heading" style="margin-bottom: 20px;">About</p>
      <p class="content-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>

    <div class="dotted-separator"></div>
  </div>
</div>

Answer 1

您的 .contact-item 的宽度为 400px，这在移动设备上创建了水平空间。将其更改为 width: 100% 应该没问题。