Question

嗨我想要为左侧和侧栏制作全高度我必须是100％高度但是我的css看起来像一辆小马车

 html{
  height: 100%;
    min-height: 100%;
   }

body{
 height: 100%;
 }

.container{
   background-color: #999;
    padding: 20px;
    height:100%;
  }

.sidebar{
   background-color: #9999ff;
   float:left;
   width:30%;
   height:100%;
 }

.content{
   background-color: #99ff99;
   float:left;
   width:70%;
   height:100%
   }

这是我的小提琴

demo

如果我做了高度：100％的孩子意味着大部分内容都会溢出。

Answer 1

将 .container 显示为表格：

.container{
    background-color: #999;
    padding: 20px;
    display:table;
    height:100%;
}

.sidebar{
    background-color: #9999ff;
    display:table-cell;
    width:30%;
 }

.content{
    background-color: #99ff99;
    display:table-cell;
    width:70%;
}

http://jsfiddle.net/56C9v/15/

Answer 2

我已更新您的fiddle

HTML：

<div class="container">
    <div class="wrapper">
        <div class="sidebar"></div>
        <div class="content"></div>
    </div>
</div>

CSS：

HTML { 身高：100％; 最小高度：100％; }

body{
    height: 100%;
}

.container{
    background-color: #999;
    padding: 20px;
}

.wrapper {
    position: relative;
}

.sidebar{
    background-color: #9999ff;
    float:left;
    width:30%;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
}

.content{
    width: 70%;
    background-color: #99ff99;
    float:right;
}

css身高：100％对于异常流过的孩子

2 个答案: