CSS布局与像素和百分比

StackOverflow https://stackoverflow.com/questions/928160

  •  06-09-2019
  •  | 
  •  

题

我有一个包含两个嵌套的div一个div，一个指定的65个像素（标题）的高度，它指定了高度为100％（含量）的其他和它应该采取的空间的其余部分veritically。当页面呈现，对由于头的像素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;}
有帮助吗？

解决方案

的最简单的解决方案是你的头移动到您的内容... ...然后它会占用空间内容块内，而不是它的上方。

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

1）绝对定位头，具有说10给内容的div 65px填充顶部，具有1的z-index头应涵盖内容div的上部填充区域的z索引。这将工作的伟大与不具有成长任何动态宽度/与浏览器窗口的宽度缩小非常严格的设计。

2）显式地定位所述顶部，左边，底部，内容DIV权。指定无宽度或高度。在这种情况下，顶，左边，底部，和右边是基于内容div的包含块的内边缘填充计算。同样，这部作品在刚性网站设计很大。如果在IE7 / 8的工作，但将问题与IE6和更早版本。

3）上的内容的div使用负上边距OG -65px。使用的65px顶部填充，以补偿。这可能是有问题的使用IE7和更早，有时火狐变得靠不住的切缘阴性。有一些可以解决问题，只是搜索网黑客。这应该适用于刚性的或流体的布局。

有用于在网络上的CSS设计了大量的资源。如果以上都不奏效，在网上搜索了一些应该把一些资源。

其他提示

尝试阅读这篇文章第一......这是关于冲突的绝对位置在CSS模板，不知它解决了有种你在说什么。问题

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

您真的不能做什么，你都只有不诉诸CSS黑客的DIV尝试。最简单和最浏览器兼容的方式做这将是其封装在一个2行表。设置表高度为100％，第一TD高度65px，未指定第二TD高度。有些人反对诉诸表格布局，但如果你要使用正确的CSS反正又何乐而不为呢？

虽然，这将是更好地使用设计只是与一个格在另一个的上面。动态地调整内容到浏览器不因屏幕尺寸的宽varation了很好地工作。

（100％+ N）> 100％ - 有没有这样的东西在CSS “的空间的其余部分” 不幸。

当你说100％，这意味着正是这样，所以你最好的选择将是要么jrista的选项2或3（恕我直言ABS的定位是要避免）。我也想你可能想谷歌的位置：固定

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top