Question

我正在尝试在HTML和CSS中创建一个简单的布局，它可以获得100％的全屏高度，其中两列的高度相同，无论它们有多少内容。

就像现在一样，可滚动区域停在屏幕的高度，而不是页面。请帮我搞定这个。我几乎尝试了所有可以找到的教程。

标记。

<html>
<body>

<div id="container">

<div id="sidebar"></div>

<div id="content"></div>

</div>

</body>
</html>

CSS代码。

html,body {

height: 100%;

}

#container {

width: 600px;
height: 100%;

background-color: black;

}

#sidebar {

float: left;

width: 200px;
height: 100%;

background-color: blue;

}

#content {

float: left;

width: 400px;
height: 100%;

background-color: red;

}

Answer 1

我认为你不能这样做，他们暗示你的代码（仅限CSS）。您可以使#container的大小与#content相同，但不能与#sidebar相同。你可以把你的样式放在你的容器上，因为它会延伸height: inherit属性。

以下是您可以尝试的其他一些示例http://www.ejeliot.com/blog/61

如果您对该路线感兴趣，另一个选择是调整#sidebar的javascript大小以匹配#content。

Answer 2

这是我可以用纯HTML \ CSS解决问题的最接近的问题：http://jsfiddle.net/Drcx8/3/

正如TNC所提到的，如果你想让它们具有完全相同的高度，你需要使用JavaScript来计算两个元素的高度，并将较大的高度应用于较低的高度元素。

全高度在浏览器视口停止

2 个答案: