HTML / css侧栏在页面右侧未正确显示

问题描述 投票:2回答:4

我想用出现在页面右侧的HTML和CSS创建侧边栏,但是float:right无法正常工作,当我移除position:fixed并将其更改为相对位置时,高度变小。如何在右侧制作精确的侧边栏?我也希望它能够响应。这是侧边栏代码:

.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>
)
javascript html css
4个回答
2
投票

将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
投票

您不需要使用浮点数。如果将右侧边栏设为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>

1
投票

如果您需要更好,更一致的控制,我建议您学习并使用CSS Flexbox。 Here is a resource to help learn。更高级的需求可以使用grid layout

您的代码将变成:

.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>

我还调整了盒子阴影,使其位于另一侧


0
投票

尝试:

Display:block;

并删除此代码:

Float:right;

如果将位置设置为固定,则需要将显示设置为块属性。

© www.soinside.com 2019 - 2024. All rights reserved.