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％是总面积。但是你有第一个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

当我将高度设置为100％时，为什么我会得到滚动条

3 个答案: