Question

我正在使用css

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}

我的网站的

标签使得某些div的高度达到100％，但是当我添加它时会像我这样混淆我的html：http://prntscr.com/2xmqq8，但当我把它取出时，它会恢复正常，但左边的div高度不是这样的100％：http://prntscr.com/2xmrmf？为什么会这样做以及如何解决？

HTML：

<div id="wrapper">
     <div id="header">
        some stuff here
     </div>
     <div style="clear:both">
     </div>
     <div id="content">
        <div id="left">
           some stuff here too
        </div>
     </div>
</div>

Css：

html, body {
    padding: 0;
    margin: 0;
    height: 100%;
}

#content #left {
    width:295px;
    min-height:100%; 
    border-right: 1px dotted #000; 
    padding: 0 0 0 10px;
    float: left;
}

#wrapper {
    background:url(../images/wrap_bg.png);
    width: 1240px;
    height:100%;
    margin-left:auto;
    margin-right:auto;
}

#wrapper #content {
    width: auto;
    height:100%;
}

Answer 1

你不需要

html, body

您可以将其替换为

body {...};

Answer 2

试试吧。请注意，我仅对您的示例进行了必要的更改。

body {
    padding: 0;
    margin: 0;
}
#content #left {
    height: 100%;
    position: absolute;
    top: 0;
    z-index: -1; /* Hide right border below #header */ 
    box-sizing: border-box; 
    /*padding: 0 0 0 10px;*/
    padding-top: 30px; /* Height of #header */
}

如果负z-index在旧浏览器中不起作用，则使用以下样式。

#header {
    position: relative;
    z-index: 1;
    background: #fff;
}

css html，body {}混淆了我的页面

2 个答案: