Question

我正在尝试设计一个简单的仪表板页面。

我开始将两个div并排放在一起用作侧面菜单和内容。该页面如下所示：

我注意到滚动条（y）不可见，即使页面的内容多于可见内容。

是的，你仍然可以向下/向上滚动，但令人困惑的是为什么没有可见的滚动条。

我正在尝试使用bootstrap 4，但我也有自定义css。

您认为这个问题是什么？更重要的是，有没有更好的方法使用bootstrap 4？

代码：

   view.setTag(myPozo);
    MyPozo myPozo =(MyPozo)view.getTag();
    if(myPozo!=null){
        // Use the pozo
    }

Answer 1

这将是一种更简单的Bootstrap友好方法......

https://www.codeply.com/go/y4HsWA8VA2

<div class="container-fluid">
    <div class="row">
        <div class="sidebar col">Sidebar</div>
        <div class="main col">
            ..
        </div>
    </div>
</div>

.sidebar {
    width: 250px;
    min-height: 100vh;
    position: fixed;
}

.main {
    padding-left: 265px;
}

Answer 2

从#mainContents样式中删除以下内容

    width: 100%;
    padding-right: 250px;

然后你的风格就像这样

  <style>
    #sideMenu {
        height: 100%;
        width: 250px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #222D32;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #mainContents {
        height: 100%;
        width: 100%;
        padding-right: 250px;
        position: fixed;
        z-index: -1;
        top: 0px;
        left: 250px;            
        background-color: #ECF0F5;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #contentBody {
        width: 100%;
        padding: 20px;
        margin-bottom: 50px;
    }
</style>

整页代码如下。请检查

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Dashboard Test</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  <style>
    #sideMenu {
        height: 100%;
        width: 250px;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #222D32;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #mainContents {
        height: 100%;
        width: 100%;
        padding-right: 250px;
        position: fixed;
        z-index: -1;
        top: 0px;
        left: 250px;            
        background-color: #ECF0F5;
        overflow-x: hidden;
        transition: 0.3s;
    }

    #contentBody {
        width: 100%;
        padding: 20px;
        margin-bottom: 50px;
    }
</style>
</head>
<body>

    <div id="sideMenu">

    </div>

    <div id="mainContents">
        <div id="contentBody">
                <h1>Lorem Ipsum</h1>                
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
                <p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
                <p>Cras vel pretium quam, ac sodales sapien. In ut laoreet turpis, at vestibulum metus. Aliquam gravida elementum consequat. Curabitur sagittis, massa cursus vestibulum cursus, eros sem sodales tortor, eu lacinia risus lectus ut augue. Quisque nec dui turpis. Maecenas imperdiet auctor quam, a condimentum nulla pulvinar sed. Cras a lacus id justo facilisis tristique in non turpis.</p>
                <p>Integer sit amet ipsum interdum metus scelerisque tempor. Sed pretium semper scelerisque. Etiam lacus dolor, tempor id aliquet egestas, porttitor a ante. Nam tincidunt mi id tellus bibendum, ac accumsan dolor bibendum. Donec placerat porttitor sagittis. Ut vitae vehicula orci. Aenean viverra sem a tellus rhoncus placerat. Aliquam erat volutpat. Pellentesque quis metus sed lacus scelerisque posuere. Cras elementum, dolor ut elementum placerat, urna nisl aliquam eros, in pharetra diam massa quis leo. Pellentesque efficitur egestas pulvinar. Aliquam hendrerit diam in vulputate fringilla. In vitae nisl massa. Sed suscipit nisl ac quam molestie pharetra. Fusce scelerisque ultricies felis non vulputate.</p>
                <p>Nullam non consectetur diam. Nunc non rutrum ante. Aenean vestibulum metus ultricies diam fermentum fringilla. Ut efficitur tincidunt varius. Donec facilisis purus eget diam maximus efficitur. Proin aliquam eu metus id euismod. Nunc sed urna blandit metus bibendum elementum. Fusce lacinia tellus eu accumsan accumsan. Nullam ornare lacus quam, vitae sagittis velit mollis eget. Quisque et suscipit ante. In pulvinar ex vitae risus lacinia, vitae egestas neque interdum. Mauris enim leo, porta at risus at, ornare tincidunt sapien. Sed semper enim eleifend elit dictum, id fermentum sapien ullamcorper. Nam vitae urna a libero dapibus tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                <p>Sed ante nibh, molestie dignissim neque sit amet, elementum luctus felis. Duis hendrerit quam vel leo convallis facilisis. Vivamus id efficitur sem. In rutrum luctus arcu, at malesuada augue auctor id. Praesent a dui et diam sodales rhoncus ut at purus. Mauris vel tincidunt justo. Sed et ultricies tortor. Pellentesque sollicitudin lacus nisl, et finibus orci lobortis a. Quisque facilisis, mauris et scelerisque placerat, enim magna lacinia mauris, quis vestibulum sapien odio ut est. Maecenas ipsum augue, tristique vitae arcu nec, laoreet bibendum mauris. Morbi pretium elit in elit viverra egestas. Nunc quis sapien ipsum. Pellentesque efficitur lorem nec dui convallis, ut congue lorem aliquam. Morbi non sem lacinia, semper libero in, efficitur risus. Integer congue, metus non vehicula euismod, felis nisl viverra ipsum, at dignissim nibh eros ac eros.</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec euismod nisl, in mattis purus. Donec finibus luctus libero, sed lobortis elit maximus non. Quisque vitae venenatis odio, in dictum nibh. Sed suscipit nisi a bibendum tincidunt. Donec vestibulum lorem id bibendum hendrerit. Etiam ligula urna, porta gravida nisl non, ullamcorper venenatis dolor. Fusce ex nunc, lobortis at risus in, sollicitudin congue tellus. Pellentesque lacinia nibh id massa laoreet, ut aliquam urna iaculis. In mollis lobortis enim. Etiam pretium libero in elit posuere ornare. Suspendisse potenti. Mauris quis vulputate quam, et dignissim ante. Integer vitae auctor erat, vitae congue augue. In hendrerit et felis ac consequat.</p>
        </div>
    </div>

</body>
</html>

引导4个滚动条在2个div并排固定和流体宽度

2 个答案: