픽셀 및 퍼센트가있는 CSS 레이아웃

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

  •  06-09-2019
  •  | 
  •  

문제

하나는 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 포지션을 원할 수도 있다고 생각합니다 : 고정.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top