堆栈内存溢出
  简体   繁体   English

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

[英]Html/css side bar does not appear correctly on the right side of the page

 原文  2020-03-15 11:10:50  2   4    javascript/ html/ css

问题描述

I want to create a side bar with HTML and CSS that appears on the right side of my page, but float:right doesn't work correctly and when I remove the position:fixed and change it to relative, the height becomes small.我想创建一个带有 HTML 和 CSS 的侧栏，显示在我的页面右侧，但 float:right 无法正常工作，当我删除 position:fixed 并将其更改为相对时，高度变小。 How can I make the exact sidebar but on the right side?如何制作确切的侧边栏但在右侧？ I want it to be responsive too.我也希望它具有响应性。 Here's the sidebar code:这是侧边栏代码：

.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 个解决方案

解决方案1
 2 已采纳  2020-03-15 11:21:15

Change your CSS to this:将您的 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;
}

The float: right; float: right; should be removed, since you're using a fixed position.应该删除，因为您使用的是固定位置。 Also the left should be right: 0 , since you want it on the right side of your document.左边也应该是right: 0 ，因为您希望它在文档的右侧。

解决方案2
 1  2020-03-15 11:22:56

You don't need to use float.您不需要使用浮动。 If you make position: fixed;如果你使position: fixed; of your right sidebar then make sure that the right position is zero.然后确保正确的位置为零。 

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

解决方案3
 1  2020-03-15 11:28:01

Just in case you need finer and more consistent control, I recommend you learn and use CSS Flexbox.以防万一你需要更精细和更一致的控制，我建议你学习和使用 CSS Flexbox。 Here is a resource to help learn .这是帮助学习的资源。 More advanced needs can use grid layout更高级的需求可以使用网格布局

Your code then becomes:然后您的代码变为：

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

I also adjusted the box-shadow so that it's on the other side我还调整了框阴影，使其在另一侧

解决方案4
 0  2020-03-15 11:15:01

Try :尝试 ：

Display:block;

and remove this code :并删除此代码：

Float:right;

if you set position as fixed , you need to set display as block attr.如果将 position 设置为 fixed ，则需要将 display 设置为 block attr。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 HTML页面左侧和右侧的文本 - Text at Left side and Right Side in HTML Page HTML / CSS：侧边栏显示在页面底部而不是右侧 - HTML / CSS: Sidebar appears at bottom of page instead of on right side 侧边栏和主要内容不会在 CSS 和 HTML 中并排显示： - Side bar and Main content will not show side by side in CSS and HTML: 导航栏后右侧的空白页 - Blank Page On Right Side After Nav Bar HTML CSS对齐在图像的右侧 - Html css aligning on the right side of image web页面右侧出现未知空白 - Unknown white space appear on the right side of web page 在 HTML/CSS 中并排显示图像 - Images Side by Side in HTML/CSS HTML / CSS：如何在侧面制作一个横条以将您带到页面的特定部分 - HTML/CSS: How to make a bar on the side to take you to a certain part of the page 将侧边栏置于屏幕右侧 - Make a side bar to be on the right side of the screen ReactJs 侧边栏右侧内容 - ReactJs Side bar right side content
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM