Блог

Главная - Вопросы по программированию - Как исправить разделы боковой панели и основного текста в одной строке?

Как исправить разделы боковой панели и основного текста в одной строке?

#html #css

#HTML #css

Вопрос:

Я хочу, чтобы раздел основного текста прокручивался полностью вверх, а раздел боковой панели — в верхнюю часть экрана, с помощью нескольких проб и ошибок, боковая панель может это сделать, но раздел содержимого возвращается вниз. Я хочу, чтобы при входе на эту страницу содержимое и боковая панель были выровнены. Я не заметил, где?

 <style>
/* The side navigation menu */
.sidebar {
    margin: 0;
    padding: 0;
    width: 230px;
    background-color: #f1f1f1;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 0 15px;
}
</style>

раздел боковой панели

 <div class="sidebar">
    <a href="#">sidebar</a>
    <a href="#">sidebar</a>
    <a href="#">sidebar</a>
</div>

раздел содержимого

 <div class="content">
<div class="col-12" id="main">
    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
        <h1 class="h1">content</h1>
    </div>
    <div class="card border-success">
        <div class="card-body">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Praesentium architecto voluptatem, soluta error at sequi cum veniam dolorem obcaecati ratione sunt accusamus saepe fugiat ipsam modi reiciendis facilis illum necessitatibus?</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusamus eveniet ab sed cumque repudiandae qui assumenda, aut quibusdam libero similique voluptatibus dolor dolorem fugiat explicabo? Quia illum illo maxime modi?</p>
        </div>
    </div>
</div>

Ответ №1:

Вы можете использовать flexbox для получения желаемого результата.

Вот пример:

 .wrapper {
  display: flex;
  justify-content: space-between;
}

.sidebar {
  position: sticky;
  top: 0;
  width: 230px;
  height: 100vh;
}

.content {
  width: 900px;
  padding: 0 10px;
} 
 <div class="wrapper">
  <div class="sidebar">
    <ul>
      <li>Lorem, ipsum dolor.</li>
      <li>Sunt, accusamus repudiandae.</li>
      <li>Cumque, vitae ut.</li>
      <li>Officiis, a esse.</li>
      <li>Soluta, maiores commodi.</li>
    </ul>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde quis quas ut enim corrupti error, alias praesentium assumenda cum iure nam ipsum recusandae sint facilis quia cupiditate obcaecati tempore maxime ea qui vel eveniet eius nulla ad. Nemo
      cum repellat eum eos placeat. Repellendus autem sapiente maiores error officia maxime qui neque illo nemo magnam?</p>
    <p>Delectus quae ipsa quos aliquam officia. Error facere perspiciatis veritatis, doloremque nisi nesciunt quaerat cumque repellendus nam cum minus ratione. Culpa repudiandae at, perspiciatis ad ea ducimus minima molestiae rerum aut laudantium non, placeat
      exercitationem saepe, impedit velit tempore distinctio illum? Libero cumque a illum perspiciatis, praesentium ea tempore dolor ducimus, consequuntur veniam aut ipsa?</p>
    <p>Omnis, fuga asperiores in, dolorum optio facilis ea eaque ad dolor quidem, harum magnam nisi? Voluptate deserunt et, pariatur eum similique ab ex quisquam rem, possimus nemo eius! Veritatis, deleniti dolorum ex eveniet eaque aut rerum, exercitationem
      in quisquam, adipisci explicabo provident quae non praesentium fugiat. Molestias laudantium obcaecati animi aliquam corrupti delectus iste rem.</p>
    <p>Nobis aliquam cum commodi, nesciunt suscipit nemo hic reiciendis ullam doloribus distinctio consequatur, neque totam. Esse atque soluta, necessitatibus minus debitis illum error, provident totam quam quae tempore, blanditiis nobis! Eligendi dolor
      illum error fuga ex distinctio. Quibusdam, omnis modi ratione consectetur, porro doloremque inventore dolorem dolores perspiciatis neque cupiditate iusto dolore voluptas blanditiis autem.</p>
    <p>Impedit id eius rerum optio? Similique repellat optio nostrum, ratione maiores aperiam et. Obcaecati, iste. Saepe eligendi libero recusandae repellat, commodi ab placeat id nobis aliquam neque dolorum ipsa minima harum pariatur eaque reiciendis assumenda
      perferendis animi officia! Maiores totam et quia, nulla libero odio accusantium voluptatibus, maxime, perspiciatis porro rerum dolores eaque veritatis officia!</p>
    <p>Reprehenderit ducimus, saepe omnis, vel deserunt maiores nostrum similique dolorem dolorum libero nisi iste repellat ullam odit, veritatis est officiis ut adipisci fuga eius illo necessitatibus esse ratione doloremque. Accusamus neque inventore dicta
      ipsa iusto ex debitis labore est, adipisci odit suscipit repellendus sit atque aliquid omnis provident explicabo minima necessitatibus sapiente nobis ratione quam.</p>
    <p>Velit, consectetur veritatis et non sunt corporis repellendus totam saepe nihil voluptate exercitationem dignissimos in corrupti culpa, excepturi necessitatibus vitae fugiat. Exercitationem dolores voluptas, numquam ea libero voluptatem consequuntur
      necessitatibus quia iusto quam, aperiam repellendus molestias nobis sapiente. Corrupti autem nemo commodi maxime libero assumenda nulla, animi modi alias, consequatur facilis cumque accusantium sapiente architecto!</p>
  </div>
</div>