用于液体布局的 css - 高度取决于一列的内容答案

【问题标题】：css for liquid layout - height depends on one column's content用于液体布局的 css - 高度取决于一列的内容
【发布时间】：2016-02-12 02:23:20
【问题描述】：

我正在使用流式布局构建一个新页面，这里推荐screen.css：

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-GB">
<head>
    <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
</head>
<body>

<div id="header">
    Header
</div>
<div class="colmask leftmenu">
    <div class="colleft">
        <div class="col1">
            col 1
        </div>
        <div class="col2">
            col 2
        </div>
    </div>
</div>
<div id="footer">
    Footer
</div>

</body>
</html>

CSS：

<style media="screen" type="text/css">
/* <!-- */
html,body {
    height:100%;
}

body {
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:100%;
    background:#fff;
    min-width:600px;        /* Minimum width of layout - remove line if not required */
                    /* The min-width property does not work in old versions of Internet Explorer */
    font-size:90%;
}
a {
    color:#369;
}
a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
}
h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
}
p {
    margin:.4em 0 .8em 0;
    padding:0;
}
img {
    margin:10px 0 5px;
}


/* Header styles */
#header {
    clear:both;
    float:left;
    width:100%;
}
#header {
    border-bottom:1px solid #000;
}
#header p,
#header h1,

/* 'widths' sub menu */
#layoutdims {
    clear:both;
    background:#eee;
    border-top:4px solid #000;
    margin:0;
    padding:6px 15px !important;
    text-align:right;
}
/* column container */
.colmask {
    position:relative;  /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%;         /* width of whole page */
    overflow:hidden;        /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
    float:left;
    width:100%;
    position:relative;
}
.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;
    overflow:hidden;
}
/* 2 Column (left menu) settings */
.leftmenu {
    background:#fff;        /* right column background colour */
}
.leftmenu .colleft {
    right:75%;          /* right column width */
    background:#f4f4f4; /* left column background colour */
}
.leftmenu .col1 {
    width:71%;          /* right column content width */
    left:102%;          /* 100% plus left column left padding */
}
.leftmenu .col2 {
    width:21%;          /* left column content width (column width minus left and right padding) */
    left:6%;            /* (right column left and right padding) plus (left column left padding) */
}
/* Footer styles */
#footer {
    clear:both;
    float:left;
    width:100%;
    border-top:1px solid #000;
}
#footer p {
    padding:10px;
    margin:0;
}
/* --> */
</style>

这几乎可以根据需要工作，除了我试图让布局的高度取决于 Col 1 - 也就是说：

a) 当 Col1 的内容不多时，布局应该占据浏览器窗口的整个高度

b) 当 Col1 中的内容超过浏览器窗口的高度时，整个浏览器窗口（不仅仅是 Col1）都会获得一个垂直滚动条

我试过设置：

html,body {
height:100%;
}

但它没有像描述的那样工作。我原以为这是一个相当常见的场景，但是在尝试学习 CSS/布局时，很难从“坏/过时”中区分“好”建议

【问题讨论】：

stackoverflow.com/questions/33080/… ---- 这与您正在寻找的内容非常相似 stackoverflow.com/questions/90178/… --- 也检查一下这个

标签： html css

【解决方案1】：

您可以使用flex box：

body {
  display: flex;          /* make the body a flex box */
  flex-direction: column; /* children go down the screen */
}

.leftmenu {
  flex: 1;                /* resize to fill the space */
  overflow: auto;         /* overflow as needed */
}

在这个 Fiddle 中，根据需要调整窗口大小以查看滚动条：

http://jsfiddle.net/qrf29pop/

【讨论】：