Question

我不得不打开一个非常具体的布局网页。

有一个固定的容器，就是这样整个浏览器窗口带有有效边际为20px，然后该容器内有两个面板。
两个面板都必须消耗整个面板容器的宽度。
第2小组必须位于底部容器，需要向上发展取决于其内容。
小组1 应该占据整个剩余的容器的空内容，虽然底部边距为20px，并且应该出现滚动条其中的内容溢出（即溢出：自动）。

这是一个例子，带有令人眼花缭乱的丑陋颜色:(容器和面板2可以正常工作 - 这是面板1错了。）

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css">
body {
    background-color: gray;
}

#container {
    position: fixed;
    top: 20px;
    right: 20px;
    bottom: 20px;
    left: 20px;
    border: dashed red;
    overflow: hidden;
}

#panel1 {
    background-color: green;
    color: white;
    margin-bottom: 20px;
    padding: 20px;
    overflow: auto;
}

#panel2 {
    background-color: blue;
    color: white;
    padding: 20px;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}
</style>
</head>

<body>
    <div id="container">
        <div id="panel1">
            <h2>Panel 1</h2>
            <p>This panel should occupy all space in the container not occupied by Panel 2, with a scrollbar appearing when content overflows (ie overflow: auto) and a 20px bottom margin.</p>
        </div>
        <div id="panel2">
            <h2>Panel 2</h2>
            <p>This panel should be positioned at the bottom of the container and grow upwards depending on its content.</p>
        </div>
    </div>
</body>
</html>

有谁知道实现这一目标的最佳方式？我很少钻研CSS，所以我可能会遗漏一些明显的东西。理想情况下，解决方案应该使用CSS＆lt; = 2.1，符合标准，不依赖于JavaScript，并且不应该依赖于固定的高度。

谢谢！

Answer 1

有你的约束，你不能。

CSS布局难题

1 个答案: