Боковая панель HTML / css не отображается правильно в правой части страницы - PullRequest
Новая
       0

Боковая панель HTML / css не отображается правильно в правой части страницы

1 голос
/ 15 марта 2020

Я хочу создать боковую панель с HTML и CSS, которая появляется в правой части моей страницы, но float: right не работает правильно, а когда я удаляю позицию: исправлено и меняю ее на относительную высота становится маленькой. Как я могу сделать точную боковую панель, но на правой стороне? Я тоже хочу, чтобы он был отзывчивым. Вот код боковой панели: 

.side-drawer {
    height: 100%;
    background-color: #463f4f;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.5);
    top: 0;
    left: 0;
    width:60%;
    max-width: 300px;
    z-index: 200;
    float: right;
    position: fixed;
}

const sideDrawer = props => (
  <nav className='side-drawer'>
    {/* add routers later */}
    <ul>
      <li><a href='/'>داشبورد</a></li>
      <li><a href='/'>اطلاعات پایه</a></li>
      <li><a href='/'>بیمه تکمیلی</a></li>
      <li><a href='/'>آموزش</a></li>
      <li><a href='/'>مدیریت عملکرد</a></li>
      <li><a href='/'>اطلاعات مالی</a></li>
      <li><a href='/'>بازخورد</a></li>
    </ul>
  </nav>
)

Ответы [ 4 ]

2 голосов
/ 15 марта 2020

Измените CSS на это: 

.side-drawer {
    height: 100%;
    background-color: #463f4f;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.5);
    top: 0;
    right: 0;
    width:60%;
    max-width: 300px;
    z-index: 200;
    position: fixed;
    display: block;
}

float: right; следует удалить, поскольку вы используете фиксированное положение. Также слева должно быть right: 0, так как вы хотите, чтобы оно было справа от вашего документа.

1 голос
/ 15 марта 2020

На случай, если вам нужно более точное и последовательное управление, я рекомендую вам изучить и использовать CSS Flexbox. Вот ресурс, который поможет выучить . Для более сложных задач можно использовать макет сетки

Ваш код становится: 

.layout {
  display: flex; /* use flexbox */
  align-items: stretch; /* stretch vertically */
  justify-content: stretch; /* stretch horizontally */
}

.container {
  flex: 1 1 auto; /* will be stretched and compressed first, starting with whatever */
  padding: 20px;
}

.sideDrawer {
  flex: 0 0 300px; /* will not be stretched nor compressed, and will start at 300px */
  background-color: #463f4f;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 16px;
  padding: 20px;
}


      <div className='layout'>
        <div className='container'>
          Content goes here
        </div>
        <nav className='sideDrawer'>
          {/* add routers later */}
          <ul>
            <li>
              <a href='/'>داشبورد</a>
            </li>
            <li>
              <a href='/'>اطلاعات پایه</a>
            </li>
            <li>
              <a href='/'>بیمه تکمیلی</a>
            </li>
            <li>
              <a href='/'>آموزش</a>
            </li>
            <li>
              <a href='/'>مدیریت عملکرد</a>
            </li>
            <li>
              <a href='/'>اطلاعات مالی</a>
            </li>
            <li>
              <a href='/'>بازخورد</a>
            </li>
          </ul>
        </nav>
      </div>

Я также отрегулировал тень блока так, чтобы он находился на другой стороне

1 голос
/ 15 марта 2020

Вам не нужно использовать float. Если вы сделаете position: fixed; правой боковой панели, убедитесь, что правильная позиция равна нулю. 

.wrapper {
    position: relative;
}

.body {
    width: 70%;
    height: 100%;
    padding: 20px;
}

.right-sidebar {
    width: 25%;
    padding: 20px;
    position: fixed;
    right: 0;
    top: 0;
    height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div class="wrapper">
        <div class="body">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio . Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore excepturi nisi ipsam, fugiat suscipit ex ducimus, voluptas facilis consequatur odit incidunt iste numquam sunt sint praesentium enim mollitia. Architecto, optio.
            </p>
        </div>
        <div class="right-sidebar">
            <ul>
                <li>Home</li>
                <li>Projects</li>
                <li>Services</li>
                <li>About</li>
                <li>Contac</li>
            </ul>
        </div>
    </div>
</body>
</html>
0 голосов
/ 15 марта 2020

Попробуйте: 

Display:block;

и удалите этот код: 

Float:right;

Если вы установите фиксированное положение, вам нужно установить отображение как атрибут объекта.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...