Question

这是我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE-edge">
    <meta name="viewport" content="width = device-with, initial-scale = 1">
    <title>Tittle</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

        <style>

                body, html, .sidebar, .body {
                height: 100%;
                min-height: 100%;
                margin: 0;
                padding: 0;
                }

                #container {
                    width: 100%;
                    height: 100%;
                }

                .sidebar {
                    background-color: green;
                    width: 10%;
                    float: left;
                    height: 100%;
                    //position: fixed;
                }

                .body {
                    float:left;
                    width:90%;
                    height:100%;
                }

        </style>

</head>
    <body>

        <div id="container">
            <div class="sidebar">

            </div>

            <div class="body">

                        <div id="Div">
                            <img src="http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg" alt="image" width="100%" height="1200px"/>
                        </div>

            </div>

            </div>
        </div>

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </body>
</html>

这段代码完美无缺，但我希望当用户在此处滚动页面输出时，侧边栏会固定在其位置

我尝试了这个CSS属性

postion: fixed;

这是输出

我需要帮助不能解决该做什么，我已经搜索了很多但找不到合适的解决方案

Answer 1

尝试将margin-left: 10%添加到您的.body课程中（并为其删除float）

Answer 2

关于这个问题：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE-edge">
  <meta name="viewport" content="width = device-with, initial-scale = 1">
  <title>Tittle</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

  <style>
    body,
    html,
    .sidebar,
    .body {
      height: 100%;
      min-height: 100%;
      margin: 0;
      padding: 0;
    }
    #container {
      width: 100%;
      height: 100%;
    }
    .sidebar {
      background-color: green;
      width: 10%;
      float: left;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
    }
    .body {
      float: left;
      width: 89%;
      height: 100%;
      position: absolute;
      left: 11%;
    }
  </style>

</head>

<body>

  <div id="container">
    <div class="sidebar">

    </div>

    <div class="body">

      <div id="Div">
        <img src="http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg" alt="image" width="100%" height="1200px" />
      </div>

    </div>

  </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

在https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position

找到的信息

如何修复自定义侧边栏位置

2 个答案: