Question

我试图在自己之后展示所有元素的孩子。我的<div>包含<section> position: absolute top，其right，bottom，left和<div>为全部0.在<div>之后，我在<section>中包含了另一个<h3>。该div只有<p>，其下有<main> <section class="fullscreen"> <div class="container"> <h1>Lorem Ipsum</h1> <p>Lorem ipsum dolor sit amet</p> <a href="#">Link</a> </div> </section> <section> <h3>Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </section> </main>。

这是HTML代码：

main {
  clear: both;
}
main section:nth-child(1) {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -10;
}
main section:nth-child(1) div.container {
  position: absolute;
    top: 50%;
    transform: translateY(-50%);
  text-align: center;
  width: 100%;
  margin: auto;
}

...这就是CSS：

.fullscreen

如何在不//Get the DOM objects w = $('.nav-wrapper'); wa = $('.nav-wrapper a'); wimg = $('.nav-wrapper a img'); //Set the nav wrapper to half its own height minus half of the link's text w.css({ 'padding-top': (w.height() / 2) - (wa.height() / 2) }); //Remove offset from image wimg.css({ 'margin-top': -((w.height() / 2) - (wa.height() / 2)) });？

之后定义边距的情况下显示这样的页面

Answer 1

从您的代码中可以看出，您希望section元素占据整个屏幕高度。

你不需要定位来做到这一点。 Viewport units现在有很好的支持，你可以将高度分配为100vh。

＆＃13;

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
main {
  clear: both;
  /* not required there are no floats */
}
main section {
  height: 100vh;
  border-bottom: 2px solid red;
}
main section div.container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  width: 100%;
}

＆＃13;

<main>
  <section class="fullscreen">
    <div class="container">
      <h1>Lorem Ipsum</h1>
      <p>Lorem ipsum dolor sit amet</p>
      <a href="#section2">Link</a>
    </div>
  </section>
  <section id="section2">
    <h3>Title</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </section>
</main>

＆＃13;

如何在绝对元素之后推送元素

1 个答案: