html - 溢出自动滚动条显示在整个页面上而不是仅显示在

Question

我有一个 header 和 main html 标签。 header 是一个带有 position: sticky 和 top: 0 的导航栏，main 是一个内容容器溢出:自动。我希望滚动条仅在 main 元素上可见，但在 header 上也可见。

如何只使 main 标签的内容可滚动？

.main {
  overflow: auto;
}

.header {
  width: 100%;
  height: 70px;
  background-color: red;
  position: sticky;
  top: 0;
}

<header class='header'></header>
<main class='main'>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et felis quis risus vehicula rhoncus nec sed arcu. Nunc ipsum sapien, lacinia vitae dolor at, ultricies semper augue. Proin ultrices id magna eget consectetur. Phasellus euismod felis elit,
    in varius lectus malesuada ac. Proin venenatis interdum ex sit amet vehicula. Sed feugiat tristique ante sed luctus. Proin lorem lacus, iaculis a nisl posuere, ullamcorper molestie neque. Fusce venenatis tellus non tellus dignissim, a lacinia augue
    volutpat. Sed varius nulla in lectus suscipit, vel dapibus mi eleifend. Cras non urna dignissim, convallis velit eget, fermentum leo. Curabitur in efficitur ante. Duis hendrerit purus ut felis porttitor, quis rutrum ipsum consectetur. Nulla scelerisque
    turpis risus, sit amet commodo tortor porttitor nec. Mauris dignissim molestie urna quis consectetur. Nulla elementum magna libero, in egestas felis ultricies nec. Phasellus lacinia dolor at tellus tincidunt venenatis. Etiam lorem nibh, molestie vitae
    nisi eu, sodales feugiat libero. Nunc quis porta erat. Pellentesque luctus efficitur lacus sed dapibus. Etiam malesuada sodales augue lacinia pulvinar. Integer non consectetur nisi, non convallis ex. Aliquam erat volutpat. Integer ornare commodo dapibus.
    Mauris nunc urna, aliquet vulputate lacus sit amet, mollis laoreet nisi. Donec turpis nibh, sagittis id ipsum ut, laoreet convallis erat. Fusce quis enim dapibus, pulvinar neque sit amet, tincidunt nulla. Proin nisl arcu, dapibus maximus leo et, imperdiet
    iaculis nunc. Duis placerat, orci et congue accumsan, lorem sem aliquet ex, nec suscipit odio mauris eu mauris. Praesent nec risus molestie, faucibus urna vitae, posuere sapien. Ut ac condimentum ante. Aliquam ullamcorper eget nisi vel lobortis. Donec
    pulvinar aliquam tellus, at sodales nisi tincidunt elementum. Ut elementum mollis libero cursus porta. In feugiat ligula non nisi luctus, non euismod urna rhoncus. Nunc vitae nunc at lectus elementum varius vel sit amet orci. Aliquam sodales id odio
    vitae volutpat. Pellentesque cursus, lacus vel hendrerit sollicitudin, metus purus dapibus turpis, quis faucibus ex tortor ac magna. Nulla scelerisque cursus turpis. Nunc ullamcorper justo sit amet justo ultrices posuere. Integer faucibus, orci ac
    efficitur interdum, sem velit euismod neque, et facilisis mi enim pellentesque turpis. Nullam malesuada ex at neque varius, porta molestie metus tempor. Praesent interdum turpis eros, sit amet mollis odio tincidunt vitae. Aliquam diam mauris, consequat
    vel tortor at, pulvinar mattis metus. Ut dictum ornare lectus at interdum. Suspendisse potenti. Suspendisse tincidunt lacus vitae felis commodo accumsan. Quisque congue nunc quis imperdiet iaculis. Cras faucibus felis eu porta laoreet. Nunc aliquet
    quam ut massa malesuada, a ultrices orci accumsan. Ut eu ullamcorper eros, nec ultrices libero. Donec varius odio quis turpis rutrum, id ornare mi lacinia. Pellentesque commodo magna nisi, nec tincidunt arcu tincidunt id. Ut tellus neque, bibendum
    vel fringilla lacinia, tincidunt a sem. Donec pretium ligula elit, eget placerat mi posuere non. Fusce sed malesuada felis, in lacinia diam. Mauris et orci est. Ut in justo pulvinar, rutrum ligula pellentesque, euismod eros. Pellentesque eu convallis
    quam. Duis hendrerit nunc vitae condimentum condimentum. Curabitur et condimentum nisi, id molestie neque. Morbi vitae efficitur lorem, sit amet placerat nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam eros eros, pulvinar
    et imperdiet at, faucibus nec augue. Praesent malesuada viverra enim eget mattis. Phasellus volutpat, est ac sodales finibus, nulla ex tristique felis, quis tempus mauris diam ac orci. Proin est risus, egestas id pellentesque sodales, facilisis vel
    massa. Maecenas id erat malesuada, efficitur mauris ut, molestie lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vestibulum erat in ipsum tincidunt scelerisque. Praesent malesuada accumsan
    mattis. Nunc quis sodales diam. Sed in consequat urna, vitae efficitur ex. Suspendisse viverra ex dolor, id vehicula est eleifend non. Aliquam et velit et diam aliquet iaculis quis quis tellus. Sed bibendum mollis dolor sed mollis. Cras et turpis
    mollis, eleifend augue eget, pretium quam. Vivamus luctus, justo quis molestie volutpat, sapien libero facilisis mi, eget vestibulum dui odio at ligula. Fusce interdum, sem non dapibus rutrum, lorem libero blandit lacus, quis molestie purus eros ut
    lacus. Sed in blandit ante. Maecenas egestas ante posuere, ultricies nisi at, dapibus mauris. Praesent hendrerit tempus est, quis ornare lectus pellentesque fringilla. Duis egestas semper pretium. Morbi finibus, velit sit amet suscipit condimentum,
    sem felis posuere mi, condimentum iaculis ipsum leo a velit. Quisque semper pulvinar quam, a pharetra quam laoreet non. Fusce faucibus sed ligula et porta. Nulla tempus vitae ante ut laoreet. Ut nec ipsum venenatis, ullamcorper magna eget, ullamcorper
    leo. Vestibulum sed magna eleifend, pulvinar tellus ac, aliquet nunc. Suspendisse cursus lacinia felis, id aliquam quam ultrices in. Phasellus urna leo, aliquam eu nunc sit amet, fringilla ornare velit. Vestibulum ullamcorper risus vel risus tincidunt
    mollis. Quisque rhoncus commodo fermentum. Suspendisse vulputate urna et eleifend suscipit. Quisque non neque a neque suscipit lacinia ac vel lectus. Phasellus tincidunt, ante ac dapibus varius, odio lorem mollis risus, mollis egestas lectus massa
    in ligula. Phasellus vestibulum sem et sem convallis luctus. Nulla eleifend mollis libero, sit amet mollis erat suscipit et. Suspendisse laoreet vulputate massa, eget ultricies urna laoreet elementum. Curabitur auctor et ipsum viverra rhoncus. In
    ex metus, ultrices ac eros a, ornare euismod augue. Nullam ultricies pulvinar nulla. Nullam scelerisque tortor at sapien consectetur vehicula. In ac varius diam. Nam non pulvinar nibh. Nam fermentum enim nisi, nec faucibus nisi rhoncus in. Morbi ac
    elit mollis, mattis ex non, tempus turpis. Nam varius volutpat luctus. Nunc a tortor id arcu accumsan mattis quis in elit. Ut fringilla nibh at erat faucibus, vitae rhoncus erat rhoncus. Duis gravida quis neque nec dapibus. Proin vel sapien placerat
    nulla auctor posuere quis vitae justo. Donec sollicitudin sodales mi, et consectetur ligula dapibus ut. Maecenas quis odio ullamcorper erat vehicula pretium. Etiam eu erat neque. Sed interdum nibh vulputate faucibus pretium. Pellentesque sit amet
    dolor sollicitudin, malesuada libero a, interdum nisl. Nunc convallis consequat tempor. Phasellus posuere fringilla mollis. Cras ac neque magna. Phasellus a nunc rutrum, tempor orci in, lobortis lorem. Nullam cursus risus ut neque feugiat, et consectetur
    justo mollis. Nullam et elementum ipsum. Fusce cursus, tellus quis auctor ornare, felis mauris mollis odio, quis porttitor urna metus at elit. Praesent rutrum non nisl vel euismod. In condimentum eros nunc, ut vehicula mi pretium a. Nullam eget fermentum
    eros. Pellentesque dapibus sollicitudin volutpat. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer eget urna id libero convallis lacinia quis eu lectus. Maecenas pellentesque malesuada leo, at imperdiet
    massa. Pellentesque ut euismod eros, ut pretium lacus. Sed lacinia mauris eu nibh dignissim, ut sodales augue blandit. Mauris dui ipsum, porta quis feugiat a, tincidunt vitae libero. Duis et vestibulum nunc. Sed ac orci nulla. Duis nec turpis mauris.
    Nam ipsum odio, ornare in lacinia sed, feugiat quis quam. Nunc neque justo, consequat in massa et, ultrices dictum sapien. Mauris aliquam justo a nibh semper condimentum nec tristique diam. Sed imperdiet nulla ut mollis feugiat. Maecenas imperdiet
    tempus posuere. Donec neque dolor, venenatis non odio quis, lacinia tempus enim. Etiam venenatis eros sed imperdiet laoreet. Sed id lacinia arcu. Sed luctus suscipit justo et gravida. Quisque sed luctus velit, non interdum metus. Morbi ultrices vehicula
    enim, sit amet ultricies tellus dapibus non. Proin ac odio in neque pharetra dignissim. Proin id nisl vitae ante ultrices consequat. Nunc porta pretium convallis. Nunc maximus quam ipsum. Suspendisse placerat tortor nec lectus interdum elementum.
    Ut a ultrices mauris, et faucibus augue. Maecenas tempus, tortor at scelerisque porttitor, neque lectus varius lorem, ac convallis erat erat quis massa. Nulla non imperdiet nulla. Proin luctus ipsum vitae pulvinar mattis. Aenean lorem arcu, bibendum
    sed aliquam quis, efficitur sed odio. Vestibulum fermentum vehicula urna at sagittis. Praesent massa neque, blandit in libero eget, tincidunt rhoncus ipsum. Aliquam erat volutpat. Cras neque tortor, laoreet vel erat vitae, mattis sagittis turpis.
    Quisque nisl massa, pulvinar id cursus vitae, blandit id elit. Aenean placerat ligula eu gravida molestie. Sed at risus aliquet, viverra lacus eget, congue leo. Vestibulum sit amet odio nec mi eleifend pulvinar. Aliquam dui risus, consequat at vehicula
    vel, semper eu neque. Nunc convallis eu arcu quis mattis. Sed at sagittis enim. Donec in sem rhoncus, tincidunt diam ac, facilisis mi. Donec bibendum, risus sodales faucibus imperdiet, lacus magna ullamcorper metus, a lobortis purus nulla molestie
    nisi. Suspendisse potenti. Donec maximus a odio accumsan feugiat. Morbi finibus ullamcorper tellus, sed viverra odio commodo in. Praesent tincidunt mauris a mauris tristique fermentum. Nullam commodo commodo imperdiet. Suspendisse congue congue tortor,
    non vulputate lacus placerat nec. Donec sodales mauris ut viverra sodales. Fusce congue nulla in condimentum laoreet. Nulla non leo vitae risus blandit elementum. Nam at vehicula massa. In rutrum dignissim arcu non placerat. Quisque scelerisque vel
    diam eu placerat. Quisque massa purus, euismod non finibus nec, gravida tempor mauris. Integer sagittis id tellus vestibulum volutpat. Curabitur varius a diam nec lacinia. Cras sed ante vel dui efficitur tincidunt sed vitae sem. Sed quis felis posuere,
    volutpat libero ac, cursus lacus. Morbi dignissim porttitor rutrum. Nunc maximus libero libero, nec hendrerit nisl tincidunt sed. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia curae; Curabitur nulla ex, sagittis ac consequat sed, vehicula vel tellus. Sed turpis ex, posuere at metus et, posuere dapibus dolor. Nullam risus orci, ultrices a consequat at, consequat non nulla.
    Vestibulum nec pretium tortor. Nullam tempus augue eu massa suscipit vehicula. Sed eu efficitur velit. Nunc quis elit sit amet nibh rutrum malesuada. Nulla in lectus id felis luctus consectetur. In hac habitasse platea dictumst. Quisque at faucibus
    felis, id ullamcorper dolor. Nulla facilisi. Duis in dui fermentum, congue erat non, eleifend libero. Ut molestie aliquam nisi, vel euismod velit rutrum in. In turpis tellus, posuere eget libero eu, laoreet cursus lorem. Nulla faucibus purus nunc,
    non pharetra nibh vehicula non. Integer lectus diam, fermentum at faucibus eu, convallis eget justo. In at orci auctor mi dictum tristique quis id quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec
    vitae velit nec ex commodo vulputate vitae non mi. Sed mattis tristique libero, sed eleifend quam bibendum at. Pellentesque consectetur vestibulum ligula, quis interdum lacus volutpat vel. Curabitur accumsan neque ac hendrerit lacinia. Sed commodo
    ante eget sagittis lacinia. Ut ac mollis augue, vitae molestie ex. Nam commodo auctor ligula, sit amet sodales nulla. Phasellus vulputate quam sit amet massa egestas efficitur posuere eu ligula. Mauris sed mauris vitae libero pulvinar interdum. Phasellus
    tincidunt augue eu sem ultricies, non pharetra magna consequat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas lobortis elit nec diam tincidunt facilisis. Aliquam nec ex non ex vestibulum facilisis.
    Nullam semper tristique blandit. Donec auctor sagittis sollicitudin. Vivamus non enim elementum, hendrerit nisi ut, eleifend magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec tincidunt semper sem, at finibus est consectetur
    eget. Mauris ut auctor lectus. Aenean vulputate vehicula diam. Proin aliquet lectus et enim malesuada auctor. Nunc scelerisque semper nunc, quis feugiat erat tempus nec. Morbi suscipit sagittis ligula, at aliquam velit congue sed. Nam eu dignissim
    ex. Nunc quis dolor vel leo imperdiet pretium at sed mauris. Suspendisse tempor orci eu tincidunt suscipit. Aenean sed tincidunt sem. Nam sit amet nisl tellus. Praesent porttitor, massa nec molestie blandit, nulla magna cursus enim, sed elementum
    libero augue et metus. Integer at lacus ac erat convallis lacinia. Suspendisse faucibus leo orci, sagittis molestie ex condimentum eu. Nunc et lorem sollicitudin, elementum enim eu, vestibulum nibh. Curabitur ut mattis neque. Cras sit amet porttitor
    odio. Etiam iaculis sodales suscipit. Nulla aliquet malesuada felis, vel efficitur dolor cursus in. Donec sagittis tortor in diam bibendum, vel consequat neque luctus. Suspendisse pharetra nulla eget velit ultrices, eget molestie dolor semper. Suspendisse
    aliquam, dolor sit amet consectetur fringilla, ipsum sapien scelerisque lacus, at tincidunt turpis tellus a tortor. Duis orci magna, scelerisque ac lorem eget, maximus gravida lectus. Nullam posuere urna nec velit aliquam luctus ut eget ipsum. Phasellus
    vitae tortor facilisis libero auctor placerat non et felis. Vivamus malesuada, diam in iaculis congue, elit massa faucibus elit, non finibus magna eros sit amet ante. Etiam purus enim, convallis id fringilla nec, vulputate et ligula. Quisque orci
    orci, volutpat vitae sem a, mollis pretium enim. In auctor imperdiet pretium. Mauris sit amet turpis sed orci ultrices varius. Aliquam luctus neque non erat cursus, eu iaculis tortor fermentum. Vestibulum vehicula arcu sit amet nisl dignissim, non
    placerat urna accumsan. Praesent ac ultrices sapien, sit amet laoreet ipsum. Donec faucibus eget metus non efficitur. Proin dui justo, viverra id aliquet eget, sodales vel mauris. Ut scelerisque, est sit amet consequat imperdiet, purus quam tempor
    elit, nec blandit odio lacus vel elit. Maecenas magna erat, egestas at turpis sit amet, viverra porta justo. In eget odio lacus. Proin ac felis viverra, mattis velit ut, hendrerit lectus. Aenean in nisi at sem placerat rutrum. Pellentesque commodo
    condimentum maximus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel mauris sapien. Pellentesque consectetur mi at maximus dapibus. Maecenas egestas sed tellus vitae varius. Praesent lobortis erat felis, ut vehicula ante rutrum
    ac. Ut sodales lectus ut felis ultricies accumsan. Fusce et justo et metus sagittis rutrum. Fusce posuere felis sem, nec tristique neque cursus ac. Praesent facilisis neque sed ante fermentum aliquet. Quisque sollicitudin tortor ut molestie elementum.
    Morbi efficitur leo efficitur ultricies vulputate. Quisque venenatis, nisl lacinia convallis efficitur, massa magna semper est, quis dapibus diam orci non justo. Sed fermentum lacinia ex, sit amet cursus sem interdum ut. Aliquam tempus dolor id lectus
    imperdiet, sit amet gravida lacus porttitor. Maecenas id enim ex. Nulla nibh orci, consequat et mollis quis, porttitor volutpat enim. Cras vitae tortor mauris. Praesent at elit ut turpis cursus condimentum. Praesent dictum viverra viverra. Etiam eu
    fermentum lacus. Aenean viverra consectetur libero, vel ornare enim mollis eget. Morbi tempor vitae purus eget aliquam. Proin quis eleifend enim, ut consectetur nunc. Nullam porta orci odio, quis sodales velit faucibus vitae. Cras auctor nibh consectetur
    leo gravida ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas in nibh a magna porttitor tempor. Nam feugiat non tellus ac aliquam. Aenean ornare varius lobortis. Aliquam erat volutpat. Pellentesque
    efficitur orci vel ante tempor, ut laoreet justo condimentum. Phasellus faucibus eget quam nec egestas. Donec aliquet elementum metus a pellentesque. Nam sed volutpat libero. Curabitur nec ante in arcu sollicitudin accumsan eu eget sem. Fusce rhoncus
    justo at dui mattis fringilla. Integer in nunc a leo lacinia ornare rutrum vitae orci. Praesent imperdiet placerat turpis non maximus. Etiam in lacinia ante. Cras vulputate ut ex et placerat. Suspendisse erat enim, accumsan et fermentum sit amet,
    ullamcorper sit amet erat. Quisque at pretium nisl. Sed ex lacus, eleifend vitae fringilla in, fringilla eget nulla. Proin sagittis urna eu felis ultricies, a finibus nisl finibus. Nullam efficitur, dui a bibendum tempor, massa augue fringilla metus,
    vel sodales lorem mauris id ligula. Nunc consequat tincidunt iaculis. Etiam ultrices augue quis leo convallis, sed dignissim tellus eleifend. Donec eget fringilla urna. Sed fermentum, risus vel molestie euismod, lorem enim porta justo, non ullamcorper
    est tellus et magna. Nam mollis, purus vel finibus malesuada, augue urna lobortis ipsum, vitae consequat velit nisl vitae tortor. Quisque elementum suscipit ligula quis scelerisque. Aliquam erat volutpat. Praesent ipsum ex, pretium molestie odio et,
    tempus bibendum eros. Aliquam vulputate egestas dignissim. Morbi est nisl, auctor ac tellus non, cursus eleifend nulla. Pellentesque imperdiet risus non lorem eleifend iaculis. Fusce ornare elementum orci nec volutpat. Sed iaculis justo libero, vulputate
    finibus orci euismod dapibus. Duis bibendum eros sed sem euismod suscipit. Vivamus accumsan blandit ante quis placerat. Aliquam lacus nunc, tristique at venenatis non, molestie id arcu. Donec metus dolor, tempor non feugiat in, dignissim eu metus.
    Donec lacinia auctor eros scelerisque blandit. Maecenas condimentum ac nisl sed dignissim. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed efficitur ex turpis, semper interdum felis consectetur pulvinar.
    Fusce aliquam sagittis varius. Fusce nisl dui, bibendum ut ipsum eget, scelerisque interdum odio. Donec odio nulla, interdum eget eleifend quis, eleifend nec quam. Donec efficitur purus sapien. Aliquam sollicitudin ultricies diam non imperdiet. Cras
    porttitor dapibus tortor, vitae finibus sapien pellentesque vitae. Suspendisse rutrum ex metus. Duis egestas cursus porttitor. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aliquam quis ornare justo. Aliquam pulvinar, ante commodo
    tristique dignissim, augue est elementum nibh, nec pellentesque enim lorem at nisl. In et purus eget massa maximus egestas. Donec pretium nibh lorem, vitae imperdiet urna viverra nec. Donec facilisis pharetra fringilla. Pellentesque sed sem quis orci
    egestas consequat. Quisque tempor libero sed sapien placerat, sed scelerisque augue commodo. Nam non euismod dui, vitae pharetra velit. Sed porttitor, libero ut porttitor sodales, urna nisi scelerisque orci, non dapibus libero lorem non ligula. Aenean
    euismod sed lacus ac ornare. Morbi elementum orci in varius semper. Sed non elit dui. Nulla tempus turpis finibus, fermentum orci vitae, venenatis dui. Duis sollicitudin, neque in porttitor ultricies, dolor mauris tincidunt ex, quis rhoncus nibh elit
    rutrum nisi. Suspendisse sagittis eget felis a sodales. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc a quam ex. Vestibulum viverra, metus in ornare vestibulum, diam nibh molestie mi, ac interdum mi lorem eget ex. Praesent ac nisi
    volutpat, porttitor ex eget, iaculis magna. Nullam tristique turpis quis sapien varius hendrerit. Cras tristique tincidunt diam, sit amet ullamcorper odio pretium vitae. Mauris nec consectetur nunc. Donec tincidunt, augue non commodo ullamcorper,
    lectus tortor volutpat urna, non hendrerit purus massa ut turpis. Nullam ultricies velit in nunc condimentum consectetur. Quisque cursus libero elementum sollicitudin porttitor. Pellentesque eu tincidunt velit. Sed vel suscipit diam. Vivamus nunc
    risus, finibus id sodales eget, auctor in diam. Ut nec quam lectus. Ut interdum mi non nunc varius ultricies. Donec maximus bibendum ante, nec eleifend orci eleifend et. Nulla sit amet imperdiet mi. Class aptent taciti sociosqu ad litora torquent
    per conubia nostra, per inceptos himenaeos. Nulla id consectetur dui, non pellentesque mauris. Aliquam id ipsum a dolor dignissim aliquam. Donec vel leo vel arcu sodales pretium. Sed molestie elementum arcu, sit amet convallis tortor pretium vel.
    Donec dignissim nisl et sollicitudin vehicula. Proin eu elit dui. Morbi sit amet libero hendrerit, aliquam neque non, ultrices mi. Nunc in elit velit. Duis dictum quam vitae neque congue, nec ornare erat tincidunt. Duis tincidunt ipsum tellus, non
    dictum justo fringilla rhoncus. Quisque condimentum lacinia libero, et tristique tellus dapibus eget. Nulla tincidunt congue laoreet. Vestibulum facilisis quam ut bibendum convallis. Mauris et quam facilisis, vehicula augue id, egestas massa. Nam
    ultrices sem ac sem faucibus molestie. Nulla facilisi. Quisque eleifend placerat ipsum. Fusce ultricies, erat at pellentesque feugiat, eros sem sodales lorem, id cursus diam nisi vel dolor. Pellentesque finibus enim massa, et condimentum velit convallis
    vel. Suspendisse aliquam odio vitae quam fermentum, euismod semper justo facilisis. Fusce facilisis aliquet lectus, elementum tincidunt risus dapibus vel. Donec consectetur libero vitae diam convallis gravida. Etiam ornare consectetur metus, at aliquet
    augue porta et. Ut lobortis leo sit amet laoreet placerat. Fusce varius ligula sed finibus pulvinar. Ut id pulvinar orci, vitae mattis nisl. Vestibulum id tristique eros. Quisque et est ut diam eleifend interdum non quis libero. Phasellus sit amet
    fringilla enim. Praesent pulvinar posuere ullamcorper. Etiam euismod euismod lectus in facilisis. Duis sodales quam non purus dapibus, vel pharetra ipsum auctor. Vivamus at laoreet nibh. Mauris mollis ligula in libero volutpat, id tempus quam commodo.
    Fusce quis erat ac odio sagittis faucibus. Duis ut molestie dolor, sed dignissim ligula. Phasellus sit amet ultrices sapien. Etiam sed tellus quis nibh tincidunt vehicula et at urna. Donec in magna at eros rhoncus bibendum ut quis nisi. Pellentesque
    euismod tortor ac hendrerit posuere. Phasellus accumsan consequat pretium. Nulla ex sem, cursus at ultrices quis, euismod non mi. Aliquam pretium viverra felis a consectetur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
    ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse potenti. Vestibulum semper convallis maximus. Vivamus sit amet pharetra sapien. Suspendisse turpis purus, suscipit eu augue at,
    imperdiet bibendum enim. Nam faucibus euismod ullamcorper. Aliquam vitae fermentum mauris. Suspendisse tempor blandit iaculis. Praesent molestie et nisl et faucibus. Donec finibus tellus et bibendum sodales. Phasellus commodo erat elit, in semper
    ipsum posuere sed. Sed gravida facilisis sem et lobortis. Morbi sed luctus augue, in pharetra mauris. Suspendisse consequat sem id ante rhoncus venenatis. Nulla facilisi. In faucibus venenatis mauris at egestas. Integer hendrerit dui non lorem faucibus
    convallis. Fusce accumsan felis et sapien rutrum lacinia. Proin facilisis pulvinar sollicitudin. Aliquam interdum mauris vel venenatis malesuada. Pellentesque mollis, elit id consectetur auctor, risus arcu semper metus, vel viverra eros nibh id nisi.
    Nam commodo auctor augue sit amet condimentum. Aenean sed elit vitae dui tempor tempus. Nam commodo tincidunt enim at egestas. Nulla pretium sem sit amet magna semper, at facilisis dolor convallis. Nunc eget risus blandit, fermentum mi eget, porta
    risus. Sed semper viverra elit quis efficitur. Nulla varius nibh placerat arcu tincidunt, quis pretium tortor cursus. Vestibulum facilisis sodales pharetra. Curabitur justo nibh, consectetur a mauris sit amet, pharetra sodales orci. Integer bibendum
    diam ac justo finibus hendrerit. Donec et placerat nisl. Suspendisse fermentum consequat orci quis blandit. Sed rhoncus luctus metus, in malesuada mi molestie in. Nulla non egestas nunc. Aenean ultrices lectus sit amet enim consectetur congue. Cras
    eu nisi et nisl mollis sodales. Integer nec dignissim turpis.
  </p>
</main>

感谢您的帮助。

Answer 1

发生的情况是滚动适用于整个 body ，因为 <main> 的高度不受限制。您可以使用 calc 将 main 的高度限制为正确的值CSS 函数:

.main {
        overflow: scroll;
        height: calc(100vh - 70px);
      }

因此它将占用 100% 的高度减去 <header> 的高度.

为了简短起见，我不会在这里发布完整的代码片段，但您可以在 codepen 上查看它