Question

我无法将列扩展到body元素的底部。到目前为止，这是CSS：

body {
    margin: 0 auto;
    padding: 0;
    width:90%;
    background: #a7a09a;
}

.header {
    padding: 5px 10px;
    background-color: #DDDDDD;
}

.navmenu {
    background-color: #CC9998;
}

.navmenu ul {
    margin: 0;
    padding: 0;
    list-style-type: 0;
}

.navmenu li {
    display: inline;
    margin: 0;
    padding: 5px 10px;
}

.column1 {
    width: 70%;
    height: 100%;
    float: left;
    background-color: #9ACC99;
}

.column2 {
  width: 30%;
  height: 100%;
  float: right;
  background-color: #9999CD;
}
.footer {
    clear: left;
}

h1 {
    margin: 0;
}

h2 {
    padding: 5px;
}

p {
    padding: 10px;
}

第一列延伸到第二列。我知道它与浮动元素有关，我读到了使用clear属性，但我试过在左边，右边，两者都没有，在Footer div上没有，第二列仍然没有延伸。编辑我的CSS以实现这一目标的最佳方法是什么？

<body>
    <div class="header">
        <h1>Simple 2 column CSS layout, final layout</h1>
    </div>
    <div class="navmenu">
        <ul>
        </ul>
    </div>
    <div class="column1">
        <h2>Column </h2>
        <p> <a href="#">Text</a>
            <br>
            <br>
            <a href="#">Simple 2 column CSS layout</a>
        </p>
            <ul>
            </ul>
    </div>
    <div class="footer">
    </div>
  </body>

Answer 1

目前，列的高度没有100％自我调整。

允许元素继承视口高度的一种方法是添加html,body { height: 100%; }以允许百分比高度，并删除正文上的边距。

相关问题 - Make body have 100% of the browser height

您尚未提供HTML，因此示例1基于您的CSS。根据您的需要，您可能需要修改列高度以考虑页眉和页脚的高度。

这两个示例都以max-width和margin: 0 auto为中心。背景由html上的背景颜色提供。

示例1

＆＃13;

html {
	background: #333;	
}
html,body {
  height: 100%;
  margin: 0;
}

body {
  max-width: 500px;
  margin: 0 auto;
}

.column1 {
  width: 70%;
  height: 100%;
  float: left;
  background-color: #9ACC99;
}
.column2 {
  width: 30%;
  height: 100%;
  background-color: #9999CD;
  float: left;
}

＆＃13;

<div class="column1">
</div>

<div class="column2">
</div>

＆＃13;

示例2

此示例使用display: table和display: table-cell进行。页眉和页脚是标准块元素，高度在元素之间共享，最多可达100％。

＆＃13;

html {
 background: #333;	
}

html,body {
  height: 100%;
  margin: 0;
}
header {
  height: 20%;
  background: #e91e63;
  max-width: 500px;
  margin: 0 auto;
}
.wrap {
  display: table;
  height: 70%;
  width: 100%;
  margin: 0 auto;
  max-width: 500px
}
.column1 {
  width: 70%;
  display: table-cell;
  background-color: #9ACC99;
}
.column2 {
  width: 30%;
  display: table-cell;
  background-color: #9999CD;
}
footer {
  height: 10%;
  background: #f8bbd0;
  max-width: 500px;
  margin: 0 auto;
}

＆＃13;

<header></header>
<div class="wrap">
    <div class="column1"></div>
    <div class="column2"></div>
</div>
<footer></footer>

＆＃13;

无法使列伸展

1 个答案:

示例1

示例2