Question

我的项目中有一个固定的元素，当我在移动设备中查看该元素时，该元素中的文本由于视口比例而被隐藏。当我的父元素处于fixed位置时，如何在响应式设计中显示我的内容？

文本在我的代码的<div id="about-accordion">部分：

这是我的代码：

var accordions = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener("click", function() {
    var patt = /(accordion-)(\d)/gm;
    var match = patt.exec(this.id);
    panel = document.getElementById("panel-" + match[2]);

    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panels = document.getElementsByClassName('panel');
      for (j = 0; j < panels.length; j++) {
        if (panels[j].id != panel.id) {
          panels[j].style.maxHeight = null;
          if (accordions[j].id != this.id)
            accordions[j].classList.remove('active');
        }
      }
      panel.style.maxHeight = panel.scrollHeight + "px";
    }

    this.classList.toggle("active");
  });
}

body {
  margin: 0;
  background-color: black;
}

.title {
  text-align: center;
  background-color: white;
  color: black;
  height: 100px;
  padding: 35px 0;
  margin: 0;
  width: 100%;
  z-index: 1;
  position: fixed;
  font-family: Clearface, sans-serif;
  /* Here you may change the name of the font family of the Header Title*/
  font-size: 40px;
  /* Here you may change the font size of the Header Title*/
}

.header #accordion-0 {
  font-size: 25px;
}

#about {
  background-color: black;
  color: white;
  float: left;
  width: 50%;
  height: 100vh;
  font-family: Clearface, sans-serif;
  margin-top: 170px;
  position: fixed;
}

#about h2 {
  font-size: 80px;
  /* Here you may change the font size of the About Title in desktop*/
  padding: 30px 70px 0 70px;
}

#about p {
  font-size: 30px;
  /* Here you may change the font size of the About Paragraph in desktop*/
  padding: 70px;
  padding-top: 0;
}

#projects .accordion {
  background-color: #333648;
  color: white;
  cursor: pointer;
  padding: 20px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 17px;
  transition: 0.5s;
  height: 20%;
  font-family: 'Univers LT Std', sans-serif;
  /* Here you may change the name of the font family of Each Project Link*/
  font-size: 20px;
  /* Here you may change the font size of Each Project Link*/
  opacity: 0.7;
}

#projects .active,
#projects .accordion:hover {
  background-color: #ccc;
  color: black;
  opacity: 1;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow-y: hidden;
  transition: max-height 0.3s ease-out;
}

.post {
  padding: 0 20%;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 50px auto;
}

#projects {
  float: right;
  width: 50%;
  height: 100vh;
  font-family: 'Univers LT Std', sans-serif;
  /* Here you may change the name of the font family of Each Project*/
  font-size: 20px;
  /* Here you may change the font size of Each Project*/
  margin-top: 170px;
}

#about-accordion h2,
#about-accordion p {
  font-family: Clearface, sans-serif;
}

#about-accordion .panel {
  background-color: black;
  color: white;
}

#about-accordion {
  font-size: 30px;
  /* Here you may change the font size of About Section in mobile*/
}


/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .header #accordion-0 {
    padding-right: 1em;
  }
  #emma-back {
    padding-left: 1em;
  }
  #about {
    display: none;
  }
  #projects {
    width: 100%;
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  #about {
    display: none;
  }
  #projects {
    width: 100%;
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header #accordion-0 {
    padding-right: 1em;
  }
  #emma-back {
    padding-left: 1em;
  }
}


/* Desktops and laptops ----------- */

@media only screen and (min-width: 1224px) {
  #about-accordion {
    display: none;
  }
  .header #accordion-0 {
    display: none;
  }
  #dash {
    display: none;
  }
}


/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
  #about-accordion {
    display: none;
  }
  .header #accordion-0 {
    display: none;
  }
  #dash {
    display: none;
  }
}

<h1 class="header title">
  <span id="emma-back"> Hello <br> Back </span>
  <span id="dash"> - </span>
  <span id="accordion-0" class="accordion">About Me</span>
</h1>

<div id="about">
  <h2>
    Hello!
  </h2>

  <p>
    Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara
    överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
  </p>
</div>

<div id="projects">
  <div id="about-accordion">
    <div id="panel-0" class="panel">
      <div class="post">
        <h2>
          Hello!
        </h2>

        <p>
          Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara
          överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus
          PageMaker.
        </p>
      </div>
    </div>
  </div>
  <button id="accordion-1" class="accordion">Project 1</button>
  <div id="panel-1" class="panel">
    <div class="post">
      <h2>TITLE HEADING</h2>
      <p>
        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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <div>
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
      </div>
    </div>
  </div>

  <button id="accordion-2" class="accordion">Project 2</button>
  <div id="panel-2" class="panel">
    <div class="post">
      <h2>TITLE HEADING</h2>
      <p>
        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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.


      </p>
      <div>
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
      </div>
    </div>
  </div>

  <button id="accordion-3" class="accordion">Project 3</button>
  <div id="panel-3" class="panel">
    <div class="post">
      <h2>TITLE HEADING</h2>
      <p>
        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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.


      </p>
      <div>
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
      </div>
    </div>
  </div>

  <button id="accordion-4" class="accordion">Project 4</button>
  <div id="panel-4" class="panel">
    <div class="post">
      <h2>TITLE HEADING</h2>
      <p>
        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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.


      </p>
      <div>
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
      </div>
    </div>
  </div>

  <button id="accordion-5" class="accordion">Project 5</button>
  <div id="panel-5" class="panel">
    <div class="post">
      <h2>TITLE HEADING</h2>
      <p>
        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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.


      </p>
      <div>
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
      </div>
    </div>
  </div>
</div>

以全页模式运行代码段时放大以查看我的意思

Answer 1

正如您提到的，由于您的固定元素（#about）为height: 100vh，因此隐藏了该文本。

但这只是问题的一半。

问题的另一半是该元素上方是另一个元素（.header），要清除该元素，您已经设置了margin-top: 170px。

您需要在计算高度时将边距长度考虑在内。

所以代替这个：

#about {
  height: 100vh;
  margin-top: 170px;
  position: fixed;
}

尝试一下：

#about {
  height: calc(100vh - 170px);
  overflow: auto;
  margin-top: 170px;
  position: fixed;
}

与#projects元素相同。

jsFiddle demo

var accordions = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener("click", function() {
    var patt = /(accordion-)(\d)/gm;
    var match = patt.exec(this.id);
    panel = document.getElementById("panel-" + match[2]);

    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panels = document.getElementsByClassName('panel');
      for (j = 0; j < panels.length; j++) {
        if (panels[j].id != panel.id) {
          panels[j].style.maxHeight = null;
          if (accordions[j].id != this.id)
            accordions[j].classList.remove('active');
        }
      }
      panel.style.maxHeight = panel.scrollHeight + "px";
    }

    this.classList.toggle("active");
  });
}

body {
  margin: 0;
  background-color: black;
}

.title {
  text-align: center;
  background-color: white;
  color: black;
  height: 100px;
  padding: 35px 0;
  margin: 0;
  width: 100%;
  z-index: 1;
  position: fixed;
  font-family: Clearface, sans-serif;
  /* Here you may change the name of the font family of the Header Title*/
  font-size: 40px;
  /* Here you may change the font size of the Header Title*/
}

.header #accordion-0 {
  font-size: 25px;
}

#about {
  background-color: black;
  color: white;
  float: left;
  width: 50%;
  /* height: 100vh; */
  height: calc(100vh - 170px);  /* new */
  overflow: auto;               /* new */
  font-family: Clearface, sans-serif;
  margin-top: 170px;
  position: fixed;
}

#about h2 {
  font-size: 80px;
  /* Here you may change the font size of the About Title in desktop*/
  padding: 30px 70px 0 70px;
}

#about p {
  font-size: 30px;
  /* Here you may change the font size of the About Paragraph in desktop*/
  padding: 70px;
  padding-top: 0;
}

#projects .accordion {
  background-color: #333648;
  color: white;
  cursor: pointer;
  padding: 20px;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 17px;
  transition: 0.5s;
  height: 20%;
  font-family: 'Univers LT Std', sans-serif;
  /* Here you may change the name of the font family of Each Project Link*/
  font-size: 20px;
  /* Here you may change the font size of Each Project Link*/
  opacity: 0.7;
}

#projects .active,
#projects .accordion:hover {
  background-color: #ccc;
  color: black;
  opacity: 1;
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow-y: hidden;
  transition: max-height 0.3s ease-out;
}

.post {
  padding: 0 20%;
}

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 50px auto;
}

#projects {
  float: right;
  width: 50%;
  height: calc( 100vh - 170px); /* adjustment */
  overflow: auto;                /* new */
  font-family: 'Univers LT Std', sans-serif;
  /* Here you may change the name of the font family of Each Project*/
  font-size: 20px;
  /* Here you may change the font size of Each Project*/
  margin-top: 170px;
}

#about-accordion h2,
#about-accordion p {
  font-family: Clearface, sans-serif;
}

#about-accordion .panel {
  background-color: black;
  color: white;
}

#about-accordion {
  font-size: 30px;
  /* Here you may change the font size of About Section in mobile*/
}


/* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .header #accordion-0 {
    padding-right: 1em;
  }
  #emma-back {
    padding-left: 1em;
  }
  #about {
    display: none;
  }
  #projects {
    width: 100%;
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}


/* iPads (portrait and landscape) ----------- */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  #about {
    display: none;
  }
  #projects {
    width: 100%;
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .header #accordion-0 {
    padding-right: 1em;
  }
  #emma-back {
    padding-left: 1em;
  }
}


/* Desktops and laptops ----------- */

@media only screen and (min-width: 1224px) {
  #about-accordion {
    display: none;
  }
  .header #accordion-0 {
    display: none;
  }
  #dash {
    display: none;
  }
}


/* Large screens ----------- */

@media only screen and (min-width: 1824px) {
  #about-accordion {
    display: none;
  }
  .header #accordion-0 {
    display: none;
  }
  #dash {
    display: none;
  }
}

<h1 class="header title">
  <span id="emma-back"> Hello <br> Back </span>
  <span id="dash"> - </span>
  <span id="accordion-0" class="accordion">About Me</span>
</h1>

<div id="about">
  <h2>
    Hello!
  </h2>

  <p>
    Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara
    överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus PageMaker.
  </p>
</div>

<div id="projects">
  <div id="about-accordion">
    <div id="panel-0" class="panel">
      <div class="post">
        <h2>
          Hello!
        </h2>

        <p>
          Lorem Ipsum är en utfyllnadstext från tryck- och förlagsindustrin. Lorem ipsum har varit standard ända sedan 1500-talet, när en okänd boksättare tog att antal bokstäver och blandade dem för att göra ett provexemplar av en bok. Lorem ipsum har inte bara
          överlevt fem århundraden, utan även övergången till elektronisk typografi utan större förändringar. Det blev allmänt känt på 1960-talet i samband med lanseringen av Letraset-ark med avsnitt av Lorem Ipsum, och senare med mjukvaror som Aldus
          PageMaker.
        </p>
      </div>
    </div>
  </div>
  <button id="accordion-1" class="accordion">Project 1</button>
  <div id="panel-1" class="panel">
    <div class="post">
      <h2>TITLE HEADING</h2>
      <p>
        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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
      <div>
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
      </div>
    </div>
  </div>

  <button id="accordion-2" class="accordion">Project 2</button>
  <div id="panel-2" class="panel">
    <div class="post">
      <h2>TITLE HEADING</h2>
      <p>
        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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.


      </p>
      <div>
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
      </div>
    </div>
  </div>

  <button id="accordion-3" class="accordion">Project 3</button>
  <div id="panel-3" class="panel">
    <div class="post">
      <h2>TITLE HEADING</h2>
      <p>
        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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.


      </p>
      <div>
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
      </div>
    </div>
  </div>

  <button id="accordion-4" class="accordion">Project 4</button>
  <div id="panel-4" class="panel">
    <div class="post">
      <h2>TITLE HEADING</h2>
      <p>
        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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.


      </p>
      <div>
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
      </div>
    </div>
  </div>

  <button id="accordion-5" class="accordion">Project 5</button>
  <div id="panel-5" class="panel">
    <div class="post">
      <h2>TITLE HEADING</h2>
      <p>
        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. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.


      </p>
      <div>
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
        <img src="images/placeholder.jpg" class="img-responsive">
      </div>
    </div>
  </div>
</div>

在固定位置的元素中显示所有内容

1 个答案: