Question

我现在已经很久了这个问题。

我有一个父div“包装器”，其中包含一个div“侧边栏包装器”，其中包含ul个li。

我希望“侧边栏包装”的高度适合“包装”高度。我的问题是当我将height设置为auto时为0。

我的HTML：

<div id="wrapper">
   <!-- Sidebar -->
   <div id="sidebar-wrapper">
       <ul class="sidebar-nav">
           <li class="sidebar-brand">
               <a href="#">
                   a lit of these li's
               </a>
           </li>
       </ul>
   </div>
   <!-- Page Content -->
   <div id="page-content-wrapper">
       <div class="container-fluid">
           <div class="row">
               Whatever Content!!
           </div>
       </div>
   </div>
</div>

我的css：

#wrapper {
    overflow:auto;
    border: 1px solid #000000;
    width: 100%;

    min-height:400px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#sidebar-wrapper {
    margin-left: -150px;
    overflow-y: auto;
    background: #000;
    height:400px;
    float:left;
    background-color:#222222;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}
.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}
.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

Answer 1

请参阅此fiddle

使用的CSS如下

html,body{
    height: 100%;
}

#wrapper {
    overflow:auto;
    border: 1px solid #000000;
    width: 100%;
    height: 100%;
    min-height:400px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#sidebar-wrapper {
    margin-left: -150px;
    overflow-y: auto;
    background: #000;
    height:100%;
    float:left;
    background-color:#222222;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
#page-content-wrapper {
    width: 100%;
    position: absolute;
    padding: 15px;
}
.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}
.sidebar-nav li a {
    display: block;
    text-decoration: none;
    color: #999999;
}

我已经为html，正文，包装和正文内容提供了height:100% ..

将高度设置为auto只是设置高度等于div内容的高度。我认为你希望高度等于包装器...所以你必须将它设置为100 ％。

这是我在进行指定更改后如何看到您的网站..

enter image description here

Answer 2

将包装纸高度更改为100％并为包装纸提供高度：请参见小提琴：See fiddle

#wrapper {
        overflow:auto;
        border: 1px solid #000000;
        width: 100%;
        height: auto; /* example height */
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    #sidebar-wrapper {
        margin-left: -150px;
        overflow-y: auto;
        background: #000;
        height:100%;
        float:left;
        background-color:#222222;
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        transition: all 0.5s ease;
    }
    #page-content-wrapper {
        width: 100%;
        position: absolute;
        padding: 15px;
    }
    .sidebar-nav li {
        text-indent: 20px;
        line-height: 40px;
    }
    .sidebar-nav li a {
        display: block;
        text-decoration: none;
        color: #999999;
    }

Answer 3

将父div的位置设置为relative，将子div设置为absolute：

#wrapper {
   ...
   ...

    /****  added css   ****/
     position:relative;
    /*********************/
   ...
   ...
}

修改1

正如您所评论的那样，我开始了解您希望边栏在整个页面中都可用，无论页面高度如何。

如果是这种情况，则“包装”div与之无关。只需将“sidebar-div”的位置设置为“fixed”，并根据页眉和页脚边距给出正确的上下边距：

并将子包装器的顶部和底部设置为0：

#sidebar-wrapper {
   ...
   ...
    /****  added css   ****/

    position:fixed;
    top:10px;
    bottom:10px;

    /*********************/
   ...
   ...
}

这是更新的演示JS小提琴链接：

<强> Updated Demo JS Fiddle Link

希望有所帮助！

如何设置一个div与父亲身高的李

3 个答案:

请参阅此fiddle