Почему position: sticky в классе .header-top не работает?

90
22 июня 2021, 09:40

Изучаю тему позиционирования элементов, застрял на позиции sticky.
По задуму шапка сайта должна прилипнуть при скроле. Указал классу .header-top позицию sticky.top:0, но ничего не работает.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="header">
      <div class="container">
        <div class="header-top bc">
          <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo
            omnis sit pariatur beatae, saepe hic non, nulla cupiditate fugit
            aliquam reiciendis nihil, velit minima expedita? Inventore debitis
            culpa sunt tenetur? Iure, vel est dolore consequatur adipisci
            nostrum quibusdam, sit mollitia quod perferendis eos quasi
            accusantium. Excepturi ad animi at nulla! Accusantium enim odit
            atque numquam. Eaque maiores perferendis provident fugiat quisquam
            sunt, impedit pariatur, natus eveniet non suscipit numquam
            exercitationem maxime modi, incidunt facilis aperiam vitae nulla
            nisi? Excepturi doloribus ipsam odit at sequi! Doloribus placeat
            itaque, ipsam, repellendus harum ratione delectus, explicabo tempore
            mollitia nam veritatis eveniet possimus necessitatibus.
          </p>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus
            accusantium eligendi blanditiis iste, animi possimus tempora earum
            velit sed rem nam neque consectetur! Odio sequi quam, alias delectus
            perspiciatis doloremque tenetur deleniti harum, reprehenderit
            laboriosam eos sed. Cupiditate, laborum. Quibusdam neque ullam
            veniam aperiam ad deserunt perspiciatis consequuntur quae magnam
            eaque, asperiores blanditiis delectus eum nobis harum porro maiores
            quis placeat repudiandae tempora itaque consectetur! Iste enim
            quaerat, nesciunt sequi quas veniam ab dicta voluptas vitae laborum
            fuga aut! Voluptatum quibusdam similique numquam omnis nam
            asperiores perferendis. Sequi laudantium omnis repellat molestias
            eaque quod quas, sed impedit quis repellendus eos commodi unde,
            consequatur ipsam corporis possimus nam. Harum maiores deserunt
            mollitia eos et libero esse debitis quaerat corrupti deleniti modi
            fugit quos amet, cum ducimus facilis, totam ut corporis, quisquam
            nesciunt commodi eum blanditiis minus. Aperiam ex quos tenetur,
            dignissimos ab eaque dolor iste facere libero fuga nesciunt illum
            vel quia, hic vero, ratione eligendi quisquam voluptatum voluptas?
            Porro vitae distinctio repudiandae repellendus impedit est eos
            saepe, tempore totam quod unde libero sit velit expedita temporibus
            blanditiis, eum dolor! Laboriosam ullam minus dolorem! Laborum
            dolorum vero eum ipsam hic eaque labore, delectus reiciendis
            voluptate maiores, ad ex dolor aperiam error?
          </p>
          </p>
        </div>
      </div>
    </div>
    <div class="main">
      <div class="container">
        <div class="main-left bc">
          <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint reiciendis id ipsum, dolorem magnam fuga. Molestias aut obcaecati, saepe adipisci fuga voluptas officiis facilis fugit nam dolorum excepturi nulla omnis quidem amet iste repellat consectetur quis tempore culpa. Libero eos consectetur quae fugiat sequi, est itaque qui veritatis illum harum sit! Incidunt voluptate vero ipsum asperiores ex, sint consectetur ducimus nesciunt. Quod, nesciunt tempore? Dolor expedita vero explicabo necessitatibus perspiciatis ea blanditiis sapiente corrupti voluptate, temporibus ipsa iure autem, dolore sunt quaerat repellendus aliquid est. Deleniti totam officia dolorum quibusdam sit eum provident vel explicabo, qui autem! Eos numquam assumenda, magnam ad praesentium suscipit dolorum nesciunt sit quam deleniti debitis. Esse saepe laudantium a quasi quam voluptas illo, ut possimus pariatur molestiae eaque ipsa omnis vero et aliquid. Incidunt rem rerum aut molestias suscipit dolorem alias! Saepe exercitationem dignissimos ipsam, maxime voluptates mollitia blanditiis, dolore alias, ab iste dolorem! Odio facere asperiores excepturi deleniti quod dolorum molestias repellat assumenda, fugiat, quia consequuntur veritatis pariatur at obcaecati laudantium corrupti. Reiciendis quasi maiores laborum voluptates perferendis natus fugiat repudiandae unde consequuntur hic magni, minima iste harum omnis, iure quibusdam. Perspiciatis quo tenetur delectus sint tempore, repellendus, deleniti optio aperiam asperiores a exercitationem in, ab fuga voluptate beatae iure itaque. Ullam quos asperiores modi ipsum, quidem ducimus explicabo harum voluptatibus perspiciatis at dolor accusantium libero incidunt? Distinctio quo doloremque, enim consequuntur saepe quos alias odit libero a numquam delectus nisi quod, nemo, ex laudantium illo itaque qui recusandae in voluptatibus ducimus rem beatae? Qui commodi voluptates tenetur praesentium ipsum excepturi voluptate laudantium sed distinctio quos quae, exercitationem vitae ratione maxime vel optio repellendus eius error dignissimos ullam non iure fugiat. Ipsam illo incidunt necessitatibus nesciunt beatae placeat iusto itaque, laudantium distinctio. Illo ad natus mollitia incidunt? Nesciunt sed, sequi dicta architecto deserunt provident.</p>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae
            laudantium reprehenderit eum magnam quidem! Itaque, nobis alias
            excepturi, accusantium delectus iusto id voluptatem harum,
            repellendus laborum blanditiis rem dolore beatae tempora vero
            eligendi quae! Hic, nemo, quae fugit vel officiis labore laboriosam
            earum distinctio voluptatem voluptate non corporis at sunt, a quia
            ipsa deserunt iure. Est alias nobis eum vel esse blanditiis
            repellat, dignissimos adipisci, fugit harum ducimus quibusdam
            mollitia. Possimus placeat libero corporis debitis similique.
            Delectus, quam, consequuntur quasi mollitia pariatur quaerat optio
            magni dicta unde tempore, dolorem fuga perferendis nisi nemo officia
            enim modi. Beatae deserunt rerum, voluptas sunt, accusamus quidem
            possimus voluptates, qui magni harum quod maiores. Perspiciatis
            corrupti rem id ex est, laudantium doloremque possimus commodi illo
            cupiditate consequuntur et dicta nobis dolorem fugit iusto laborum
            aliquam ipsa! Vel nostrum minima laboriosam soluta reprehenderit
            deleniti voluptatem consequuntur? Omnis porro tempore est ratione
            animi doloribus provident deleniti beatae voluptate illum quaerat
            sapiente obcaecati rem architecto, harum repudiandae rerum possimus
            odit et reiciendis quod id numquam perspiciatis qui? Cum eius,
            nesciunt atque impedit reiciendis dolorum! Ea natus asperiores
            debitis consequuntur, velit iusto esse accusamus vero totam
            exercitationem hic veritatis, fugit odit vitae sit officia
            recusandae magnam eum libero ullam corrupti in quos. Earum
            doloremque molestiae tempora eum consequatur fugiat consequuntur et,
            incidunt neque, quo fuga commodi quis fugit ut. Unde eveniet dolores
            ipsum, distinctio, aliquam, magnam dolore accusantium odit ducimus
            officiis expedita. Esse, neque odit voluptatem sapiente, nihil
            fugiat magni soluta quod a minima ab reiciendis rerum! Dolore qui ea
            eum vero? Libero labore eum voluptatum nesciunt ipsa ea expedita
            eveniet consequatur quisquam exercitationem quo, neque deleniti
            eligendi nemo dolorem odio similique nobis illo tempore nam adipisci
            praesentium qui ab quasi. Tenetur provident hic exercitationem autem
            iusto facere nemo earum id repellendus, voluptates quia ut eius
            rerum aliquam, unde distinctio asperiores quod corporis nobis.
            Ratione facere maxime laborum aliquid quos, fugit iste reprehenderit
            harum delectus debitis id natus nam aspernatur provident tempore.
            Cupiditate nesciunt ex corporis ipsum molestiae reiciendis
            aspernatur quis repellendus totam necessitatibus. Magnam, omnis
            porro! Praesentium corrupti explicabo iste? Perferendis explicabo ex
            iure necessitatibus dignissimos in aliquam sequi? Eos praesentium
            consequatur in error, provident, rem tempore illum quos aliquid
            officiis deserunt. Labore voluptas pariatur ipsum temporibus
            tenetur? Vitae, sed eos odit corporis harum quae cumque quam
            dignissimos ex ipsa reiciendis molestias optio, esse excepturi
            beatae aperiam inventore? Maiores velit reiciendis possimus, fugit,
            iste pariatur maxime similique nesciunt optio voluptatem, amet sunt
            est? Sit deserunt, omnis enim fugiat quisquam numquam eius
            laboriosam eaque modi eveniet aspernatur ipsam sint corporis totam
            quos dolores animi vero. Reprehenderit et, quod quo consequatur
            cupiditate tenetur laborum dolorem aspernatur quasi aliquam nemo
            saepe ullam minima iusto deleniti cumque nam ut illo, atque incidunt
            esse, molestias corporis cum rerum. Modi delectus enim repudiandae
            maxime fugit temporibus rerum quis, reiciendis nemo non esse impedit
            dolorem provident ullam nobis odio minus! Voluptatibus, ipsam? Minus
            perferendis amet voluptatibus ratione nostrum doloremque, quo culpa
            eligendi dolor rem facilis tenetur ut ipsam laudantium optio
            dignissimos incidunt ea quibusdam!
          </p>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero nemo
            ea iste aperiam non nihil, nobis unde cumque exercitationem,
            consectetur quasi neque fugiat quibusdam molestiae, ex natus sunt?
            Accusantium veniam natus eveniet quaerat tempora mollitia unde
            porro, quidem excepturi rerum earum facilis veritatis! Vero,
            praesentium velit eveniet ad officia nesciunt impedit sunt dicta?
            Esse quibusdam fuga nostrum natus. Distinctio impedit voluptate
            fugit corporis. Maiores harum laboriosam quibusdam. Consequatur
            blanditiis a, aperiam consequuntur eveniet quam nam debitis
            quibusdam ipsum possimus facilis ratione eligendi asperiores eaque!
            A consequuntur ipsa culpa fuga sequi accusamus corrupti enim, sunt
            omnis distinctio nobis delectus voluptatibus aspernatur tempora in
            facere quos quae. A blanditiis itaque numquam, rem optio maiores
            reiciendis, facilis, dolor doloribus vel voluptates eveniet odit
            tempora quidem nostrum accusamus temporibus quas omnis! Error omnis,
            nihil unde placeat cum dolorum soluta quia commodi quas vero. Amet
            maiores repudiandae soluta enim earum velit tempora odio ea rem,
            laborum consequatur impedit obcaecati sequi quidem officia ipsam
            natus minus nulla id accusantium dolor fugiat. Voluptate neque
            nihil, nemo vel qui officiis facilis ut labore cumque, voluptatem
            recusandae. Dolorem asperiores nesciunt cum quasi minima illum ullam
            excepturi impedit laborum. Aliquid enim, maxime consequuntur
            cupiditate perspiciatis autem sit repellat deserunt corporis sed qui
            velit consectetur quibusdam. Iure sed pariatur, fuga voluptatibus
            quia nisi itaque. Asperiores tempore non odio eaque ducimus eveniet
            dolorum rem cupiditate, veniam corporis! Nobis odio assumenda, quia
            esse fuga soluta in temporibus! Repellendus inventore qui rem itaque
            recusandae in, obcaecati exercitationem nostrum! Reprehenderit
            voluptas consectetur maiores soluta officia ea ratione consequuntur
            incidunt facilis magnam nisi, amet officiis, commodi fugiat
            necessitatibus voluptatum molestiae placeat eaque. Dolores iusto
            quis blanditiis ipsam fuga possimus corrupti voluptas eos unde
            sequi, fugit veritatis voluptates veniam doloremque. A magnam fugit
            labore sed eligendi in suscipit voluptate veniam molestias
            voluptatem, ducimus rem impedit accusantium laboriosam quia dolor
            adipisci libero illum amet saepe? Fuga, ipsam maiores sunt
            laudantium esse quas rerum! Cumque, quidem aperiam laudantium
            temporibus quos odio omnis quo officia suscipit nemo quas similique
            non perferendis culpa sit natus hic nulla enim officiis? Nisi beatae
            quaerat fuga perferendis, illo eum maiores consequatur ullam
            explicabo quisquam modi possimus unde dicta repellat reiciendis sint
            cupiditate nihil hic recusandae molestiae placeat assumenda
            consectetur corporis minima. Facilis inventore, dolore labore illum
            tempora vitae deserunt quis odit consequatur. Hic, modi illo!
            Assumenda at exercitationem amet ab cumque beatae, voluptate sit
            alias ipsam cum repudiandae sint deleniti nulla, minus enim maxime
            doloribus fugit non debitis nisi aperiam quia doloremque magni!
            Doloremque distinctio assumenda cupiditate deleniti fugit. Pariatur
            et laboriosam deserunt, quae repudiandae quis eligendi aliquam harum
            maxime reprehenderit facere hic tenetur molestiae dolores.
            Cupiditate libero eveniet dolores numquam totam distinctio quibusdam
            aperiam hic et necessitatibus rerum labore blanditiis esse,
            aspernatur odit perspiciatis! Provident amet quos aspernatur. Dicta
            accusamus consequatur et est sunt cum, repellendus odit aliquam,
            ipsum voluptatem fugit id, soluta possimus dignissimos fuga eius.
            Similique laudantium tempora iusto in amet rem voluptas laborum
            numquam soluta itaque quos nemo ipsam rerum aut vel excepturi,
            necessitatibus voluptatem, provident inventore distinctio molestiae.
            Harum.
          </p>
        </div>
        <div class="main-right bc">
          <p></p>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="container">
        <div class="footer-block bc">
          <p></p>
        </div>
      </div>
    </div>
  </body>
</html>

CSS-фаил.

* {
  box-sizing: border-box;
}
body {
  background-color: #faf0e6;
  padding: 10px 0;
}
.bc {
  background-color: #f4a460;
}
.container {
  width: 1200px;
  min-height: 150px;
  margin: 0 auto;
  position: relative;
}
/*-----------------cammon end------------------*/
.header-top {
  width: 100%;
  min-height: 100px;
  border: 1px solid black;
  margin: 19px 0;
  position: sticky;
  top: 0;
}
.main .container .main-left {
  width: 800px;
  min-height: 550px;
}
.main .container .main-right {
  width: 350px;
  min-height: 750px;
  position: absolute;
  right: 0;
  top: 1px;
}
.footer .container .footer-block {
  width: 805px;
  min-height: 181px;
  margin-top: 20px;
}
Answer 1

UPD: Намудрили Вы с вёрсткой. В Вашем случае, чтобы шапка оставалась вверху, задайте эти свойства для элемента с классом .header, а не для элемента с классом .header-top

Результат:

* { 
  box-sizing: border-box; 
} 
 
body { 
  background-color: #faf0e6; 
  padding: 10px 0; 
} 
 
.bc { 
  background-color: #f4a460; 
} 
 
.container { 
  width: 1200px; 
  min-height: 150px; 
  margin: 0 auto; 
  position: relative; 
} 
 
 
/*-----------------cammon end------------------*/ 
 
.header { 
  position: sticky; 
  top: 0; 
} 
 
.header-top { 
  width: 100%; 
  min-height: 100px; 
  border: 1px solid black; 
  margin: 19px 0; 
  background: #ccc; 
} 
 
.main .container .main-left { 
  width: 800px; 
  min-height: 550px; 
} 
 
.main .container .main-right { 
  width: 350px; 
  min-height: 750px; 
  position: absolute; 
  right: 0; 
  top: 1px; 
} 
 
.footer .container .footer-block { 
  width: 805px; 
  min-height: 181px; 
  margin-top: 20px; 
}
<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <meta http-equiv="X-UA-Compatible" content="ie=edge" /> 
  <link rel="stylesheet" href="style.css" /> 
  <title>Document</title> 
</head> 
 
<body> 
  <div class="header"> 
    <div class="container"> 
      <div class="header-top bc"> 
        <p> 
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Explicabo omnis sit pariatur beatae, saepe hic non, nulla cupiditate fugit aliquam reiciendis nihil, velit minima expedita? Inventore debitis culpa sunt tenetur? Iure, vel est dolore consequatur 
          adipisci nostrum quibusdam, sit mollitia quod perferendis eos quasi accusantium. Excepturi ad animi at nulla! Accusantium enim odit atque numquam. Eaque maiores perferendis provident fugiat quisquam sunt, impedit pariatur, natus eveniet non 
          suscipit numquam exercitationem maxime modi, incidunt facilis aperiam vitae nulla nisi? Excepturi doloribus ipsam odit at sequi! Doloribus placeat itaque, ipsam, repellendus harum ratione delectus, explicabo tempore mollitia nam veritatis eveniet 
          possimus necessitatibus. 
        </p> 
        <p> 
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus accusantium eligendi blanditiis iste, animi possimus tempora earum velit sed rem nam neque consectetur! Odio sequi quam, alias delectus perspiciatis doloremque tenetur deleniti harum, reprehenderit 
          laboriosam eos sed. Cupiditate, laborum. Quibusdam neque ullam veniam aperiam ad deserunt perspiciatis consequuntur quae magnam eaque, asperiores blanditiis delectus eum nobis harum porro maiores quis placeat repudiandae tempora itaque consectetur! 
          Iste enim quaerat, nesciunt sequi quas veniam ab dicta voluptas vitae laborum fuga aut! Voluptatum quibusdam similique numquam omnis nam asperiores perferendis. Sequi laudantium omnis repellat molestias eaque quod quas, sed impedit quis repellendus 
          eos commodi unde, consequatur ipsam corporis possimus nam. Harum maiores deserunt mollitia eos et libero esse debitis quaerat corrupti deleniti modi fugit quos amet, cum ducimus facilis, totam ut corporis, quisquam nesciunt commodi eum blanditiis 
          minus. Aperiam ex quos tenetur, dignissimos ab eaque dolor iste facere libero fuga nesciunt illum vel quia, hic vero, ratione eligendi quisquam voluptatum voluptas? Porro vitae distinctio repudiandae repellendus impedit est eos saepe, tempore 
          totam quod unde libero sit velit expedita temporibus blanditiis, eum dolor! Laboriosam ullam minus dolorem! Laborum dolorum vero eum ipsam hic eaque labore, delectus reiciendis voluptate maiores, ad ex dolor aperiam error? 
        </p> 
 
        </p> 
      </div> 
    </div> 
  </div> 
  <div class="main"> 
    <div class="container"> 
      <div class="main-left bc"> 
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sint reiciendis id ipsum, dolorem magnam fuga. Molestias aut obcaecati, saepe adipisci fuga voluptas officiis facilis fugit nam dolorum excepturi nulla omnis quidem amet iste repellat consectetur 
          quis tempore culpa. Libero eos consectetur quae fugiat sequi, est itaque qui veritatis illum harum sit! Incidunt voluptate vero ipsum asperiores ex, sint consectetur ducimus nesciunt. Quod, nesciunt tempore? Dolor expedita vero explicabo necessitatibus 
          perspiciatis ea blanditiis sapiente corrupti voluptate, temporibus ipsa iure autem, dolore sunt quaerat repellendus aliquid est. Deleniti totam officia dolorum quibusdam sit eum provident vel explicabo, qui autem! Eos numquam assumenda, magnam 
          ad praesentium suscipit dolorum nesciunt sit quam deleniti debitis. Esse saepe laudantium a quasi quam voluptas illo, ut possimus pariatur molestiae eaque ipsa omnis vero et aliquid. Incidunt rem rerum aut molestias suscipit dolorem alias! Saepe 
          exercitationem dignissimos ipsam, maxime voluptates mollitia blanditiis, dolore alias, ab iste dolorem! Odio facere asperiores excepturi deleniti quod dolorum molestias repellat assumenda, fugiat, quia consequuntur veritatis pariatur at obcaecati 
          laudantium corrupti. Reiciendis quasi maiores laborum voluptates perferendis natus fugiat repudiandae unde consequuntur hic magni, minima iste harum omnis, iure quibusdam. Perspiciatis quo tenetur delectus sint tempore, repellendus, deleniti 
          optio aperiam asperiores a exercitationem in, ab fuga voluptate beatae iure itaque. Ullam quos asperiores modi ipsum, quidem ducimus explicabo harum voluptatibus perspiciatis at dolor accusantium libero incidunt? Distinctio quo doloremque, enim 
          consequuntur saepe quos alias odit libero a numquam delectus nisi quod, nemo, ex laudantium illo itaque qui recusandae in voluptatibus ducimus rem beatae? Qui commodi voluptates tenetur praesentium ipsum excepturi voluptate laudantium sed distinctio 
          quos quae, exercitationem vitae ratione maxime vel optio repellendus eius error dignissimos ullam non iure fugiat. Ipsam illo incidunt necessitatibus nesciunt beatae placeat iusto itaque, laudantium distinctio. Illo ad natus mollitia incidunt? 
          Nesciunt sed, sequi dicta architecto deserunt provident.</p> 
        <p> 
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quae laudantium reprehenderit eum magnam quidem! Itaque, nobis alias excepturi, accusantium delectus iusto id voluptatem harum, repellendus laborum blanditiis rem dolore beatae tempora vero eligendi 
          quae! Hic, nemo, quae fugit vel officiis labore laboriosam earum distinctio voluptatem voluptate non corporis at sunt, a quia ipsa deserunt iure. Est alias nobis eum vel esse blanditiis repellat, dignissimos adipisci, fugit harum ducimus quibusdam 
          mollitia. Possimus placeat libero corporis debitis similique. Delectus, quam, consequuntur quasi mollitia pariatur quaerat optio magni dicta unde tempore, dolorem fuga perferendis nisi nemo officia enim modi. Beatae deserunt rerum, voluptas 
          sunt, accusamus quidem possimus voluptates, qui magni harum quod maiores. Perspiciatis corrupti rem id ex est, laudantium doloremque possimus commodi illo cupiditate consequuntur et dicta nobis dolorem fugit iusto laborum aliquam ipsa! Vel nostrum 
          minima laboriosam soluta reprehenderit deleniti voluptatem consequuntur? Omnis porro tempore est ratione animi doloribus provident deleniti beatae voluptate illum quaerat sapiente obcaecati rem architecto, harum repudiandae rerum possimus odit 
          et reiciendis quod id numquam perspiciatis qui? Cum eius, nesciunt atque impedit reiciendis dolorum! Ea natus asperiores debitis consequuntur, velit iusto esse accusamus vero totam exercitationem hic veritatis, fugit odit vitae sit officia recusandae 
          magnam eum libero ullam corrupti in quos. Earum doloremque molestiae tempora eum consequatur fugiat consequuntur et, incidunt neque, quo fuga commodi quis fugit ut. Unde eveniet dolores ipsum, distinctio, aliquam, magnam dolore accusantium odit 
          ducimus officiis expedita. Esse, neque odit voluptatem sapiente, nihil fugiat magni soluta quod a minima ab reiciendis rerum! Dolore qui ea eum vero? Libero labore eum voluptatum nesciunt ipsa ea expedita eveniet consequatur quisquam exercitationem 
          quo, neque deleniti eligendi nemo dolorem odio similique nobis illo tempore nam adipisci praesentium qui ab quasi. Tenetur provident hic exercitationem autem iusto facere nemo earum id repellendus, voluptates quia ut eius rerum aliquam, unde 
          distinctio asperiores quod corporis nobis. Ratione facere maxime laborum aliquid quos, fugit iste reprehenderit harum delectus debitis id natus nam aspernatur provident tempore. Cupiditate nesciunt ex corporis ipsum molestiae reiciendis aspernatur 
          quis repellendus totam necessitatibus. Magnam, omnis porro! Praesentium corrupti explicabo iste? Perferendis explicabo ex iure necessitatibus dignissimos in aliquam sequi? Eos praesentium consequatur in error, provident, rem tempore illum quos 
          aliquid officiis deserunt. Labore voluptas pariatur ipsum temporibus tenetur? Vitae, sed eos odit corporis harum quae cumque quam dignissimos ex ipsa reiciendis molestias optio, esse excepturi beatae aperiam inventore? Maiores velit reiciendis 
          possimus, fugit, iste pariatur maxime similique nesciunt optio voluptatem, amet sunt est? Sit deserunt, omnis enim fugiat quisquam numquam eius laboriosam eaque modi eveniet aspernatur ipsam sint corporis totam quos dolores animi vero. Reprehenderit 
          et, quod quo consequatur cupiditate tenetur laborum dolorem aspernatur quasi aliquam nemo saepe ullam minima iusto deleniti cumque nam ut illo, atque incidunt esse, molestias corporis cum rerum. Modi delectus enim repudiandae maxime fugit temporibus 
          rerum quis, reiciendis nemo non esse impedit dolorem provident ullam nobis odio minus! Voluptatibus, ipsam? Minus perferendis amet voluptatibus ratione nostrum doloremque, quo culpa eligendi dolor rem facilis tenetur ut ipsam laudantium optio 
          dignissimos incidunt ea quibusdam! 
        </p> 
        <p> 
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vero nemo ea iste aperiam non nihil, nobis unde cumque exercitationem, consectetur quasi neque fugiat quibusdam molestiae, ex natus sunt? Accusantium veniam natus eveniet quaerat tempora mollitia 
          unde porro, quidem excepturi rerum earum facilis veritatis! Vero, praesentium velit eveniet ad officia nesciunt impedit sunt dicta? Esse quibusdam fuga nostrum natus. Distinctio impedit voluptate fugit corporis. Maiores harum laboriosam quibusdam. 
          Consequatur blanditiis a, aperiam consequuntur eveniet quam nam debitis quibusdam ipsum possimus facilis ratione eligendi asperiores eaque! A consequuntur ipsa culpa fuga sequi accusamus corrupti enim, sunt omnis distinctio nobis delectus voluptatibus 
          aspernatur tempora in facere quos quae. A blanditiis itaque numquam, rem optio maiores reiciendis, facilis, dolor doloribus vel voluptates eveniet odit tempora quidem nostrum accusamus temporibus quas omnis! Error omnis, nihil unde placeat cum 
          dolorum soluta quia commodi quas vero. Amet maiores repudiandae soluta enim earum velit tempora odio ea rem, laborum consequatur impedit obcaecati sequi quidem officia ipsam natus minus nulla id accusantium dolor fugiat. Voluptate neque nihil, 
          nemo vel qui officiis facilis ut labore cumque, voluptatem recusandae. Dolorem asperiores nesciunt cum quasi minima illum ullam excepturi impedit laborum. Aliquid enim, maxime consequuntur cupiditate perspiciatis autem sit repellat deserunt 
          corporis sed qui velit consectetur quibusdam. Iure sed pariatur, fuga voluptatibus quia nisi itaque. Asperiores tempore non odio eaque ducimus eveniet dolorum rem cupiditate, veniam corporis! Nobis odio assumenda, quia esse fuga soluta in temporibus! 
          Repellendus inventore qui rem itaque recusandae in, obcaecati exercitationem nostrum! Reprehenderit voluptas consectetur maiores soluta officia ea ratione consequuntur incidunt facilis magnam nisi, amet officiis, commodi fugiat necessitatibus 
          voluptatum molestiae placeat eaque. Dolores iusto quis blanditiis ipsam fuga possimus corrupti voluptas eos unde sequi, fugit veritatis voluptates veniam doloremque. A magnam fugit labore sed eligendi in suscipit voluptate veniam molestias voluptatem, 
          ducimus rem impedit accusantium laboriosam quia dolor adipisci libero illum amet saepe? Fuga, ipsam maiores sunt laudantium esse quas rerum! Cumque, quidem aperiam laudantium temporibus quos odio omnis quo officia suscipit nemo quas similique 
          non perferendis culpa sit natus hic nulla enim officiis? Nisi beatae quaerat fuga perferendis, illo eum maiores consequatur ullam explicabo quisquam modi possimus unde dicta repellat reiciendis sint cupiditate nihil hic recusandae molestiae 
          placeat assumenda consectetur corporis minima. Facilis inventore, dolore labore illum tempora vitae deserunt quis odit consequatur. Hic, modi illo! Assumenda at exercitationem amet ab cumque beatae, voluptate sit alias ipsam cum repudiandae 
          sint deleniti nulla, minus enim maxime doloribus fugit non debitis nisi aperiam quia doloremque magni! Doloremque distinctio assumenda cupiditate deleniti fugit. Pariatur et laboriosam deserunt, quae repudiandae quis eligendi aliquam harum maxime 
          reprehenderit facere hic tenetur molestiae dolores. Cupiditate libero eveniet dolores numquam totam distinctio quibusdam aperiam hic et necessitatibus rerum labore blanditiis esse, aspernatur odit perspiciatis! Provident amet quos aspernatur. 
          Dicta accusamus consequatur et est sunt cum, repellendus odit aliquam, ipsum voluptatem fugit id, soluta possimus dignissimos fuga eius. Similique laudantium tempora iusto in amet rem voluptas laborum numquam soluta itaque quos nemo ipsam rerum 
          aut vel excepturi, necessitatibus voluptatem, provident inventore distinctio molestiae. Harum. 
        </p> 
      </div> 
      <div class="main-right bc"> 
        <p></p> 
      </div> 
    </div> 
  </div> 
  <div class="footer"> 
    <div class="container"> 
      <div class="footer-block bc"> 
        <p></p> 
      </div> 
    </div> 
  </div> 
 
</body> 
 
</html>

Answer 2
html, body {
  height: 100%;
  margin: 0;
}
body {
  overflow: auto;
}
READ ALSO
Проблем погрузки классов при @import
CSS

Проблем погрузки классов при @import

Есть несколько страниц vue с одинаковыми классами стилейРешил перенести стили в один файл и подключать к каждой странице отдельно

 74
Реализация и использование Identity функции
c++

Реализация и использование Identity функции

Хотел бы начать с примера, поэтому для начала опишу несколько используемых функций

 80
c++ stl: пересечение множеств
c++

c++ stl: пересечение множеств

подскажите, есть в stl стандартные средства или какой-то короткий оптимальный способ для решения следующей задачи:

 106
C++ move семантика, как реализовать?
c++

C++ move семантика, как реализовать?

Прошу помочь разобраться с реализацией move семантики на моём примере

 116