带像素和百分比的 CSS 布局

Question

我有一个 div，其中包含两个嵌套的 div，一个指定高度为 65 像素（标题），另一个指定高度为 100%（内容），它应该垂直占用其余空间。页面渲染时，由于页眉的高度指定为 65 像素，右侧有一个滚动条。

我在混合百分比和像素时做错了什么？我肯定错过了什么。如何解决此问题，以便内容部分使用页面空间的其余部分并且我没有滚动条？

这是我正在使用的 ASP .NET 标记和 CSS：

    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"/>
        <div id="header">
            <div style="float: left; height: 100%"><img align="top" alt="" src="~/images/Logo.gif" runat="server"/></div>
            <div style="float: right; height: 100%">
                <div id="outer" >
                    <div id="middle">
                        <div id="inner">
                            <asp:Label runat="server" ID="ApplicationName" Text="Application" CssClass="appname"></asp:Label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="content">
            <ig:WebSplitter ID="WebSplitter1" runat="server" Height="100%" Width="100%" 
                DynamicResize="True" CssClass="junk">
                <panes>
                    <ig:SplitterPane ToolTip="Navigation Pane" runat="server" Size="20%" CollapsedDirection="PreviousPane" Locked="true">
                        <Template>
                            <asp:ContentPlaceHolder ID="NavigationPlaceHolder" runat="server">
                                <ig:WebDataTree ID="NavTree" runat="server" EnableHotTracking="true" 
                                    Height="100%" OnNodeClick="NavTree_NodeClick" SelectionType="Single" 
                                    InitialExpandDepth="1"
                                    Width="100%" BorderWidth = "0px"
                                    EnableAjax ="true">
                                    <AutoPostBackFlags NodeClick="On" NodeCollapsed="Off" NodeExpanded="Off" NodeEditingTextChanged="Off" />
                                </ig:WebDataTree>
                            </asp:ContentPlaceHolder>
                        </Template>
                    </ig:SplitterPane>
                    <ig:SplitterPane Tooltip="Content Pane" runat="server" Size="80%">
                        <Template>
                            <asp:ContentPlaceHolder ID="SiteContentPlaceHolder" runat="server"/>
                        </Template>
                    </ig:SplitterPane>
                </panes>
            </ig:WebSplitter>
        </div>
    </div>   

html
{
    padding: 0px;
    margin: 0px;
    border: none;
    width: 100%;
    height: 100%;
    font-family: verdana;
    font-size: x-small;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    text-transform: none;    
    float: none;       
} 

body
{
    border: none;
    padding: 0px;
    height: 100%;
    width: 100%;
    border: none;
    margin: 0px;
}

form 
{
    border: none;
    margin: 0px; 
    padding: 0px; 
    border: none; 
    height: 100%; 
    width: 100%;
}

span.appname
{
    text-align: right;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18pt;
    font-weight: bold;
    font-style: normal;
    color: #FFFFFF;
    padding-right: 10px;
}

#header 
{
    background: #295984;
    width: 100%;
    height: 65px;
    overflow: hidden;
}

#content
{
    display: inline;
    width: 100%;
    height: 100%;
}

#outer {height: 100%; overflow: hidden; position: relative; width: 100%;}
#outer[id] {display: table; position: static;}

#middle {position: absolute; top: 50%; width: 100%; text-align: center;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}

#inner {position: relative; top: -50%; text-align: right;} /* for explorer only */
#inner {width: 100%; margin-left: auto; margin-right: auto;} /* for all browsers*/
#inner[id] {position: static;}

Answer 1

最简单的解决方案是将您的标题移动到您的内容中......然后它将占用内容块内的空间，而不是它上面的空间。

如果这不是一个选项，有多种解决方案可以解决问题。以下是一些列表：

1) 绝对定位标题，z-index 为 10。为内容 div 提供 65px 的 padding-top，z-index 为 1。标题应覆盖内容 div 的上部填充区域。这对于没有任何动态宽度随浏览器窗口宽度增长/收缩的非常严格的设计非常有效。

2) 明确定位内容 div 的顶部、左侧、底部、右侧。不指定宽度或高度。在这种情况下，top、left、bottom 和 right 是根据内容 div 的包含块的内部填充边缘计算的。同样，这在严格的网站设计中效果很好。应该在 IE7/8 中工作，但在 IE6 和更早版本中会出现问题。

3) 在内容 div 上使用负上边距 og -65px。使用 65 像素的顶部填充进行补偿。这对于 IE7 及更早版本可能会出现问题，并且有时 FireFox 会因负边距而变得不稳定。有可以解决问题的hack，只需搜索网络即可。这应该适用于刚性或流体布局。

网上有很多关于 CSS 设计的资源。如果上述选项不起作用，在网上搜索一下应该会找到一些资源。

Answer 2

先尝试阅读this article...它是关于 CSS 模板中的绝对位置冲突，它以某种方式解决了您正在谈论的问题。

Answer 3

目前你有 2 个 div，总高度为 100% + 65px，所以它应该有一个滚动条

如果不借助 css hack，您将无法真正使用 div 来完成您正在尝试的事情。最简单和最兼容浏览器的方法是将其包含在一个 2 行表中。将表格高度设置为 100%，第一个 td 高度为 65px，第二个 td 高度未指定。有些人反对使用表格进行布局，但如果您无论如何都要错误地使用 css，那为什么不呢？

不过，最好使用一个 div 位于另一个之上的设计。由于屏幕尺寸的广泛变化，动态调整内容以适应浏览器不再有效。

Answer 4

(100% + N) > 100% - 不幸的是，CSS 中没有“剩余空间”之类的东西。

当您说 100% 时，它的意思正是如此，所以您最好的选择是 jrista 的选项 2 或 3（恕我直言，要避免 abs 定位）。我也认为你可能想谷歌位置：固定。

Answer 5

您可以在 CSS 中使用 calc() 函数。标题高度：65px。对于内容高度：calc(100% - 65px)。使用 CSS 变量作为标题高度，所以将来如果你想改变，你只需要改变就地。