Question

我正在为新网站制作布局，而我在使用CSS实现我想要的方面遇到了一些麻烦。首先，我希望一切都始终保持在当前浏览器窗口的视图中，滚动在我的内容中，而不是浏览器本身。我有一个最外面的DIV，它作为我的“包装”，用于显示居中的网站，具有设定的宽度，并且具有100％的高度窗口。在此内部我放置一个标题，所有这些都适用于所有感兴趣的浏览器。

但是，一旦我将实际内容DIV放在这个“包装器”中，我无法将其定义为我想要的大小。如果我只是给它边距或填充来弥补我绝对定位的标题，内容将溢出，我无法设置滚动。如果我尝试直接设置大小，没有值可以放入，因为边距/填充将增加大小，现在它将大于当前浏览器窗口，并溢出。

有没有人可以想到的样式我可以在包装器/内容DIV上使用以获得所需的外观？ Here is a diagram illustrating the look I want.

Answer 1

以下假设您的标题高度固定（不是百分比）。此示例使用px值来更轻松地使用Firebug进行检查，但它与em的工作方式相同。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Title</title>

    <style type="text/css">

        html, body {
            margin:0;
            height: 100%;
        }

        #wrapper {
            position:relative;
            width: 400px;
            height: 100%;
            margin: 0 auto 0 auto;
        }
        #header {
            position:absolute;
            margin-top:0;
            height: 70px;
            width: 400px;
            background-color: #ccc;
        }
        #content {
            position: absolute;
            top: 70px;
            bottom: 0;
            width: 400px;
            overflow: auto;
            background-color: #99c;
        }
    </style>

</head>
<body>
    <div id="wrapper">
        <div id="header">Header</div>
        <div id="content">
            Content<br/>
            Content<br/>
            Content<br/>
            Content<br/>
            Content<br/>
            Content
        </div>
    </div>
</body>
</html>

重要的一点是，#content根本不使用height - 而是使用top和bottom的组合。

注意：我很确定，IE 6需要进行修改......

Answer 2

<style>
html, body {
    margin: 0;
    padding: 0;
    text-align: center;
    overflow: hidden; // prevents scroll bars in browser window}
#content_wrap {
    width: 800px; // set this to whatever you want
    margin: 0 auto; // centers the div
    text-align: left; 
    height: 100%; 
    position: relative; // basis for absolute positioning}
#header {
    position: absolute; 
    top: 0; 
    left: 20px; 
    width: 760px;}
#content {
    position: absolute; 
    left: 0; 
    top: 20%; 
    height: 80%; 
    overflow: scroll; 
    overflow-x: hidden;}
</style>

使用这种方法以及我能想到的任何挑战是，如果没有CSS表达式，除了百分比之外，您无法使#content div height扩展到屏幕底部。这样做的麻烦在于你的标题没有固定数量的空间可供使用。理想的“#content div应该在顶部有200px的边距，并扩展到页面的底部”属性集。

然而，您可以使用JS轻松完成此任务。

帮助内部内容框边距/填充

2 个答案: