我正在尝试做下一个:
html > body > div-wrapper > div-left, div-separator, div-content
- 三个 div 将具有相同的高度
- 如果它们是空的(或没有溢出),高度将是页面的 100%(没有滚动条)。
- 如果其中一些溢出,我将只有 1 个滚动条同时向下/向上滚动三个 div(我认为滚动包装器)。
这可能吗?我花了 7 个小时思考这个问题,但我不能只用 HTML + CSS(不使用 flexbox)来解决。
谢谢,
这是一个很好的问题!我花了很长时间为您创建一个优雅的解决方案。
您需要的是带有额外列容器的动态粘性页脚技术。
<div id="container">
<header class="section">
foo
</header>
<div class="section expand">
<div class="columns-container">
<div class="column" id="a">
<p>Contents A</p>
</div><div class="column" id="b">
<p>Contents B</p>
</div><div class="column" id="c">
<p>Contents C</p>
</div>
</div>
</div>
<footer class="section">
bar
</footer>
</div>
/*************************
* Sticky footer hack
* Source: http://pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way/
************************/
/* Stretching all container's parents to full height */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/* Setting the container to be a table with maximum width and height */
#container {
display: table;
height: 100%;
width: 100%;
}
/* All sections (container's children) should be table rows with minimal height */
.section {
display: table-row;
height: 1px;
}
/* The last-but-one section should be stretched to automatic height */
.section.expand {
height: auto;
}
/*************************
* Full height columns
************************/
/* We need one extra container, setting it to full width */
.columns-container {
display: table-cell;
height: 100%;
}
/* Creating columns */
.column {
/* The float:left won't work for Chrome for some reason, so inline-block */
display: inline-block; /* for this to work, the .column elements should have NO SPACE BETWEEN THEM */
vertical-align: top;
height: 100%;
width: 33.3333%;
}
/****************************************************************
* Just some coloring so that we're able to see height of columns
****************************************************************/
header { background-color: yellow; }
#a { background-color: pink; }
#b { background-color: lightgreen; }
#c { background-color: lightblue; }
footer { background-color: purple; }
您的问题中有一个错误的 CSS 选择器。正确的是:
html > body > div-wrapper > div-left,
html > body > div-wrapper > div-separator,
html > body > div-wrapper > div-content {
<style type="text/css">
.wrap {
border: 1px solid #f00;
height: 100%;
width: 100%;
}
.wrap div {
border: 1px solid #00f;
overflow: auto;
height: 100%;
width: 33%;
float: left;
margin: 0px;
}
</style>
<div class="wrap">
<div>Contents A</div>
<div>Contents B</div>
<div>Contents C</div>
</div>
或者
<frameset cols="33%,*,33%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
这样做:
.col{
display:block;
height:100%;
}
它很简单,它很快,它是 css。