jquery - 为什么我将高度设置为 100% 时出现滚动条

Question

我不知道我在做什么愚蠢的错误。但是您看到我已将左侧栏的高度设置为 100%，但我得到一个滚动条我做错了什么

这是我的小提琴 http://jsfiddle.net/cancerian73/52zSJ/

html, body {
padding:0;
margin:0;
height:100%;
min-height:100%;
}
#wrapper2 {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto;
margin-bottom:-81px;
max-width: 1260px;
}
.admin-container {
position:relative;
margin:0 auto;
background:#CCC;
height:100%;
min-height:100%;
}
.admin-content {
padding:10px;
}
.admin-nav {
background-color:#252b39;
min-height:81px;
}
.admin-logo {
float: left;
margin: 20px;
}
.admin-left {
position: absolute;
height: 100%;
background-color:red;
}
.row-height {
height: 100%;
background-color: #AAD;
box-sizing: border-box;
}

Answer 1

那是因为您需要将 top 属性设置为零。它现在“浮动”在另一个元素下方，尽管它是绝对定位的。

http://jsfiddle.net/52zSJ/2/

.admin-left {
    position: absolute;
    height: 100%;
    top: 0px;
    z-index: -1;
    background-color:red;
}

Answer 2

100% 是总面积。但是你首先有 1 个 div (admin-nav) 和 81px。

在 css3 中您应该使用 calc() 函数，但这在旧浏览器中不起作用。

像这样：

#element { height: calc(100% - 81px); }

Answer 3

您甚至不需要使用绝对定位。绝对定位确实采用了页面的总高度，您想要父元素的总高度。为此使用静态位置：

其中两列应为 50%：

.columns
{
    width: 50%;
}

并且您的内容包装器应该具有未定义的剩余总高度。

您可以通过为标题指定高度来轻松做到这一点，例如：

header
{
    height: 20%;
    background-color: #252b39;
}

现在您知道您的内容应该有 80% 的高度：

.main-contents
{
    height: 80%;
}

jsFiddle