2017-05-29 117 views
0

这里是我的问题,我想使用滚动条,但它只是显示滚动但滚动条不工作。我使用的CSS样式的滚动条等的布局和HTML使用该造型。 这里是我的样式代码垂直滚动条不工作

#sub_menu, #content{ 
    display: inline-block; 
} 

#sub_menu{ 
    width:23%; 
    height: 10%; 
    background-color: #999999; 
    padding: 1%; 
    vertical-align: top; 
    border: 1px solid; 
} 
#content{ 
    width: 73%; 
    margin-right: 1%; 
} 
@media screen and (max-width: 600px), sreen\0{ 
#sub_menu{ 
     height: initial; 
     font-size: 15px; 
     margin-bottom: 2%; 
    } 
    #content, #sub_menu{ 
     display: block; 
     width: 95% 
    } } 
.contentt { 



    height: 100%; 
    overflow-y: scroll; 
    margin-bottom: 1%; 
} 

.contentt::-webkit-scrollbar { 

    display: none; 
} 

,这里是我的HTML代码

<div id="sub_menu"> 
         <h3 style="border-bottom: 3px solid rgb(135, 31, 139);">Related Videos</h3> 


    <div class="contentt" style="width:100%;height:40%; margin-bottom:3%;padding:2%" > 

    <?php 

    $con = new mysqli('localhost','','',''); 


    $sql = "SELECT ID, Title, Link FROM that where Category like 'this'"; 
    $result = $con->query($sql); 

    if ($result->num_rows > 0) { 

    while($row = $result->fetch_assoc()) { 

     $url = $row["Link"]; 


     $title = $row["Title"]; 
     $id = $row["ID"]; 
     $path="http://domain/Song.php"; 

     echo "<h5>$title'</h5>"; 
     echo '<a href="' . $path . '?Title=' . $title .'&id=' . $id .'"><img src="http://domain/images/' . $id .'.jpg" alt="HTML tutorial" style="width:75%;height:95%;border:0;"class="btnn songpicc"></a>'; 

     echo '<hr>'; 
    } 
    } else { 
    echo "0 results"; 
    } 

    $con->close(); 

    ?> 
    </div> 
    </div> 

由于提前

回答

1

你需要修复的高度容器(不在%中,但在px或em中)使用overflow-y:scroll;

1

你的滚动条不工作,或者是隐藏?

删除下面的CSS,它应该为你工作

.contentt::-webkit-scrollbar { 
    display: none; 
} 

,而是

.contentt { 
    overflow-y: scroll; 
} 

只是采用下面的代码,并检查

.contentt { 
    height: 400px; 
    overflow-y: auto; 
} 
+0

它是隐藏的,也没有工作。但是当我删除了此代码的滚动条显示,但不会再工作 – bebo

+0

你有什么实际网址我可以检查真正的问题 – Rahul

+0

@bebo检查我的更新ANS,并尝试一次 – Rahul

1

只是删除下面的代码CSS

.contentt::-webkit-scrollbar { 
    display: none; 
} 

的下方添加CSS

.contentt { 
     overflow-y:auto; 
     height:/* give here height in px as you need */ 
    } 

的代码,如果你使用webkit-scrollbar它会隐藏在Chrome的滚动条。但Firefox仍然保持默认的滚动条。

+0

现在的滚动条显示,但其不工作 – bebo