题
我有一个包含两个嵌套的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的定位是要避免)。我也想你可能想谷歌的位置:固定