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的填充顶部，z-index为1.标题应覆盖内容div的上部填充区域。这将非常适用于非常严格的设计，这些设计没有任何动态宽度随浏览器窗口的宽度增长/缩小。

2）明确定位内容div的顶部，左侧，底部，右侧。指定无宽度或高度。在这种情况下，顶部，左侧，底部和右侧是基于内容div的包含块的内部填充边缘计算的。同样，这在刚性站点设计中也很有用。应该在IE7 / 8中工作，但是对于IE6和更早版本会有问题。

3）在内容div上使用负上边距og -65px。使用65px的顶部填充来补偿。对于IE7及更早版本，这可能会出现问题，有时FireFox会因为负边距而变得不稳定。有黑客可以解决问题，只需搜索网络。这适用于刚性或流畅的布局。

网上有很多CSS设计资源。如果上述选项不起作用，网上的一些搜索应该会提供一些资源。

Answer 2

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

Answer 3

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

你不能真正做你正在尝试的只是div而不诉诸css hacks。最简单和最兼容浏览器的方法是将其封装在2行表中。将表格高度设置为100％，将第一个td高度设置为65px，将第二个td高度设置为未指定。有些人反对使用表格进行布局，但如果你打算不正确地使用css那么为什么不呢？

虽然，最好只使用一个div而不是另一个div。由于屏幕尺寸的广泛变化，动态调整浏览器的内容不再有效。

Answer 4

（100％+ N）> 100％ - 遗憾的是，CSS中没有“剩下的空间”这样的东西。

当你说100％意味着这一点，所以你最好的选择是jrista的选项2或3（imho abs定位是要避免的）。我也认为你可能想谷歌的位置：固定。

Answer 5

您可以在CSS中使用calc（）函数。标头高度：65像素。对于内容高度：calc（100％-65px）。将CSS变量用于标头高度，以便将来如果要更改，只需更改就位。

具有像素和百分比的CSS布局

5 个答案: