픽셀 및 퍼센트가있는 CSS 레이아웃
문제
하나는 65 픽셀 (헤더)의 높이를 지정하고 다른 하나는 높이를 100% (컨텐츠)로 지정하는 두 개의 중첩 된 div를 포함하는 div가 있습니다. 페이지가 렌더링되면 오른쪽에 스크롤 바가 있습니다.
내가 잘못 혼합 된 믹스와 픽셀을하고있는 것은 무엇입니까? 나는 뭔가를 놓치고 있어야한다. 컨텐츠 섹션이 나머지 페이지 공간을 사용하고 스크롤 막대가 없도록이 문제를 해결하려면 어떻게해야합니까?
다음은 사용중인 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의 z-index와 함께 헤더를 절대적으로 배치하십시오. 컨텐츠 div에 65px의 패딩 탑을 z- 인덱스로 제공합니다. 이는 브라우저 창의 너비로 성장/수축하는 동적 폭이없는 매우 강력한 디자인으로 잘 작동합니다.
2) 콘텐츠의 상단, 왼쪽, 하단, 오른쪽을 명시 적으로 배치하십시오. 너비 나 높이를 지정하지 마십시오. 이 경우, 상단, 왼쪽, 하단 및 오른쪽은 함량 DIV의 함유 블록의 내부 패딩 모서리를 기반으로 계산됩니다. 다시 말하지만, 이것은 엄격한 사이트 디자인에서 훌륭하게 작동합니다. IE7/8에서 작동하지만 IE6 이상에 문제가 있습니다.
3) 컨텐츠 div에서 음의 상단 마진 OG -65px를 사용하십시오. 65px의 상단 패딩을 사용하여 보상하십시오. 이것은 IE7 이상에 문제가 될 수 있으며 때로는 Firefox가 부정적인 마진으로 기발합니다. 문제를 해결할 수있는 해킹이 있습니다. 그물 만 검색하십시오. 이것은 강성 또는 유체 레이아웃에 대해 작동해야합니다.
인터넷에는 CSS 설계를위한 많은 리소스가 있습니다. 위의 옵션이 작동하지 않으면 인터넷의 일부 검색은 일부 리소스를 가져와야합니다.
다른 팁
읽으십시오 이 기사 첫째 ... 상충되는 절대 위치 CSS 템플릿에서 어떻게 든 이야기하는 문제의 종류를 다룹니다.
현재 총 높이가 100% + 65px의 2 개의 div가 있으므로 스크롤 바가 있어야합니다.
CSS 해킹에 의지하지 않고 DIV만으로 시도하는 일을 실제로 할 수는 없습니다. 가장 간단하고 가장 간단한 브라우저 호환 방법은 2 행 테이블에 포함시키는 것입니다. 테이블 높이를 100%, 첫 번째 TD 높이를 65px로, 두 번째 TD 높이를 지정하지 않았습니다. 어떤 사람들은 레이아웃을 위해 테이블에 의지하는 것에 반대하지만 어쨌든 CSS를 잘못 사용하려는 경우 왜 그렇지 않습니까?
그러나 하나의 div가 다른 디자인만으로 디자인을 사용하는 것이 좋습니다. 화면 크기의 광범위한 변형으로 인해 브라우저에 컨텐츠를 동적으로 조정하는 것이 더 이상 잘 작동하지 않습니다.
(100% + N)> 100% - 불행히도 CSS에서 "나머지 공간"과 같은 것은 없습니다.
당신이 100%라고 말할 때 그것은 정확히 의미가 있기 때문에, 당신의 최선의 방법은 Jrista의 옵션 2 또는 3이 될 것입니다 (IMHO ABS 포지셔닝을 피해야합니다). 또한 Google 포지션을 원할 수도 있다고 생각합니다 : 고정.