0

我有一个用户应用程序的流畅 CSS 布局。目标是大内容区域（白色）和深蓝色#notiarea 将扩展以填充客户端桌面。目标是让#notiarea 扩展以填充用户桌面的其余部分。

#notiarea 和内容 div 将具有如下图所示内容的滚动条。

我的问题是如何让深蓝色 (#notiarea) 元素仅扩展到应用程序视图区域高度的其余部分？我如何让#notiarea 在所有固定高度元素下的高度保持流动，而不是我需要使用 css 标签“overflow:auto;”的能力？我更喜欢 css 解决方案，但我会接受 jQuery 解决方案。

例子

源代码：这是一个用于快速实验的 jsfiddle：http: //jsfiddle.net/YLZRb/

4

3 回答 3

1

好吧，不用解释（我希望代码自己说话）我给你语义方法..

http://jsfiddle.net/YLZRb/6/

<header>

</header>
<div class="content">
    <aside>
        <section class="post">

        </section>
    </aside>
    <section class="main">

    </section>
</div>

和CSS

html,body{
    height: 100%;
    width: 100%;
    padding: 0px;
    margin: 0px;
}
body {
    background-color: #a3badc;
}
header {
    background-color: #515c6e;
    height:67px;
    box-shadow: rgba(0, 0, 0, 0.746094) 0px 5px 5px 0px;
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    z-index: 9999;
}

.content {
    height: 100%;

}
.content aside {
    position: fixed;
    background-color: #032d3b;
    width: 230px;
    height: 100%;
    top: 67px;
    left: 0px;
}
.content aside .post {
    width: 100%;
    height: 220px;
    background-color: #1d779c;
}
.main {
    margin-top: 67px;
    display: inline-block;
}

​ ​</p>

​</p>

于 2012-09-23T01:01:49.733 回答
1

演示：http ://dabblet.com/gist/3768929

我使用非常有用的“box-sizing:border-box”属性来获得这个结果，请在此处阅读：paulirish.com/2012/box-sizing-border-box-ftw/

它与 IE8+ 兼容，您只需为 IE7 及以下版本稍微调整布局即可。你可以给侧边栏“位置：绝对”......这是最好的一个（没有太多麻烦）。

好吧，我之前已经做了无数次类似的布局，并且非常感谢 box-sizing 属性。以下是对更改的快速回顾：

#sidebar 现在有一个 'padding-top' 值等于 #newpostcreator 的高度。然后，#newpostcreator 再次使用负顶部定位将其拉回原位，其值等于其高度，在我们的示例中为：-206px。

请注意，我还使用“*”通用选择器为每个元素“位置：相对”。当您在页面上有多个绝对定位元素时，这非常有用，因此您不必为每个相应的容器指定相对定位。这主要是一个 DRY（不要重复自己）的事情，并使代码更清晰。这也通过'top''left''right'和'bottom'为每个元素提供了额外的位置控制。

此外，由于#sidebar 是“位置：固定”，它会从布局中移除并相对于视口定位。所以我们需要一些空白空间让它在不中断/重叠页面内容的情况下休息。我通过给 #container 一个等于侧边栏宽度的 padding-left 值来做到这一点。但我看到你已经在你的小提琴中做到了。我只是稍微改进了一下。

现在回到侧边栏，我提到给它一个 206 像素的 padding-top。要了解这背后的逻辑，您应该了解 box-sizing 在布局中的作用。基本上，带有“border-box”的元素的填充和边框都位于容器内。因此，无论您指定元素的宽度如何，添加填充/边框都不会添加其最终宽度/高度，它将包含在其中。请记住，这不适用于边距。

因此，侧边栏中剩余的空间减去 206px 的填充是 100%，我们现在将其分配给 #notiarea。

差不多就是这样。如果您研究代码，您将获得比我能够提供的更好的理解。请务必查看链接，并记得为旧版本的 Firefox、Opera 和 Chrome 添加供应商前缀到 box-sizing。

于 2012-09-23T05:39:41.363 回答
0

好的！，就在这里.. http://jsfiddle.net/Ghcgr/

Jsfiddle 有 css 问题，因为它的 iframe 属性和 css 将在独立页面上工作.. 确保你确定clear，float并且width[sidebar and ajxpage]

于 2012-09-22T23:57:23.727 回答