0

我编写了以下 jsfiddle，它显示了一个包含两个元素的简单布局。

http://jsfiddle.net/64kps/RUjj2

HTML

<div id="hello">hello hello hello hello hello hello hello</div>
<div id="donut">donut</div>

JavaScript

var hello = document.querySelector('#hello');
var donut= document.querySelector('#donut');

var resize = function (event) {
    var helloHeight = window.getComputedStyle(hello).height
    helloHeight = helloHeight.replace('px', '');
    helloHeight = parseFloat(helloHeight);

    donut.style.height = (window.innerHeight - helloHeight) + 'px';
};

window.addEventListener('resize', resize, false);
resize();

我的问题

黄色元素保持固定在顶部，并具有取决于其内容所需的任何高度（请注意，高度未明确指定）

红色元素占据了剩余的垂直空间来填充窗口。

需要注意的是，随着窗口宽度的变化，黄色和红色元素的高度都会发生变化。

我想知道是否有任何方法可以使用纯 CSS 而不必使用 JavaScript 来实现这一点？

谢谢

4

3 回答 3

3

要填充窗口，请将 body 标记的背景设置为填充颜色。您的 CSS 将是：

body {
  background-color: red;
}
#hello {
  background-color: yellow;
  font-size: 50px;
}

无需为#donut 设置背景颜色。

于 2012-10-26T19:25:06.667 回答
1

你必须给 body 或 parent div 一个特定的高度来实现这一点，看看：

#hello {
 background-color: yellow;
 font-size: 50px;
}
#donut {
 background-color: red;
 height:100%;
}
body{height:1000px;}​

http://jsfiddle.net/hillsons/vqAaE/

于 2012-10-26T19:13:04.683 回答
0

这是我对您问题的解决方案

hrml:

<div id="asd">
    <div id="hello">hello hello hello hello hello hello hello</div>
    <div id="donut">donut</div>
</div>

CSS：

#hello {
    background-color: yellow;
    font-size: 60px;
}
#donut {
    background-color: red;
    height:100%;
}
#asd{
    position:absolute;
    height:auto;
    top:0;
    bottom:0;
}

我在 ie8+、ff16 chrome 22 上测试过

小提琴链接：http: //jsfiddle.net/RUjj2/8/

于 2012-10-26T19:42:46.230 回答