Question

你好，我是html和css的新手，并且我的html页面有此问题，以我的css样式，我已经将sidenav设置为固定位置，但是每当我滚动它时，它总是随页面一起移动，因此我尝试了多种解决方案，但是工作就是为什么我决定问这个问题。另外如果还有其他方法这是我的CSS：

/* The sidebar menu */
.sidenav {
    height: 50%; 
    width: 160px; 
    position: fixed; 
    z-index: 1; 
    top: 10%; 
    left: 0;


    background-color:  #50597b;
    overflow-x: hidden;
    padding-top: 20px;
    padding-bottom: -100px;
}

.main {
    margin-left: 160px; /* Same as the width of the sidebar */
    padding: 0px 10px;
}


@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
body{
    padding-left:170px;
    padding-right: 50px;
}
.boxed {
    border: 1px solid seagreen ;
    background-color: seagreen;
    margin-right: -100px;
    margin-left: -170px;


}
h3{
    text-align: center;
    font-size: 30px;
    padding-bottom: 10px;
    color: white;
}
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 65%;
}
#add{
    margin-top:10px;
    margin-bottom:10px;
    margin-left: -50px;
    background-color:seagreen;

}
#addicon{
    padding-right: 10px;

}
#status {
    margin-top: 10px;
    margin-bottom: 10px;

}
#search {
    margin-top: 10px;
    margin-bottom: 10px;

}


#search{
    margin-left:-63px;
}
#table{
    /*font-weight: bold;*/
    font-size:13px;
    color:white;

}


#table tr:hover {
    background-color:#50597b;
}
body{
    background-color: #394264;
}
.container{
    background-color: #50597b;
    padding-bottom: 220px;
    margin-top:50px;
    margin-left: 200px;
    margin-right: 100px;
    padding-left:100px;
    padding-right:100px;
    padding-top:100px;
    margin-bottom: 200px;



}
 #link:hover {
    text-decoration:underline;

}
.message{
    color:seagreen;
    font-weight: bold;
}
table {
    border: 1px solid #ddd;
    border:1px solid black;
    border-collapse: separate;
    border-left: 0;
    border-radius: 5px;
    border-spacing: 0px;

}
thead {
    display: table-header-group;
    vertical-align: middle;
    border-color: inherit;
    border-collapse: separate;
}
tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
th, td {
    padding: 5px 4px 6px 4px;
    text-align: left;
    vertical-align: top;
    border-left: 1px solid #ddd;
}
td {
    border-top: 1px solid #ddd;
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
    border-radius: 4px 0 0 0;
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
    border-radius: 0 0 0 4px;
}

<div class="sidenav">
    <li role="presentation"></li>
    <g:img dir="images" file="companylogo.png"/>
</div>


</head>
<body>
    <div class="boxed">
        <h3>Social Integration</h3>
    </div>
    <div class="container">
        <div id="list-customer">
            <g:if test="${flash.message}">
                <div class="message" role="status">${flash.message}</div>
            </g:if>


            <div class="row">
                <div class="col-sm-6">
                    <input id="search" class="form-control" onkeyup="getSearchRequest()" value="${searchQuery==null?'':searchQuery}" name = "search" type="text" placeholder="Search" aria-label="Search">
                </div>
                <div class="col-sm-6">
                    <g:link action="createCustomer">
                        <button id="add" class="btn btn-primary">
                        <i id="addicon" class="fa fa-plus" aria-hidden="true"></i>
                        Add Customer
                    </button>
               </g:link>
           </div>
       </div>

       <table class="table table-bordered" id = "table">
        <colgroup>
            <col style="width:10%">
            <col style="width:25%">
            <col style="width:20%">
            <col style="width:25%">
            <col style="width:25%">
        </colgroup>
        <thead>
            <tr>
                <td style=column-width:10px;>Number</td>
               <td>Name</td>
               <td>Code</td>
               <td>Contact person</td>
               <td>Status</td>
           </tr>
       </thead>
       <tbody id="tableBody">

       </tbody>
   </table>
</div>
<g:if test="${fromIndex}">
    <div class="pagination">
        <g:paginate max="5" total="${customerCount}" />
    </div>
</g:if>
</div>

非常感谢

HTML侧导航栏不固定

0 个答案: