CSS布局与像素和百分数
我有一个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;}
最简单的解决方案是将您的标题移动到您的内容中......然后它将在内容块中占用空间，而不是在其上方。
如果这不是一种选择，有多种解决方案可以解决问题。 以下是一些列表：
1）绝对地定位标题，其z-index如10所示。给内容div一个65px的填充顶部，z-索引为1.标题应该覆盖内容div的上部填充区域。 这对非常僵硬的设计非常有用，它没有任何随浏览器窗口宽度增长/缩小的动态宽度。
2）明确定位内容div的顶部，左侧，底部，右侧。 不指定宽度或高度。 在这种情况下，顶部，左侧，底部和右侧是基于内容div的包含块的内部填充边缘计算的。 再次，这在刚性站点设计中很有效。 应该在IE7 / 8中工作，但IE6和更早版本会出现问题。
3）在内容div上使用负顶边距og -65px。 使用65px的顶部填充进行补偿。 IE7和更早的版本可能会造成问题，有时FireFox会因为利润率过高而变得不稳定。 有黑客可以解决问题，只需搜索网络。 这应该适用于刚性或流体布局。
网络上的CSS设计有很多资源。 如果上述选项不起作用，网络上的一些搜索应该提供一些资源。
试着先阅读这篇文章......它是关于CSS模板中的绝对位置冲突 ，并以某种方式解决您所谈论的问题。
目前你有2个div，总高度为100％+ 65px，所以它应该有一个滚动条
你无法真正做你正在尝试的东西，只需div而不诉诸css hacks。 最简单和多数浏览器兼容的方法是将它放在一个2行的表格中。 将表格高度设置为100％，第一个高度为65px，第二个高度未指定。 有些人反对诉诸布局表，但如果你打算不正确地使用CSS，那么为什么不呢？
尽管如此，最好使用一个设计而不是一个div。 由于屏幕尺寸的宽泛变化，动态调整浏览器的内容不再适用。
链接地址: http://www.djcxy.com/p/75825.html