我正在使用流式布局构建一个新页面，这里推荐使用 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>
这几乎可以按需工作，除了我试图让布局的高度取决于列 1 - 也就是说:
a) 当Col1内容不多时，布局应占据浏览器窗口的整个高度
b) 当 Col1 中的内容多于浏览器窗口的高度时，整个浏览器窗口(不仅仅是 Col1)都会有一个垂直滚动条
我试过设置:
html,body {
height:100%;
}
但它并没有像描述的那样工作。我原以为这是一个相当普遍的场景，但是在尝试学习 CSS/布局时，很难将“好”建议与“坏/过时”的建议区分开来
最佳答案
您可以使用 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 中，调整窗口大小以查看根据需要显示的滚动条:
关于html - 用于液体布局的 CSS - 高度取决于一列的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33643018/