Question

我正在尝试使此布局正常工作，以便中间部分的内容在到达顶部（标题）面板时被剪切。

我不想用背景颜色填充顶部面板（隐藏内容），因为我想在页面上放置背景图像。我需要整个页面的滚动条，而不仅仅是内容div，因为它使它看起来像一个iframe（丑陋）。

代码如下。如果您滚动页面，文本将进入顶部面板。我希望它在到达顶部面板时被剪裁/屏蔽。

/* Reset body padding and margins */

body {
  margin: 0;
  padding: 0;
}


/* Make Header Sticky */

#header_container {
  border: 1px solid #666;
  height: 60px;
  left: 0;
  position: fixed;
  width: 100%;
  top: 0;
}

#header {
  line-height: 60px;
  margin: 0 auto;
  width: 940px;
  text-align: center;
}


/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/

#container {
  margin: 0 auto;
  overflow: auto;
  padding: 80px 0;
  width: 940px;
}

#content {}


/* Make Footer Sticky */

#footer_container {
  background: #eee;
  border: 1px solid #666;
  bottom: 0;
  height: 60px;
  left: 0;
  position: fixed;
  width: 100%;
}

#footer {
  line-height: 60px;
  margin: 0 auto;
  width: 940px;
  text-align: center;
}

<body>
  <html>

  <!-- BEGIN: Sticky Header -->
  <div id="header_container">
    <div id="header">
      Header Content
    </div>
  </div>
  <!-- END: Sticky Header -->

  <!-- BEGIN: Page Content -->
  <div id="container">
    <div id="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et
      mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat
      mi metus, a gravida quam.
      <br /><br /> Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus
      nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae
      diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus.
      <br /><br /> Aliquam lacinia lacus vel ante sagittis vestibulum fringilla sem accumsan. Phasellus eget dictum ipsum. Sed sed aliquam nisi. Nam vitae tempus tellus. Vestibulum convallis tellus diam, sed posuere lectus. Nulla diam velit, tristique
      in dignissim quis, porta eu nulla. Quisque quis nisl urna, id adipiscing quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer justo nisi, sollicitudin vitae porttitor eu, elementum ut ante.
      <br /><br /> Proin id odio nibh. Integer adipiscing fermentum tellus consectetur hendrerit. Sed porta, lectus sed dictum tempor, risus orci lacinia nulla, non rutrum neque tellus vitae velit. Quisque ut lectus eget nunc vulputate ultrices eget vitae
      metus. Vestibulum ac ligula urna, placerat scelerisque sem. Vestibulum porta interdum orci, quis porttitor arcu dictum pulvinar. Maecenas quis quam augue, accumsan consectetur arcu. Etiam quis augue quam, at auctor diam. Donec varius venenatis diam
      at pulvinar. Donec imperdiet elit id urna tincidunt commodo eget ut metus. Nam convallis malesuada dapibus. Aenean erat nunc, tempus id facilisis ac, dignissim nec urna.
      <br /><br /> Vestibulum at neque id libero ornare iaculis sed in libero. Nunc erat lectus, dignissim id congue ut, ornare sit amet nunc. Sed dignissim, massa tempus rutrum fringilla, justo lectus rutrum neque, at posuere orci nunc quis lacus. Phasellus
      semper turpis et arcu euismod eget pharetra nisi ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tempor, tellus sed interdum aliquet, dolor nibh hendrerit est, sed mattis tortor massa in
      lectus. Vivamus eu ligula nibh, vel consectetur quam. Quisque in erat vitae est feugiat porttitor. Pellentesque dui nulla, pulvinar sed feugiat ut, laoreet a urna. Aenean id elit quis quam eleifend luctus sit amet at dolor. Duis eu tellus at libero
      venenatis blandit. Mauris pharetra venenatis leo sed vehicula. Pellentesque rhoncus enim at nulla euismod tincidunt.
      <br /><br /> Maecenas imperdiet nibh massa. In id eros in massa posuere blandit non sit amet lacus. Phasellus vitae lectus pretium nunc aliquam ullamcorper. Pellentesque quis urna ligula, nec placerat magna. Sed nisl turpis, porta at tincidunt eget,
      vulputate sed magna. Nullam rutrum ipsum et lectus congue id rhoncus lectus bibendum. Vestibulum pretium velit id arcu rhoncus ac lobortis turpis tristique. Nullam viverra posuere leo sit amet dapibus. Fusce id imperdiet leo. Mauris et nisi diam.
      Aenean lobortis vulputate massa, ut pellentesque mauris porta in. Fusce sollicitudin, massa consectetur ultrices varius, dolor ligula ullamcorper velit, non varius lorem urna vel diam.
      <br /><br /> Morbi feugiat eleifend eros vel accumsan. Sed pellentesque vulputate libero eu mattis. Quisque sollicitudin aliquet ligula a molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pellentesque
      lacinia varius. Etiam dictum hendrerit enim in euismod. Phasellus cursus odio vitae mauris mattis sed tincidunt nisi imperdiet. Duis sit amet neque diam. Aliquam aliquet molestie orci non vulputate. Maecenas non rhoncus eros. Integer auctor nisl
      id elit posuere mollis. Nullam iaculis mattis justo sed accumsan.
      <br /><br /> Proin ut ultricies odio. Duis consequat porta leo, in dictum urna facilisis id. Quisque facilisis massa a risus sodales accumsan. Maecenas at diam odio. Proin sem ligula, ullamcorper vel convallis at, vehicula ut augue. Pellentesque
      euismod turpis eget metus fermentum adipiscing. Mauris nulla eros, imperdiet nec placerat eget, rutrum sed eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempor hendrerit porttitor. Lorem
      ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Praesent faucibus ultricies scelerisque. Vivamus mi enim, tincidunt et lacinia vitae, aliquet in risus. Suspendisse sed felis magna, non facilisis dolor. Quisque rutrum, risus
      quis sodales porta, sem magna ullamcorper odio, dictum aliquam felis sem et risus.
      <br /><br /> Aenean lacinia quam vitae leo gravida in pellentesque eros congue. Praesent sit amet eleifend mi. Sed non justo erat. Donec eleifend velit vel quam mollis tempus. Curabitur et est turpis. Etiam consectetur velit eget erat euismod tempus.
      Proin egestas venenatis velit ac volutpat. Sed id egestas mauris. Aliquam nulla mi, malesuada eu venenatis ac, fermentum ut eros. Ut nec consequat mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam
      eu magna urna, vel imperdiet sapien. Vestibulum lacinia porttitor mi, at molestie enim aliquet non. Sed rutrum, risus vel aliquam varius, nunc lectus porttitor velit, a sollicitudin magna quam et lacus. Praesent consectetur hendrerit arcu non viverra.
      <br /><br /> Nam sit amet faucibus augue. Proin arcu lacus, fermentum ac tincidunt vel, porttitor id libero. Sed at arcu at metus congue scelerisque. Maecenas quis erat magna, ac tempor erat. Curabitur mollis nisl in nunc fringilla eget interdum
      ante ullamcorper. Etiam eget magna sit amet nunc tincidunt tempus vitae vitae ligula. Morbi iaculis nisl id libero scelerisque tempor. Morbi tincidunt, felis non congue molestie, metus enim venenatis nunc, ac sodales nibh massa eget orci. Morbi
      mauris lorem, auctor nec porttitor eget, interdum at tortor. Sed malesuada nibh sed enim scelerisque id tristique neque rhoncus. Nulla vulputate purus a arcu egestas ultricies.
    </div>
  </div>
  <!-- END: Page Content -->

  <!-- BEGIN: Sticky Footer -->
  <div id="footer_container">
    <div id="footer">
      Footer Content
    </div>
  </div>
  <!-- END: Sticky Footer -->

</body>

</html>

Answer 1

您无需剪辑内容。使用background属性隐藏内容。

＆＃13;

$dateTime = Carbon::createFromDateTime(2017, 2, 23);

$startTime = $dateTime;

echo $dateTime->startOfYear();

＆＃13;

	/* Reset body padding and margins */
body { margin:0; padding:0; }

/* Make Header Sticky */
#header_container { border:1px solid #666; height:60px; left:0; position:fixed; width:100%; top:0; background-color: white; }
#header{ line-height:60px; margin:0 auto; width:940px; text-align:center; }

/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container { margin:0 auto; overflow:auto; padding:80px 0; width:940px; }
#content{}

/* Make Footer Sticky */
#footer_container { background:#eee; border:1px solid #666; bottom:0; height:60px; left:0; position:fixed; width:100%; }
#footer { line-height:60px; margin:0 auto; width:940px; text-align:center; }

＆＃13;

我在您的CSS中添加了<body> <html>  <div id="header_container"> <div id="header"> Header Content </div> </div>   <div id="container"> <div id="content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sit amet ipsum magna, et convallis sem. Nunc pulvinar magna vitae orci malesuada blandit. Proin ac purus dui. Suspendisse venenatis egestas egestas. Sed tincidunt diam et massa convallis et mollis enim malesuada. Nullam eget metus nunc, eget imperdiet urna. Quisque vehicula ipsum non sapien vulputate convallis quis quis ligula. Aenean gravida mollis blandit. Nullam lacus tortor, viverra a auctor ac, porta eget neque. Duis placerat mi metus, a gravida quam. <br /><br /> Nam ut augue mauris, at dapibus quam. Pellentesque eu nunc enim. Proin facilisis, dolor nec sollicitudin mattis, sem velit mollis sem, sagittis sagittis libero ante id nunc. Nam congue, mauris non porttitor convallis, purus elit faucibus nunc, in mollis sem lorem eu tortor. Cras nec justo id libero fringilla placerat ac et leo. Mauris ac vehicula odio. Cras augue erat, sodales vel porttitor ut, scelerisque nec justo. Praesent vitae lorem erat. Suspendisse elementum tortor vitae diam venenatis eget fermentum lacus suscipit. Quisque varius vulputate tempus. <br /><br /> Aliquam lacinia lacus vel ante sagittis vestibulum fringilla sem accumsan. Phasellus eget dictum ipsum. Sed sed aliquam nisi. Nam vitae tempus tellus. Vestibulum convallis tellus diam, sed posuere lectus. Nulla diam velit, tristique in dignissim quis, porta eu nulla. Quisque quis nisl urna, id adipiscing quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer justo nisi, sollicitudin vitae porttitor eu, elementum ut ante. <br /><br /> Proin id odio nibh. Integer adipiscing fermentum tellus consectetur hendrerit. Sed porta, lectus sed dictum tempor, risus orci lacinia nulla, non rutrum neque tellus vitae velit. Quisque ut lectus eget nunc vulputate ultrices eget vitae metus. Vestibulum ac ligula urna, placerat scelerisque sem. Vestibulum porta interdum orci, quis porttitor arcu dictum pulvinar. Maecenas quis quam augue, accumsan consectetur arcu. Etiam quis augue quam, at auctor diam. Donec varius venenatis diam at pulvinar. Donec imperdiet elit id urna tincidunt commodo eget ut metus. Nam convallis malesuada dapibus. Aenean erat nunc, tempus id facilisis ac, dignissim nec urna. <br /><br /> Vestibulum at neque id libero ornare iaculis sed in libero. Nunc erat lectus, dignissim id congue ut, ornare sit amet nunc. Sed dignissim, massa tempus rutrum fringilla, justo lectus rutrum neque, at posuere orci nunc quis lacus. Phasellus semper turpis et arcu euismod eget pharetra nisi ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean tempor, tellus sed interdum aliquet, dolor nibh hendrerit est, sed mattis tortor massa in lectus. Vivamus eu ligula nibh, vel consectetur quam. Quisque in erat vitae est feugiat porttitor. Pellentesque dui nulla, pulvinar sed feugiat ut, laoreet a urna. Aenean id elit quis quam eleifend luctus sit amet at dolor. Duis eu tellus at libero venenatis blandit. Mauris pharetra venenatis leo sed vehicula. Pellentesque rhoncus enim at nulla euismod tincidunt. <br /><br /> Maecenas imperdiet nibh massa. In id eros in massa posuere blandit non sit amet lacus. Phasellus vitae lectus pretium nunc aliquam ullamcorper. Pellentesque quis urna ligula, nec placerat magna. Sed nisl turpis, porta at tincidunt eget, vulputate sed magna. Nullam rutrum ipsum et lectus congue id rhoncus lectus bibendum. Vestibulum pretium velit id arcu rhoncus ac lobortis turpis tristique. Nullam viverra posuere leo sit amet dapibus. Fusce id imperdiet leo. Mauris et nisi diam. Aenean lobortis vulputate massa, ut pellentesque mauris porta in. Fusce sollicitudin, massa consectetur ultrices varius, dolor ligula ullamcorper velit, non varius lorem urna vel diam. <br /><br /> Morbi feugiat eleifend eros vel accumsan. Sed pellentesque vulputate libero eu mattis. Quisque sollicitudin aliquet ligula a molestie. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pellentesque lacinia varius. Etiam dictum hendrerit enim in euismod. Phasellus cursus odio vitae mauris mattis sed tincidunt nisi imperdiet. Duis sit amet neque diam. Aliquam aliquet molestie orci non vulputate. Maecenas non rhoncus eros. Integer auctor nisl id elit posuere mollis. Nullam iaculis mattis justo sed accumsan. <br /><br /> Proin ut ultricies odio. Duis consequat porta leo, in dictum urna facilisis id. Quisque facilisis massa a risus sodales accumsan. Maecenas at diam odio. Proin sem ligula, ullamcorper vel convallis at, vehicula ut augue. Pellentesque euismod turpis eget metus fermentum adipiscing. Mauris nulla eros, imperdiet nec placerat eget, rutrum sed eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec tempor hendrerit porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat. Praesent faucibus ultricies scelerisque. Vivamus mi enim, tincidunt et lacinia vitae, aliquet in risus. Suspendisse sed felis magna, non facilisis dolor. Quisque rutrum, risus quis sodales porta, sem magna ullamcorper odio, dictum aliquam felis sem et risus. <br /><br /> Aenean lacinia quam vitae leo gravida in pellentesque eros congue. Praesent sit amet eleifend mi. Sed non justo erat. Donec eleifend velit vel quam mollis tempus. Curabitur et est turpis. Etiam consectetur velit eget erat euismod tempus. Proin egestas venenatis velit ac volutpat. Sed id egestas mauris. Aliquam nulla mi, malesuada eu venenatis ac, fermentum ut eros. Ut nec consequat mi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam eu magna urna, vel imperdiet sapien. Vestibulum lacinia porttitor mi, at molestie enim aliquet non. Sed rutrum, risus vel aliquam varius, nunc lectus porttitor velit, a sollicitudin magna quam et lacus. Praesent consectetur hendrerit arcu non viverra. <br /><br /> Nam sit amet faucibus augue. Proin arcu lacus, fermentum ac tincidunt vel, porttitor id libero. Sed at arcu at metus congue scelerisque. Maecenas quis erat magna, ac tempor erat. Curabitur mollis nisl in nunc fringilla eget interdum ante ullamcorper. Etiam eget magna sit amet nunc tincidunt tempus vitae vitae ligula. Morbi iaculis nisl id libero scelerisque tempor. Morbi tincidunt, felis non congue molestie, metus enim venenatis nunc, ac sodales nibh massa eget orci. Morbi mauris lorem, auctor nec porttitor eget, interdum at tortor. Sed malesuada nibh sed enim scelerisque id tristique neque rhoncus. Nulla vulputate purus a arcu egestas ultricies. </div> </div>   <div id="footer_container"> <div id="footer"> Footer Content </div> </div>  </body> </html>，现在文本隐藏在标题元素的白色背景后面。

您还可以通过修复div大小并设置其他一些css属性（例如background-color: white;）来剪切文本，这将导致滚动出中心div的任何内容从视图中隐藏。

如何在滚动页面上剪辑div？

1 个答案: