Question

我想在点击下拉列表时垂直拉伸侧边栏。侧边栏的高度为100％，因此如果单击链接或a标记，侧边栏应该拉伸。

但是，如果单击侧边栏，则容器和侧边栏保持100％高度，下拉菜单将超过菜单末尾。

在图片中有4个链接作为示例，但在下面的代码中我只添加了1个链接。

第一张图片：这是链接或a标签未点击

的时间

第二张图片：这是链接已经被点击并且侧边栏和容器没有伸展的时候。

<body>
<!-- SIDERBAR -->
    <div class="container">
        <div class="sidebar">
        <img src="images/1232.png" class="logo">
        <h1 class="h1-1">Pacific Sky</h1>
        <h1 class="hr-1">___________________________</h1>
        <img src="images/sampleimg.png" class="dp">
        <p class="welcomemessage">Welcome, <p class="adminname">Dave Spencer</p>

        <div class="links">
        <br>
            <h5 style="color: white; font-size: 2vh;">&nbsp;&nbsp;&nbsp;&nbsp;GENERAL</h5><br>

            <!-- Links -->
            <script type="text/javascript" src="js/showhide.js"></script>
            <!-- links palatandaan -->

            <div class="dashboard" id="dashboard">
            <p class="dashboard-color">&nbsp; &nbsp;&nbsp;&nbsp;
            <i class="fa fa-podcast" aria-hidden="true" id="dashboardlogo"></i>
            &nbsp;&nbsp;
            DASHBOARD 
            <i class="fa fa-caret-down okay" aria-hidden="true" id="downlogo"></i></p>

            <a href="" class="dashboardlinks"><i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Messages</a>
            <a href="" class="dashboardlinks"><i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Pending Reservation</a>
            <a href="" class="dashboardlinks"><i class="fa fa-dot-circle-o" aria-hidden="true" id="bullet"></i> Approved Reservation</a>
            </div><br>
</div>
</div>

    // showhide
$(document).ready(function(){
    $(".dashboard").click(function(){
        $("a").slideToggle(400);
    });
});         


*
{
    padding: 0;
    margin: 0;
}
body
{
    width: 100%;
    width: 100%;
    font-family: 'Alegreya Sans';
}
a
{
    color: white;
    text-decoration: none;
    display: none;
    font-family: RobotoT;
}
.container
{
    background: linear-gradient(to left bottom, #ccccff 0%, #ffffff 100%);
    position: relative;
    width: 100%;
    height: 100%;
}
.sidebar
{
    width: 50vh;
    height: 100vh;
    position: relative;
    background-color: #2A3F54;
}

//and this is the links


 .links
{
    position: relative;
    top: 33%;
    color: #e5e6e8;
}
.dashboardlinks
{
    font-size: 2.5vh;
    line-height: 250%;
    text-align: left;
    color: #e8eaef;
    position: relative;
    top: 1vh;
    padding-left: 14%;
}
#downlogo
{
position: absolute;
right: 8%;
}

Answer 1

可能只需要改变宽度到高度:(我会添加html）

body
{
    width: 100%;
    width: 100%;
    font-family: 'Alegreya Sans';
}

到

html, body
{
    width: 100%;
    height: 100%;
    font-family: 'Alegreya Sans';
}

Answer 2

将.sidebar更新为此

.sidebar
{
    width: 50vh;
    min-height: 100vh;
    position: relative;
    background-color: #2A3F54;
}

https://jsfiddle.net/pmuhnhfo/

我只是在小提琴中复制粘贴的更多项目以使其显示问题

以前的高度100vh是限制它的，因为你想要它全程伸展，只需设置最小高度

在旁注中，您应该更改

<p class="welcomemessage">Welcome, <p class="adminname">Dave Spencer</p>

到

<p class="welcomemessage">Welcome, <span class="adminname">Dave Spencer</span></p>

我认为您最初在另一个p标记

中有p标记

下拉菜单不垂直拉伸

2 个答案: