所以我一直在拖网寻找我的难题的答案,我当然知道整个混乱的人造柱和背景以及溢出和负边缘,但我或者是盲人或者没有人解决过这一个。
情况非常简单:
如果没有太多的CSS黑客,有没有办法解决这个问题?我不会非常注意向后兼容性(例如,我很乐意使用vw单位),只要该网站在旧浏览器中完全不会崩溃。
我发布了一些示例代码,但到目前为止我只有6个文件,每个都测试一个流行的解决方案。最新的一个是使用vw:
HTML:
<div id="left">Left</div>
<div id="right">Right</div>
CSS:
body {
margin:0; /* This is used to reset any browser-default margins */
height:100vh; /* This is needed to overcome a Chrome bug. */
width:100vw; /* As above. */
}
div {
height:100vh;
}
#left {
background:snow;
float:left;
width: 20vw;
}
#right {
background:teal;
float:right;
width: 80vw;
}
这解决了第一个视口高度问题,但没有解决第二个最长列问题(如果用任何内容填充列,则可见)。
答案 0 :(得分:0)
纯CSS可以实现。但是,它在IE7中不起作用,因为它需要使用display: table
,并且此演示使用在IE7 / 8中不起作用的css视口单元。
display: table
,将两列设置为
display: table-cell
表示我们可以确保列的高度保持相等min-height
对表格单元格不起作用,因此我们需要一个内部div,我们可以将min-height应用于。一些额外的标记,但它解决了这个问题。作为测试,我留下了评论height
样式,以便您可以看到滚动时的样子。
html, body {
margin:0;
height:100%;
width:100%;
overflow-y: scroll;
}
#wrapper {
display: table;
min-height: 100%;
table-layout: fixed;
}
#wrapper>div {
display: table-cell;
min-height: 100%;
}
#wrapper>div:first-child {
background:snow;
width: 20vw;
}
#wrapper>div:last-child {
background:teal;
width: 80vw;
height: 100%
}
#wrapper .content {
min-height: 100vh;
/*height: 2000px;*/
}